ajax 同步与异步原理剖析

一、简介

JS/AJAX算是比较老的技术了，工作中也经常用到，但是一直注意总结。
今天正好有时间系统复习一遍，顺便也做个总结。

二、ajax是什么？

ajax 是 asynchronous javascript and xml （异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
ajax可以使用JS异步访问服务器。
（1）同步
发送一个请求就需要等待服务器的响应结束，然后才能发送第二个请求。中间这段时间不能做任何事情，只能 等待，并且刷新的是整个页面。
（2）异步
发送一个请求，无需等待服务器的响应，并且可以再次发送第二个请求。
可以使用JS接收服务器的响应，然后使用JS实现局部刷新。


ajax优缺点：
优点：异步交互增强用户体验，局部刷新减轻了服务器的压力。
缺点：不能适用于所有应用场景，访问次数增加的同时也增加了服务器的压力。

三、ajax发送异步请求（四步操作）

1、第一步（得到XMLHttpRequest）
a）、得到XMLHttpRequest
大多数浏览器支持： var xmlHttp = new XMLHttpRequest()
少部分不支持的有：IE6.0 极其更早的版本。
b）、编写创建XMLHttpRequest 的函数

function createXMLHttpRequest(){
		try{
		   return new XMLHttpRequest();
		  }catch(e){
		    try{
		    	return new ActiveXObject("Msxml2.XMLHTTP");
		    }catch(e){
		    	try{
		    	    return new ActiveXObject("microsoft.XMLHTTP");
		    	}catch(e){
		    		alert("无法识别浏览器，请使用主流浏览器");
		    		throw e;
		    	}
		    }
		}
}

2、第二步 （打开与服务器的连接）
xmlHttp.open()：可以打开与服务器之间的连接，但是它需要以下三个参数。
a）、请求方式：可以使用get或者post请求。
b）、请求URL：链接路径。
c）、请求是否为异步：true表示发送的是异步请求，否则为同步请求。
例如：

	xmlHttp.open("post","www.baidu.com",true);

3、第三步（发送请求）
xmlHttp.send(null); 如果不给出参数会造成部分浏览器无法发送。
a）、参数：请求体内容，如果是GET请求必须给出null。

4、第四步（获取服务器返回数据）
在xmlHttp对象的一个事件上注册监听器：onreadystatuschange。
xmlHttp一共有五种状态：
a）、状态 0 表示：刚创建，还没有调用open方法；
b）、状态 1 表示：请求开始，调用了open方法，但是还没有调用send方法；
c）、状态 2 表示：调用完send方法；
d）、状态 3 表示：服务器接收请求，并且开始响应，但是响应并未结束；
e）、状态 4 表示：服务器响应结束；（成功的状态，也是开发最关心的状态）。

得到xmlHttp对象的状态：

   var state = xmlHttp.readystate; //得到的状态可能是0、1、2、3、4	

得到服务器响应状态码：

  var status = xmlHttp.status;  // 常见状态码有 200、404、500

得到服务器响应内容：

   var content = xmlHttp.responesText;  //得到服务器响应的文本格式内容
   var xontent = xmlHttp.responesXML;   //得到服务器响应的XML格式的内容，document对象。

完整代码如下所示：

 xmlHttp.onreadystatechange = function(){
	 var state = xmlHttp.readystate;
  	 var status = xmlHttp.status;
  	 if(state == 4 && status == 200){
  	 	//获取服务器的响应内容
  	 	var text = xmlHttp.responseText;
  	 }
 }