原生Ajax技术讲解

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），不是一门新的编程语言，而是一种创建交互式网页应用的网页开发技术。是一种无需重新加载整个网页的情况下能够更新部分网页的技术，类似于我们在百度搜索栏输入数据的时候，每输入文字下面出现不同的内容。

传统的网页(没有使用Ajax），如果想要提交一个表单需要加载整个网页。使用Ajax的网页只需要通过少量的数据在后台进行交换，就能实现异步刷新。
实现Ajax请求需要一下几个步骤

1. 创建XMLHttpRequest核心对象
2. 准备请求/打开请求–> xhr.open(参数1,参数2,参数3);
3. 发送请求–> xhr.send(参数1);
4. 处理服务器返回内容

XMLHttpRequest对象

Firefox、IE7+、Opera、Chrome都支持原生的XHR对象，在这些浏览器中创建 XHR对象可以直接实例化XMLHttpRequest。

var xhr = new XMLHttpRequest();
console.log(xhr);

较老的IE版本创建 Microsoft.XMLHTTP 对象

var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 

打开请求

在使用XHR对象时，先必须调用open()方法，此方法需要接受三个参数：请求类型（get,post）、请求的url和表示是否异步（true/false）。open()方法并不会真正发送请求，而只是启动一个请求 以备发送。

get/post

get请求：需要在url的后面通过？添加请求的内容。
post请求：一般来说，向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。因为 post请求和 Web表单提交是不同的，需要使用XHR来模仿表单提交。 xhr.setRequestHeader('Content-Type','application/x-www-form-urle ncoded'); 从性能上来讲post请求比get请求消耗更多一些，用相同数据比较，get 最多比post快两倍.

处理服务器返回内容

通过 send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如果请求类型是get或者是post但是没有数据必须填null。执行send()方法之后，请求就会发送到服务器上。当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR对象的属性。那么一共 有四个属性

属性名	说明
responseText	作为响应主体被返回的文本
responseXML	如 果 响 应 主 体 内 容 类 型 是 “text/xml” 或 “application/xml”，则返回包含响应数据的XML DOM文 档
status	响应的HTTP状态
statusText	HTTP状态的说明

处理服务器返回内容

在我们处理服务器返回的内容，接受响应之后，第一步检查 status 属性，以确定响应已经成功返回。一般情况 HTTP 状态 代码为200作为成功的标志。除了成功的状态代码，还有一些别的。
先给大家分享一下常见的几种响应状态。

响应状态

HTTP状态码	说明
200	服务器成功返回了页面
404	指定的URL在服务器上找不到
500	服务器遇到意外错误，无法完成请求

在同步的情况下，一下内容基本上可以结束处理

 if(xhr.status == 200) {  
    alert(xhr.responseText);  
  } else {  
  alert("请求失败！状态码为：" + xhr.status + "，状态信息：" + xhr.statusText);  
  }

同步调用固然简单，但使用异步调用才是我们真正常用的手段（也就是open()第三个参数为false时）。使用异步调用的时候，检 测 readyState 属性,每当 readyState 属性改变时，触发 readystatechange 事件

state的五种状态码

值	说明
0	尚未调用open()方法
1	已经调用open()方法，但尚未调用 send()方法
2	已经调用 send()方法，但尚未接受响应
3	已经接受到部分响应数据
4	已经接受到全部响应数据，而且可以使用

onreadystatechange用来监听state是否发生改变，如果state的状态发生改变并且状态码是4。说明已经接受到全部响应数据，而且可以使用。然后判断status是否服务器成功返回了页面。如果为400则处理服务器所返回的内容。
异步情况下

xhr.onreadystatechange=function(){
  if(xhr.ready.State==4){
    if(xhr.status == 200) {  
      alert(xhr.responseText);  
    } else {  
    alert("请求失败！状态码为：" + xhr.status + "，状态信息：" + xhr.statusText);  
    }
  }
}

Ajax异步请求完整代码如下

	<script type="text/javascript">
		// 1、创建XMLHttpRequest核心对象
		var xhr = new XMLHttpRequest();
		console.log(xhr);
		// 监听readyState的值变化
		console.log("创建XMLHttpRequest核心对象....");
		//console.log("ReadyState：" +xhr.readyState);
		
		// 2、准备请求/打开请求  xhr.open(参数1,参数2,参数3);
		xhr.open("POST","js/data.json",true); // 异步请求
		console.log("准备请求/打开请求....");
		//console.log("ReadyState：" +xhr.readyState);
		
		// 3、发送请求 xhr.send(参数1);
		xhr.send(null);
		console.log("发送请求....");
		//console.log("ReadyState：" +xhr.readyState);
		
		// 当readystate的值发生改变，则触发该事件
		xhr.onreadystatechange = function(){
			console.log("====readyState："+xhr.readyState);
			// 判断数据是否完全响应
			if (xhr.readyState == 4) {
				// 4、判断响应状态是否成功
				if (xhr.status == 200) {
					// 如果status==200，表示响应成功，得到响应结果
					console.log(xhr.responseText);
				} else {
					console.log("状态码：" + xhr.status + "，错误原因：" + xhr.responseText);
				}
			}
		}
	</script>