Ajax介绍

Ajax于2005年第一次被提出，他的意思可能是”异步Javascript和XML”。Ajax的基础是：用户在浏览器中动作时，(通过单击一个连接，使用表单等)触发事件。这些触发事件可以由JavaScript异步处理，也就是说，JavaScript可以在后台进行处理，而不强制用户等待事件的响应。JavaScript在ajax中的任务是对服务器端资源发出请求。在ajax这个术语刚刚定义时，请求结果使用XML(可扩展标记语言)格式返回给JavaScript

理解Ajax

从实际JavaScript代码的方面来说，ajax的请求的执行从下面三个步骤开始：

  • 创建一个ajax对象
  • 发出请求
  • 处理服务器相应

创建一个Ajax对象

Ajax处理从一个对象开始，通过该对象进行通信。我们将这个对象称为”Ajax”对象，有些地方称其为”XHR”(XML HTTP REQUEST)对象，XHR是 XML HTTP请求，在Ajax中使用JavaScript和超文本传输协议(HTTP)发起对资源的请求。之前也介绍过，最初返回数据采用XML格式，但现在已经不常用，更常用的是json

XMLHTTPRequest对象存在于所有非IE浏览器和IE7之后的版本，更老的IE版本需要创建ActiveXObject，以MSXML2.XMLHTTP3.0作为参数，我们可以将对象创建放到函数中

function getXMLHTTPRequestObject () {
	var ajax=null;
	if(window.XMLHTTPRequest){
		ajax=new XMLHTTPRequest();
	}else if(window.ActiveXobject){ //older IE
		ajax= new ActiveXObject('MSXML2.XMLHTTP3.0');
	}
	return ajax;
}

指定结果处理器

结果处理器是在Ajax事务相应期间调用的函数，为了将该函数与Ajax调用关联，将函数赋予对象的onreadystatechange属性 

ajax.onreadystatechange = handleStateChange;

发出请求

发出Ajax请求时，首先调用对象的open()方法，以请求类型作为第一个参数，服务器资源的URL作为第二个参数，true作为第三个参数，比如

ajax.open('GET','http://www.example.com/a.php',true);

最常用的请求类型是GET和POST，两者异同点如下：

  • GET请求是请求任何HTML页面的标准方法，POST请求是表单提交的标准方法
  • GET请求用于常见而可重复的请求，比如计入书签，POST请求用于不考虑重复的独特请求，比如更新数据库记录
  • GET请求发送数据是带在url后面，用户可见，传输数据量有限制，根据浏览器，大约为2~4KB；POST请求使用send()发送数据，适合大数据量

open()方法的第二个URL参数可以绝对或者相对路径，当中涉及到两个问题，一个是同源策略和js跨域同源策略,第二个问题是Ajax请求必须通过服务器发起才能正常工作，不能本地测试。

open()方法的第三个参数表示请求采用异步还是同步方式，默认值为true–异步方式。异步请求期间，可以执行其他JavaScript代码，同时JavaScript等待服务器响应。如果创建的是一个同步请求，就不需要创建函数来处理readyState的变化

open()方法的第4个和第5个参数是可选的，分别代表用户名和密码。如果资源受到HTTP验证的保护，这两个参数就是必须的

发送数据

  1. 将数据作为请求的一部分发送给服务器有两种方法，第一种选择是将数据附加到URL后，数据的结构应该是”名称=值”配对，多个配对之间用&符号分隔。为了保证请求使用的数据安全，将其封装在encodeURIComponent()调用之中:
ajax.open('GET','http://www.example.com/a.php?id='+encodeURIComponent(id),true);

稍微好一点的备选方案是将数据作为send()的唯一参数：

var data = 'email='+encodeURIComponent(email)+'&password='+encodeURIComponent(password);
ajax.open('GET','http://www.example.com/a.php',true);
ajax.send(data);
  1. 使用POST请求时，必须为send()提供数据，而不是将其附到URL之后。而且，使用POST时为了增加可靠性，应该向服务器指明发送的内容类别。可以调用setRequestHeader()方法，第一个参数时首标的名称，第二个参数时首标的取值。使用如下：
var data = 'email='+encodeURIComponent(email)+'&password='+encodeURIComponent(password);
ajax.open('POST','http://www.example.com/a.php',true);
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(data);

还有一种方案，使用FormData()对象，这种方法并未得到所有浏览器的支持，要使用前要测试一下可用性。使用如下：

var data = new FormData();
data.append('email',email);
data.append('password',password);
ajax.open('POST','http://www.example.com/a.php',true);
ajax.send(data);

注意：使用这种方法时，数据自动编码，不需要调用encodeURIComponent(),也不需要设置Content-Type

处理服务器请求

readyState属性有5个值，你可以检查readyState属性并相应作出反应，其按照执行的顺序排列：

  • 0：未发送
    1. 打开
    1. 接收到首标
    1. 加载中
    1. 完成

当readyState等于4时，ajax请求已经完成，检查对象的status属性可以完成确认工作，该属性代表服务器对资源请求的相应代码。这些服务器代码包括：

  • 200： 正常
  • 301： 永久性移动
  • 304： 未作修改
  • 307： 临时重定向
  • 401： 未授权
  • 403： 禁止访问
  • 404： 未找到
  • 500： 服务器内部错误

其实不需要记住或者处理所有的可能性。当状态码为200时，说明资源以及找到并且可以加载。如果状态码为304，说明浏览器有一个可用的缓存版本。其他代码说明出现了问题 

if(ajax.readyState == 4){
	if((ajax.status >= 200&&ajax.status < 300)||ajax.status == 304){
		//handle the response
	}
}else{
	//status error!
}

statusText属性代表服务器服务器返回的对应状态码的字符串信息，可以用于任何错误报告当中。

当函数做好准备处理服务器相应时，它可以从下面两个属性之一找到相应数据：responseXML和responseText。前者用在返回数据为XML格式时，后者在返回数据不是XML格式时填充，因此大部分时候都使用这个属性。该属性存储一个字符串，使用方法与其他字符串相同。

释放对象

使用完毕之后(脚本不再使用它)，应该赋null值将其清除：

ajax=null;