Ajax的原理

漩涡鸣人0623
621 阅读3分钟

       Ajax全称为：Asynchronous JavaScript + XML

       Ajax技术的核心是XMLHttpRequest对象（简称XHR），XHR为向服务器发送请求和解析服务器相应提供了流畅的接口，能以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新的数据，也就是说，可以使用XHR对象取得新数据，然后再通过DOM将新数据插入到页面中。另外，虽然名字中包含了XML的成分，但Ajax同学与数据格式无关，这种技术就是无需刷新页面即可从服务器取得数据，但也不一定是XML数据

Ajax是由下列几种技术组合而成：

1、运用HTML和CSS来实现页面，表达信息

2、使用XMLHttpRequest和Web服务器进行数据的异步通信

3、运用JavaScript操作DOM实现动态局部刷新

Ajax的原理

简单来说就是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据

XMLHttpRequest对象

XmlHttpRequest是ajax的核心机制，IE5是第一款引入XHR对象的浏览器，在IE5中，XHR对象是通过MSXHML库中的一个ActiveX对象实现的

创建一个XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

对象属性：

（1）onreadystatechange          每次状态改变所触发事件的事件处理程序。

（2）responseText                      从服务器进程返回数据的字符串形式。

（3）responseXML                     从服务器进程返回的DOM兼容的文档数据对象。

（4）status                                  从服务器返回的数字代码，比如常见的404和200

（5）status Text                          伴随状态码的字符串信息

（6）getAllResponseHeader()    获取所有的相应报头

（7）getResponseHeader()        查询响应中的某个字段的值

（8）readyState                           对象状态值

         0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

         1 (初始化) 对象已建立，尚未调用send方法

         2 (发送数据) send方法已调用，但是当前的状态及http头未知

         3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和                  responseText获取部分数据会出现错误，

          4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据


工作流程

1、向服务器发送请求

xhr.open("GET",url,true);
xhr.send();

open( method, url, async ) 函数支持三个参数

method：   请求方式，GET或POST

url：            请求的url

async：       true（异步）/false（同步），默认值为true

send( string ) 函数的参数只有请求方式为post时用到，即我们的请求参数

2、监听请求状态并处理返回值

xhr.onreadystatechange = function (){
  if(xhr.readyState == "4" && xhr.status == "200") {
    //请求成功
    var data = xhr.responseText;
  }else {
    //异常捕获
    console.log(xhr.status);
  }
}

以上即为ajax的原理及原生基础实现


avatar
文章
阅读
粉丝