这次，我们聊聊ajax的创建过程

身为一枚前端，在项目中和后台的交互简直太频繁了。项目中，一直在使用的是jQuery中封装好了的$.ajax()的方法，这个方法大家一定非常熟悉了，具体使用的格式参数等这里不再赘述，今天要详细说的是ajax的创建过程。

ajax：一种客户端向服务器请求数据的方式，不需要去刷新整个页面； ajax的核心：XMLHttpRequest对象

下面是我简单封装的一个函数：

<script>
	ajax({
		url:'',    //请求地址
		type:"POST",     //请求方式
		data:{name:'linda',age:24},      //请求参数
		dataType:'json',
		success:function(reponse,xml){
			//此处放成功后执行的代码
		},
		fail:function(status){
			//此处放失败后执行的代码
		}
	});

	function ajax(options){
		//第一步，创建一个XHR对象，也即一个异步调用的对象
		function createXHR(){
			var xhr;
			//非IE6
			if(typeof XMLHttpRequest != 'undefined'){
				xhr = new XMLHttpRequest();
			}
			//IE6及以下版本浏览器
			else if(typeof ActiveXObject != 'undefined'){
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
			else{
				xhr = null;
			}
			return xhr;
		}

		var xhr = createXHR();

		//第三步，设置相应HTTP请求的状态变化函数
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){
				if(xhr.status>=200 && xhr.status<=300 || xhr.status == 304){
					options.success(xhr.responseText,responseXML);
				}
				else{
					options.fail(xhr.status);
				}
			}
		}

		//第二步，创建一个新的HTTP请求，并设置请求的方式、URL，是否异步。
		//第四步，发送HTTP请求
		if(options.type == 'GET'){
			xhr.open('GET',addURIParams(options.url,options.params),true);
			xhr.send(null);
		}
		else if(options.type == 'POST'){
			xhr.open('POST',url,true);
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xhr.send(options.params);
		}

		function addURIParams(url,data){
			for(var name in data){
				url += (url.indexOf('?') == -1 ? "?" : "&");
				url += encodeURIComponent(name)+ '=' + encodeURIComponent(data[name]);
			}
			return url;
		}
	}
</script>

1.创建

1.1、IE7及其以上版本中支持原生的 XHR 对象，因此可以直接用：

 var oAjax = new XMLHttpRequest();

1.2、IE6及其之前的版本中，XHR对象是通过MSXML库中的一个ActiveX对象实现的。有的书中细化了IE中此类对象的三种不同版本，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和 MSXML2.XMLHttp.6.0；个人感觉太麻烦，可以直接使用下面的语句创建：

 var oAjax=new ActiveXObject(’Microsoft.XMLHTTP’);

2.连接和发送

2.1、open()函数的三个参数：请求方式、请求地址、是否异步请求（同步请求的情况极少，至今还没用到过）；

2.2、GET 请求方式是通过URL参数将数据提交到服务器的，POST则是通过将数据作为 send 的参数提交到服务器；

2.3、POST 请求中，在发送数据之前，要设置表单提交的内容类型；具体来说是这样的：默认情况下，服务器对POST请求和提交WEB表单的请求并不会一视同仁。因此，服务器必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。不过，我们可以使用XHR来模仿WEB表单提交。首先将Content-Type头部信息设置成：application/x-www-form-urlencoded，也就是表单提交时的内容类型，其次是以适当的格式创建一个字符串，发送HTTP请求。

2.4、提交到服务器的参数必须经过 encodeURIComponent() 方法进行编码，实际上在参数列表”key=value”的形式中，key 和 value 都需要进行编码，因为会包含特殊字符。

encodeURI() ：用于整个 URI 的编码，不会对本身属于 URI 的特殊字符进行编码，如冒号、正斜杠、问号和井号；其对应的解码函数 decodeURI()； encodeURIComponent() ：用于对 URI 中的某一部分进行编码，会对它发现的任何非标准字符进行编码；其对应的解码函数 decodeURIComponent()；

3.接收

3.1、接收到响应后，响应的数据会自动填充XHR对象，相关属性如下 responseText：响应返回的主体内容，为字符串类型； responseXML：如果响应的内容类型是 “text/xml” 或 “application/xml”，这个属性中将保存着相应的xml 数据，是 XML 对应的 document 类型； status：响应的HTTP状态码； statusText：HTTP状态的说明；

3.2、XHR对象的readyState属性表示请求/响应过程的当前活动阶段，这个属性的值如下 0-未初始化，尚未调用open()方法； 1-启动，调用了open()方法，未调用send()方法； 2-发送，已经调用了send()方法，未接收到响应； 3-接收，已经接收到部分响应数据； 4-完成，已经接收到全部响应数据；

只要 readyState 的值变化，就会调用 readystatechange 事件，(其实为了逻辑上通顺，可以把readystatechange放到send之后，因为send时请求服务器，会进行网络通信，需要时间，在send之后指定readystatechange事件处理程序也是可以的，但为了规范和跨浏览器兼容性，还是在open之前进行指定吧)。

3.3、在readystatechange事件中，先判断响应是否接收完成，然后判断服务器是否成功处理请求，xhr.status 是状态码，状态码以2开头的都是成功，304表示从缓存中获取。

4.ajax请求是不能跨域的！

上述是我参考了《javascript高级程序设计》以及网上多方资料总结出来的，如果有错误，欢迎大家指正~~~