ajax的实现原理与相关设置

AJAX

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

ajax原理

Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpReq密码 uest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

XMLHttpRequest      

创建 XMLHttpRequest 对象

不同的浏览器创建xmlHttpRequest的方法不一样。

1：非IE浏览器：

      var xhr = new XMLHttpRequest();

2：IE浏览器

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

重要属性：

• responseType

只读属性，返回接收到的数据主体，类型可是ArrayBuffer、Blob、Documnet(HTML文本或片段、XML)、JSON(JS对象)、text(字符串)，由responseType决定。请求失败或者数据不完整，该属性只为null。

 

重要方法

request.open() 并没有发送请求，只是设置一些参数，在 send() 时才会发送（注意不要漏写这条语句），发送后就会进入 readyState 监听状态，当 readyState 的值有改变就会执行 onreadystatechange 回调函数，当异步请求的数据接收完成（即 readyState 变为 4）后就会执行 onload 回调函数（注意仅在 XHR2 中有效）

ajax请求的实现：

分为五个步骤：

1:创建xmlHttpRequest对象

1. 设置回调函数

xmlHttp.onreadystatechange= callback；

 function callback(){}

3:使用open方法建立与服务器的连接

4:使用send方法发送请求

5:在回调函数中针对不同的响应状态进行处理

 

ajax请求的JQuery实现

简单的ajax请求如图：

ajax优点：

1. 运行在客户端，减轻了服务器端的负担，减少大用户下的服
   务器负载
2. 支持异步加载，提升用户体验感
3. 可以实现局部刷新（重点）
4. 减少数据的往返，节省带宽

$.ajaxSetup()全局设置

$.ajaxSetup()函数用于设置AJAX的全局默认设置。一般把ajax请求的公共部分放在$.ajaxSetup进行设置。这边就是设置了一个ajax请求异常的默认处理函数。

error: function(jqXHR, textStatus, errorMsg){ // 出错时默认的处理函数

        // jqXHR对象，该对象是一个超集，就是该对象不仅包括XMLHttpRequest对象，还包含其他更多的详细属性和信息。

这里主要有4个属性：

• readyState :当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
• status  ：返回的HTTP状态码，比如常见的404,500等错误代码。
• statusText ：对应状态码的错误信息，比如404错误信息是not found,500是Internal Server Error。
• responseText ：服务器响应返回的文本信息

 

        // textStatus 可能为： null、"timeout"、"error"、"abort"或"parsererror"

        // errorMsg 可能为： "Not Found"、"Internal Server Error"等     

    }

} );

应用

$(function(){ })； 这是jquery里的立即执行函数,是当文档载入完毕就执行。