Ajax

Ajax基础
最详细的ajax资料
1. 创建对象实例并初始化对象

function createXMLHttpRequest() {
	var xmlhttp;
	if (window.XMLHttpRequest) {
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp = new XMLHttpRequest(); //支持所有现代浏览器
	} else {
	// IE6, IE5 浏览器执行代码
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //支持老版本的浏览器
	}
}

创建完XMLHttpRequest对象实例后，必须调用open()方法来初始化该对象。如
为了避免缓存，主要用下面那种方法

Var xmlHttpObject = createXMLHttpRequest();
xmlHttpObject.open("get","info.txt",true);
//在上面的例子中，您可能得到的是缓存的结果。
//为了避免这种情况，请向 URL 添加一个唯一的 ID：
xmlhttp.open("GET","/jquery/demo_test_get.php?t=" + Math.random(),true);
//如果您希望通过 GET 方法发送信息，请向 URL 添加信息,传进name=Henry&city=Ford的数据
xmlhttp.open("GET","/jquery/demo_test_get.php?name=Henry&city=Ford",true);

open()方法的3个参数：
◆request type：说明所发送的请求类型的字符串——通常是GET或POST。
◆URL：说明发送请求的目标URL的字符串。
◆async：布尔值，用来说明请求是否为异步模式。

2. 指定响应处理函数

var xmlHttpObject = createXMLHttpRequest();
xmlHttpObject.onreadystatechange = handleStateChange;

var xmlHttpObject = createXMLHttpRequest();
xmlHttpObject.onreadystatechange = function(){
	if(xmlHttpObject.readyState == 4){
		alert("Got response.");
	}
};

这里readyState共有5种可能的取值：
0（uninitialized，未初始化）：对象已经创建但还没有调用open()方法。
1（loading，载入中）：open()方法已经调用但请求还没有发送。
2（loaded，已载入）：请求已经发送。
3（interactive，交互中）：已经接收到部分响应。
4（complete，完成）：所有数据都已经收到，连接已经关闭。
在大部分情况下，当返回请求时只需检查值是否为4即可。

3. 发出HTTP请求
在指定响应处理函数之后，接下就是发送HTTP请求了。发送请求只需调用send()方法，该方法将完成请求的发送。

var xmlHttpObject = createXMLHttpRequest();
xmlHttpObject.onreadystatechange = function(){
	if(xmlHttpObject.readyState == 4){
		alert("Got response.");
	}
};
xmlHttpObject.send(null);

4. 处理服务器返回的信息

if(xmlHttp.readyState == 4) {
	if(xmlHttp.status == 200) {//相应正确==200
		alert("The server replied with: " + xmlHttp.responseText);
	}else{
		alert("An error occurred: " + xmlHttp.statusText);
	}
} 

完整例子

<script type="text/javascript">
	//第一步，创建创建对象实例并初始化对象
	var xmlHttpObject;
	function createXMLHttpRequest() {
		if (window.ActiveXObject) {
			xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP"); //支持老版本的浏览器
		} else if (window.XMLHttpRequest) {
			xmlHttpObject = new XMLHttpRequest(); //支持所有现代浏览器
		}
	}
	//2. 指定响应处理函数
	function startRequest() {
		createXMLHttpRequest();
		xmlHttpObject.onreadystatechange = handleStateChange;

		//在上面的例子中，您可能得到的是缓存的结果。
		//为了避免这种情况，请向 URL 添加一个唯一的 ID：
		xmlHttpObject.open("GET", "http://127.0.0.1:5500/a/inner.html?t=" + Math.random(), true);
		//xmlHttpObject.open("GET", "http://127.0.0.1:5500/a/aa.html", true); 
		//必须调用open()方法来初始化该对象
		//发送请求的域名要相同
		xmlHttpObject.send(null); //3. 发出HTTP请求
	}

	function handleStateChange() {
		if (xmlHttpObject.readyState == 4) {
			if (xmlHttpObject.status == 200) {//在这里200表示页面正常
				alert("服务器响应为:" + xmlHttpObject.responseText);
				//responseText：返回一个包含响应主体的字体串。
				//responseXML：返回一个XML文档对象，它仅当返回的内容类型为text/xml时才使用，并可以得用DOM来处理。
			} else {
				alert("An error occurred: " + xmlHttpObject.statusText);
				//服务器返回信息后判断HTTP状态码，status属性中包含了响应中的HTTP状态码，statusText则包含对该状态的文字描述
			}
		}
	}
</script>

Json文件的获取

alert("服务器响应为:" + xmlHttpObject.responseText);
//xmlHttpObject.responseText是得到里面的数据
//var aa = xmlHttpObject.responseText;
var obj = JSON.parse(xmlHttpObject.responseText); //将JSON字符串解析为原生的JS对象
//这样json的数据就已经添加到obj里面了。
var name = obj.name;
var sex = obj.sex;
var age = obj.age;
document.getElementById("aaa").innerHTML = "姓名" + name + "" + "" + sex + "" + age;
//responseText：返回一个包含响应主体的字体串。
//responseXML：返回一个XML文档对象，它仅当返回的内容类型为text/xml时才使用，并可以得用DOM来处理。

Ajax 异步编程
Ajax 封装

问题：发送一次请求代码过多，发送多次请求代码冗余且重复。
解决方案：将请求代码封装到函数中，发请求时调用函数即可。

ajax({ 
     type: 'get',
     url: 'http://www.example.com',
     success: function (data) { 
         console.log(data);
     }
 })