AJAX的原理和实现步骤

一、Ajax是什么?

• Ajax = 异步 JavaScript 和 XML 或者是 HTML
• Ajax 是一种用于创建快速动态网页的技术。
• Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页更新部分网页的技术。

Ajax使用的场景：网页的消息角标变化、搜索引擎的输入提示、注册时输入格式错误提示
（注意：Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。）

二、Ajax工作原理

三、Ajax的使用及实现步骤

(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3) 设置响应HTTP请求状态变化的函数.
(4) 发送HTTP请求.
(5) 获取异步调用返回的数据.
(6) 使用JavaScript和DOM实现局部刷新.

1.创建Ajax核心对象XMLHttpRequest

var xmlHttp;
if(window.XMLHttpRequest){  //针对除IE6以外的浏览器
    xmlHttp=new XMLHttpRequest(); //实例化一个XMLHttpRequest
}else{
   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");   //针对IE5,IE6
}

2.向服务器发送请求

xmlhttp.open(method,url,async);
xmlhttp.send();

示例如下：

var xmlHttp = new XMLHttpRequest();
   xmlHttp.open('get','demo_get.html','true');//调用open()方法并采用异步方式
   xmlHttp.send(); //使用send()方法将请求发送出去
   xmlHttp.onreadystatechange()=function(){	//与readyState属性区分，注意大小写
   		//由于异步会继续执行下面代码，即异步不需要把这个函数声明在前面，每次对象改变都会触发该函数
        if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
			
        }
}

onreadystatechange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果，每当XHR对象的readyState发生变化时都会触发该函数。

四、详解区分请求类型:GET 或 POST

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。   ▪ method:请求的类型:GET 或 POST；  ▪ url：文件在服务器上的位置,相对位置或绝对位置；   ▪ async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。string：仅用于 POST 请求

使用GET 还是 POST？
在以下情况中，请使用 POST 请求：

1. 使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

• GET请求

xmlHttp.open("GET","demo_get.html",true); 
xmlHttp.send();

在上面的例子中，get请求会被浏览器缓存下来，当你访问相同的URL时，这个URL就不会重新传给服务器，您可能得到的是缓存的结果,为了避免这种情况，请向 URL 添加一个唯一的 ID

xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true); 
xmlhttp.send();

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true); 
xmlhttp.send();

提示：GET请求的特点如下：
· GET 请求可被缓存
· GET 请求保留在浏览器历史记录中
· GET 请求可被收藏为书签
· GET 请求不应在处理敏感数据时使用
· GET 请求有长度限制
· GET 请求只应当用于取回数据

• POST 请求

xmlhttp.open("POST","demo_post.html",true); 
xmlhttp.send();

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

xmlhttp.open("POST","ajax_test.html",true); 
//和form表单默认的Content-type一样
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xmlhttp.send("fname=Henry&lname=Ford");

方法	描述
setRequestHeader(header,value)	向请求添加 HTTP头    ▪ header: 规定头的名称;     ▪ value: 规定头的值

提示：POST请求的特点如下：
· POST 请求不会被缓存
· POST 请求不会保留在浏览器历史记录中
· POST 请求不能被收藏为书签
· POST 请求对数据长度没有要求

为什么使用 Async=true ？

  我们的实例在 open() 的第三个参数中使用了 “true”。该参数规定请求是否异步处理。True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。
  onreadystatechange事件使代码复杂化了。但是这是在没有得到服务器响应的情况下，防止代码停止的最安全的方法。
  通过把该参数设置为 “false”，可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要，那么可以使用这个参数。

五、Ajax的结果处理及XHR重要属性

1、获取服务器响应

XHR的重要属性之一
responseText 获得字符串形式的响应数据。
responseXML 获得XML 形式的响应数据。

2、同步处理

xmlHttp.open("GET","demo_get.html",false);
xmlHttp.send();
document.getElementById("target").innerHTML=xmlHttp.responseText;  //改变页面的部分信息

3、异步处理

异步处理相对比较麻烦，要在请求状态改变事件中处理。

xmlHttp.onreadystatechange=function(){  //接收到服务端响应时触发
if(xmlHttp.readyState==4&&xmlHttp.status==200){
document.getElementById("target").innerHTML=xmlHttp.responseText;
      }

}

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的运行状态，从 0 到 4 发生变化。  ▪ 0: 请求未初始化；  ▪ 1: 请求已初始化；     ▪ 2: 请求发送完成；    ▪ 3: 对象开始读取服务器的响应；     ▪ 4: 读取完毕
status	服务器响应状态码 ▪ 200: “OK” ； ▪ 404: 未找到页面

在 onreadystatechange事件中，我们规定当服务器响应正确且该对象读取响应完毕
即当 readyState 等于 4 且status为 200 时，才进行异步处理

readyState属性分析（可通过事件中添加alert(XHR.readyState)；观察属性变化）：
0：未初始化，对象已经创建，但未初始化还未调用open方法
1：对象已初始化，但还未调用send方法
2：已调用send方法，该对象正在等待状态码和头的返回
3：正在接收，已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整
4：已加载，所有数据接收完毕

status属性：响应状态码，比较常见的还有：
· 200: “OK”
· 304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意，可以在使用GET请求时添加一个status==304）。
· 403 （禁止） 服务器拒绝请求。
· 404 （未找到） 服务器找不到请求的网页。
· 408 （请求超时） 服务器等候请求时发生超时。
· 500 （服务器内部错误） 服务器遇到错误，无法完成请求。