AJAX 简史

AJAX的定义

• AJAX的全称就是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
• AJAX就是与服务器进行数据通信并且在不刷新网页的前提下更新渲染数据，这就是异步体现

AJAX使用的技术

• 使用CSS和HTML所表示（毕竟是展示在网页端）
• 使用DOM模型进行数据交互和展示
• 使用XMLHttpRequest来和服务器进行异步通信
• 使用JavaScript实现方法的绑定以及实现

1. AJAX 的核心是 XMLHttpRequest 对象。

2. 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。

IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象

AJAX工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

AJAX技术实现

XMLHttpRequest的常用属性（具体就参考红宝书把）

1. onreadystatechange 属性
   onreadystatechange属性也就是一个事件响应了，从字面上也可以看出，是处理服务器相应的事件，所以里面存有处理服务器响应的函数。

xmlHttp.onreadystatechange = function() {
    //我们需要在这写一些代码
}

2. readyState 属性
   readyState存有服务器的响应状态，每当readyState发生改变的时候，onreadystatechange函数就会被执行，状态码以及描述如下：

0 请求未初始化（在调用 open() 之前）
1 请求已提出（调用 send() 之前）
2 请求已发送（这里通常可以从响应得到内容头部）
3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4 请求已完成（可以访问服务器响应并使用它）

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        //从服务器的response获得数据,具体操作在这里
    }
}

3. responseText 属性
   可以通过 responseText 属性来取回由服务器返回的数据。
   在我们的代码中，我们将把时间文本框的值设置为等于 responseText：

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        document.myForm.time.value = xmlHttp.responseText;
    }
}

其他属性及描述见下表

XMLHttpRequest的常用方法

1. open()方法
   open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。
   xmlHttp.open("GET","test.php",true);
   这里【true】表示需要进行异步处理
2. send()方法
   send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：
   xmlHttp.send(null);
   也就是说，open()方法是对服务端，而send()是对客户端。其他方法如下图
   

编写AJAX代码

大体的步骤就是以下四点，万变不离其宗，只是内部的逻辑会根据业务需求而变化

1. 创建XMLHttpRequest对象。
2. 设置请求方式。
3. 调用回调函数。
4. 发送请求。

• 创建对象
  var xmlHttp=new XMLHttpRequest();
  但是如果是IE5或者IE6浏览器，则使用ActiveX对象，创建方法是：
  var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  所以最后也是最好的写法就是：

var xmlHttp;
if (window.XMLHttpRequest) {            //非IE
    xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {       //IE
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}

• 设置请求方式
  如何设置请求方式呢？open()就可以用来设置请求方式。
  xmlHttp.open("POST", url, true);
• 调用回调函数
  如果在上一步中open方法的第三个参数选择的是true，那么当前就是异步请求，这个时候需要写一个回调函数，XMLHttpRequest对象有一个onreadystatechange属性，这个属性返回的是一个匿名的方法，所以回调函数就在这里写xmlHttp.onreadystatechange=function{},function{}内部就是回调函数的内容。所谓回调函数，就是请求在后台处理完，再返回到前台所实现的功能。在这个例子里，我们的回调函数要实现的功能就是接收后台处理后反馈给前台的数据，然后将这个数据显示到指定的div上。因为从后台返回的数据可能是错误的，所以在回调函数中首先要判断后台返回的信息是否正确，如果正确才可以继续执行。代码如下：

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            var obj = document.getElementById(id);
            obj.innerHTML = xmlHttp.responseText;
        } else {
            alert("AJAX服务器返回错误！");
        }
    }
}

xmlHttp.readyState是存有XMLHttpRequest 的状态,xmlHttp.status是服务器返回的结果
AJAX状态值与状态码区别

1. AJAX状态值是指，运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤。如：正在发送，正在响应等，由AJAX对象与服务器交互时所得；使用“ajax.readyState”获得。（由数字1~4单位数字组成）
2. AJAX状态码是指，无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；（由数字1XX,2XX三位数字组成，详细查看RFC）
   这就是我们在使用AJAX时为什么采用下面的方式判断所获得的信息是否正确的原因。

• 发送请求

var params = "userName=" + document.getElementsByName("userName")[0].value + "&userPass=" + document.getElementsByName("userPass")[0].value + "&time=" + Math.random();         // 增加time随机参数，防止读取缓存 				
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");                     // 向请求添加 HTTP 头，POST如果有数据一定加加！！！！
xmlHttp.send(params);

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。