Ajax是什么呢，又要怎么用呢

先了解一下 Ajax 是什么

是 Asynchronous JavaScript XML 的缩写，译为异步 JavaScrip t和 XML .

Ajax 本身不是一个技术，而是用来描述一种使用现有技术集合的“新”方法

JSON 和 XML 都被用于在Ajax模型中封装数据

Ajax 涉及的技术

Ajax 只是为实现异步交互的手段，不是一种技术，而是多种技术的整合

• HTML 页面
• Cascading Style Sheets ( CSS )
• JavaScript 脚本语言
• Document Object Model (DOM)
• XML
• XMLHttpRequest 对象（是实现Ajax异步交互的核心）

Ajax 的工作原理

注意：Ajax异步交互的整体执行流程过程中，HTML页面是不被更新的。只是更新部分数据内容。

Ajax 的核心对象

是 XMLHttpReques 对象，该对象为客户端提供了在客户端在服务器之间传输数据的功能。

实现 Ajax 异步交互

实现 Ajax 的执行步骤

1. 创建 Ajax 核心对象 XMLHttpRequest 对象
2. 通过 XMLHttpRequest 对象的 open() 方法与服务器端建立连接
3. 构建请求所需的数据内容，井通过 XMLHttpReques t对象的 send() 方法发送给服务器端
4. 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端的通信状态
5. 接收并处理服务器端向客户端响应的数据结果
6. 将处理结果 更新到HTML页面中

创建 Ajax 的核心对象

不同的浏览器，创建的方式略不同

不需要记住，保存好文件，用时调用就好。

1. 匿名函数定义

   // 定义函数 - 用于创建XMLHTTPRequest对象
   (function () {
       //封装一个函数
       function createXMLHttpRequest() {
           var httpReqest;
           if (window.XMLHttpRequest) {  //适用于Chrome，FireFOX,Safari,...
               httpReqest = new XMLHttpRequest();
           } else if (window.ActiveXObject) {  //适用于IE浏览器
               try {
                   httpReqest = new ActiveXObject("Msxml2.XMLHTTP");  //IE 7+
               } catch (e) {
                   try {
                       httpReqest = new ActiveXObject("Microsoft.XMLHTTP");    // IE 6-
                   } catch (e) { }
               }
           }
           return httpReqest;
       }
       window.createXMLHttpRequest = createXMLHttpRequest;
   })();
   

2. 函数式定义

   function createXMLHttpRequest() {
       var httpRequest;
       if (window.XMLHttpRequest) {
           // 适用于非IE浏览器
           httpRequest = new XMLHttpRequest();
       } else if (window.ActiveXObject) {
           //   适用于IE浏览器
           try {
               // IE 7+
               httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
           } catch (e) {
               try {
                   //   IE 6-
                   httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
               } catch (e) {}
           }
       }
       return httpRequest;
   }
   

3. window 原型定义方法

   Object.defineProperty(window, "createXMLHttpRequest", function () {
       var httpRequest;
       if (window.XMLHttpRequest) {
           // 适用于非IE浏览器
           httpRequest = new XMLHttpRequest();
       } else if (window.ActiveXObject) {
           //   适用于IE浏览器
           try {
               // IE 7+
               httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
           } catch (e) {
               try {
                   //   IE 6-
                   httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
               } catch (e) {}
           }
       }
       return httpRequest;
   });
   

建立 Ajax 异步请求连接

通过 Ajax 异步请求数据

通过 send() 方法实现

语法结构：

httpRequest.send(data);
//data - 表要向服务器端发送的请求数据内容

请求异步模式（默认），该方法会立刻返回。相反，如果是同步模式，啧只有等到请求响应完全接受后，该方法才会返回。

请求方式：

• 如果当前的请求方式为GET的话 - send()方法中只能传递null的值
• 将请求数据添加到请求地址链接中

监听服务器端通信状态

处理服务器端响应数据

GET 与 POST 请求方式

GET请求方式

1. 将构间的请求数据添加到 open() 方法中的url地址

   httpRequest.open('GET','',true);
   //” name=wq&password=12345 “ 表示请求数据
   

2. 将发送请求数据的 send() 方法中参数设置为 null 值

   httpRequest.send(null);
   

POST请求方式

1. 调用 send() 方法之前，需要通过 XMLHttpRequest 对象的 setRequestHeader() 方法设置请求头信息。

   httpRequest.setRequestHeader(header,value);
   //	header：将要被赋值的请求头名称
   //	value：给指定的请求头赋的值
   

   httpRequest.setRequestHeafer('Content-Type','application/x-www-form-urlencoded');
   

2. 通过 XMLHttpRequest 对象的 send() 发送请求数据