Ajax的原理和编程步骤

phpmatt 发布于2019-08-26 18:42 / 3432人阅读

摘要：如果我们假设文件和文件位于相同的目录，那么代码是这样的其他方法如下编程步骤创建对象设置请求方式调用回调函数发送请求处理返回的结果创建对象一般来说手写的时候，首先需要判断该浏览器是否支持对象，如果支持则创建该对象，如果不支持则创建对象。

Ajax的简介 什么是Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页
。

Ajax所包含的技术

AJAX 的核心是 XMLHttpRequest 对象。

1.使用CSS和XHTML来表示。

2.使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。

4.使用javascript来绑定和调用。

Ajax的工作原理

在用户和服务器之间添加了一个中间层（AJAX引擎），使用户操作与服务器响应异步话，并不是所有的用户请求都提交给服务器。
数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求

来看看两个方式的区别

XMLHttpRequ对象常用的三个属性

onreadystatechange属性
存有服务器响应的参数

readyState属性
存有服务器响应状态的信息

readyState 属性可能的值：

responseText 属性

可以取得有服务器返回的数据

其他的属性如下

xmlhttprequst的方法

open()方法

xmlHttp.open("GET","test.php",true);
第一个参数定义发送请求所使用的方法
第二个参数规定服务器脚本的URL
第三个参数规定了请求是否需要异步的处理

send()方法

send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：

xmlHttp.send(null);

其他方法如下

AJAX编程步骤

1.创建XMLHttpRequest对象
2.设置请求方式
3.调用回调函数
4.发送请求
5.处理返回的结果

创建XMLHttpRequest对象

    var xmlhttp=new XMLHttpRequest();

一般来说手写AJAX的时候，首先需要判断该浏览器是否支持XMLHttpRequest对象，如果支持则创建该对象，如果不支持则创建ActiveX对象。

    //第一步：创建XMLHttpRequest对象
    var xmlHttp;
    if (window.XMLHttpRequest) { //非IE
    xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) { //IE
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
    }

设置请求方式

一般是有两种请求方式，一个是GET一个是POST，需要设置具体使用哪个请求方式

xmlhttp.open("method",URL,async);

参数如下

调用回调函数

当前为异步请求的时候，需要写一个回调函数，XMLHttpRequest对象有一个属性，这个属性要返回一个匿名的方法，所谓的回调函数，就是请求在后台处理完，再返回到前台所实现的功能。

xmlhttp.onreadystatechange = function (ev2) {
                    /*
                    0: 请求未初始化
                    1: 服务器连接已建立
                    2: 请求已接收
                    3: 请求处理中
                    4: 请求已完成，且响应已就绪
                    */
                    if(xmlhttp.readyState === 4){
                        // 判断是否请求成功
                        if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                           xmlhttp.status === 304){
                            // 5.处理返回的结果
                            console.log("接收到服务器返回的数据");
                        }else{
                            console.log("没有接收到服务器返回的数据");
                        }

                    }
                }

发送请求

xmlhttp.send

##处理返回的结果

超融合服务器混合云 java的编程步骤简述申请云服务器的方法和步骤 cdn的原理和架构 ajax工作原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110315.html

Ajax的原理和实现步骤

摘要：如果我们假设文件和文件位于相同的目录，那么代码是这样的其他方法如下编程步骤创建对象设置请求方式调用回调函数发送请求处理返回的结果创建对象一般来说手写的时候，首先需要判断该浏览器是否支持对象，如果支持则创建该对象，如果不支持则创建对象。 Ajax的简介什么是Ajax AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）...

Harpsichord1207 2019-08-26 18:42 评论0 收藏0
JavaScript 工作原理之四－事件循环及异步编程的出现和 5 种更好的 async/await

摘要：函数会在之后的某个时刻触发事件定时器。事件循环中的这样一次遍历被称为一个。执行完毕并出栈。当定时器过期，宿主环境会把回调函数添加至事件循环队列中，然后，在未来的某个取出并执行该事件。原文请查阅这里，略有改动。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工作原理的第四章。现在，我们将会通过回顾单线程环境下编程的弊端及如何克服这些困难以创建令人惊叹...

maochunguang 2019-08-22 17:06 评论0 收藏0
JavaScript 工作原理之四－事件循环及异步编程的出现和 5 种更好的 async/await

摘要：函数会在之后的某个时刻触发事件定时器。事件循环中的这样一次遍历被称为一个。执行完毕并出栈。当定时器过期，宿主环境会把回调函数添加至事件循环队列中，然后，在未来的某个取出并执行该事件。原文请查阅这里，略有改动。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工作原理的第四章。现在，我们将会通过回顾单线程环境下编程的弊端及如何克服这些困难以创建令人惊叹...

浠ラ箍 2019-08-05 13:49 评论0 收藏0
JS基础——异步回调

摘要：回调大多出现在请求，用于处理收到的请求结果。回调函数和异步一开始我被回调和异步有点搞晕了。异步编程的实现就我目前知道两种回调函数和事件监听，其实看了阮神的异步编程的文章和下面的评论之后得出的理解。为了不影响的执行，我们可以把写成的回调函数。前言一个刚入前端的小菜，虽然以前看到过关于回调的文章，但是呢，理解起来有点费劲啊。当时的脑海里就一个概念。回调：大多出现在Ajax请求，用于处...

tianhang 2019-08-22 10:40 评论0 收藏0
JSONP原理及JQUERY JSONP的使用

摘要：同源策略在中有一个很重要的安全性限制，被称为同源策略。然而，当进行一些比较深入的前端编程的时候，不可避免地需要进行跨域操作，这时候同源策略就显得过于苛刻。 JSONP原理 JSON和JSONP 　　JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧，不是很清楚的朋友可以去json.org上了解下，简单易懂。　　...

suosuopuo 2019-08-23 10:29 评论0 收藏0