Ajax异步交互核心原理与四步实现详解

Ajax异步交互概述

提起异步数据交互，许多人首先想到的便是Ajax，它几乎已成为这一技术的代名词。接下来，我们将深入探讨实现Ajax交互的核心对象及其工作原理。

Ajax核心实现四步法

使用Ajax完成异步交互主要包含四个关键步骤：

1. 第一步，创建Ajax的核心对象。
2. 第二步，与服务器建立连接。
3. 第三步，向服务器发送请求。
4. 第四步，接收并处理服务器返回的响应数据。

尽管异步交互看似复杂，但一旦理清上述四个步骤，整体思路便清晰可见。

核心对象创建与兼容性处理

首先进行核心对象的创建。由于不同浏览器对Ajax的支持存在差异，必须解决兼容性问题，因为后续所有交互步骤都依赖于核心对象是否成功创建。

 function getXhr(){
      // 声明XMLHttpRequest对象
      var xhr = null;
      // 根据浏览器的不同情况进行创建
       if(window.XMLHttpRequest){
      // 表示除IE外的其他浏览器
           xhr = new XMLHttpRequest();
       }else{
         // 表示IE浏览器
         xhr = new ActiveXObject('Microsoft.XMLHttp');
       }
       return xhr;
 }
 // 创建核心对象
 var xhr = getXhr();    

通过上述代码，我们成功创建了Ajax核心对象并将其赋值给变量xhr。在后续描述中，我们将统一使用xhr来指代该核心对象。

建立连接与请求发送

第二步是与服务器建立连接，这需要调用Ajax核心对象的open方法，语法为open(method, url, async)。

open方法的参数含义如下：

method参数指定请求方式，通常为GET或POST。

url参数指定请求的PHP地址。需要注意的是，当使用GET请求时，数据会以查询字符串形式附加在URL之后，此时send方法将传入null值。

async参数为布尔值，表示是否启用异步模式，默认值为true。根据最新规范，由于Ajax旨在实现异步交互，该参数已不再强制要求填写。

xhr.open("get","01.php?user=xianfeng");//这是get方式请求数据
xhr.open("post","01.php");//这是以post方式请求数据

第三步是向服务器发送请求，通过调用Ajax核心对象的send方法完成。

若采用POST方式，需将name=value形式的数据作为参数传入send方法；若为GET方式，则直接传入null值。

xhr.send("user=xianfeng");//这是以post方式发送请求数据
xhr.send(null);//这是以get方式

接收服务器响应数据

第四步是接收服务器响应。通过监听onreadystatechange事件来监控通信状态，利用readyState属性获取当前通信状态，通过status属性获取HTTP状态码，并使用responseText属性接收服务器返回的文本格式数据。后续章节将涉及XML格式及JSON格式数据的处理。

xhr.onreadystatechange = function(){
   　　　　　　　　　　　　　　　// 保证服务器端响应的数据发送完毕,保证这次请求必须是成功的
             　　　if(xhr.readyState == 4&&xhr.status == 200){
          　　　　　　// 接收服务器端的数据
          　　　　　　var data = xhr.responseText;
          　　　　　　 // 测试
          　　　　　　 console.log(data);
              　　 } 
             };