原生Ajax 异步请求

使用XMLHttpRequest对象实现异步请求一般需要以下几个步骤

1. 定义XMLHttpRequest对象
2. 注册onreadystatechange时间处理函数,准备接收响应数据,并进行处理
3. 调用XMLHttpRequest对象的open()方法打开服务端URL地址
4. 调用XMLHttpRequest对象的send()方法发送请求

1.定义XMLHttpRequest对象

var ajax;
	if(window.XMLHttpRequest){			//firefox 
           ajax=new XMLHttpRequest(); 
    }else if(window.ActiveXObiect){		//IE 
           ajax=new ActiveXObject("Msxml2.XMLHTTP"); 
    } 

2.注册onreadystatechange时间处理函数,准备接收响应数据,并进行处理

	// 可以在这里进行返回数据的请求
	ajax.onreadystatechange = function() {
		if(ajax.readyState == 4 && ajax.status == 200) {
				// 可以通过通过ajax.responseText和ajax.responseXML来获取返回的数据
				var info = ajax.responseText;
				alert(info);
		}
	}

3.调用XMLHttpRequest对象的open()方法打开服务端URL地址

XMLHttpRequest.open(method, url, async, user, password);
五个参数只有前面两个参数是必须的
method:HTTP方法字符串，如post、get等 大小写不敏感
url:请求URL的地址字符串
async:布尔值，指定是否为异步请求方式。默认为true表示异步请求
user:如果服务器需要验证，该参数指定用户名
password：如果服务器需要验证，该参数指定密码

ajax.open("get", "user?id=1",true);

4.调用XMLHttpRequest对象的send()方法发送请求

  ajax.send(null); 

5.ajax的readyState属性和状态码

6.对 onreadystatechange 属性的理解

http://www.runoob.com/w3cnote/onreadystatechange-attribute-learn.html

我的理解是每当readystate参数改变是，就回去去调用onreadystatechange 处理函数。

7.获取数据

7.1 获取XML数据

ajax.onreadystatechange = function() {
		if(ajax.readyState == 4 && ajax.status == 200) {
			// 可以通过通过ajax.responseText和ajax.responseXML来获取返回的数据
			var info = ajax.responseXML;
			alert(info.getElementsByTagName("name")[0].firstChild.data);
		}
	}

7.2 获取JSON数据

ajax.onreadystatechange = function() {
	if(ajax.readyState == 4 && ajax.status == 200) {
		// 获取JSON 数据
		var info = ajax.responseText;
		// 通过eval方法将JSON字符串转换为JS对象
		var o = eval("("+info+")");
		// 或者使用
		eval("var oo="+info); //也可以将json字符串转换为js对象
	}
}

为什么eval方法需要使用("("+info+")")

原因在于：eval 本身的问题。 由于 json 是以 {} 的方式来开始以及结束的，在 js中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。 加上圆括号的目的是迫使 eval 函数在处理 JavaScript
代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量 {}，如若不加外层的括号，那么 eval 会将大括号识别为j avascript 代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。

8.Ajax中的get请求和post请求的区别。

1.在发送get请求时，只需要将包含查询字符串的URL传入open()方法，设置第一个参数值为get即可。服务器能够在URL尾部的查询字符串中接收用户传递过来的信息。

// 查询字符串是指接在？后面的数据
ajax.open("get", "user?id=1",true);

2.post请求支持发送格式、任意长度的数据，一般用于表单提交。post发送的数据必须进行编码

   ajax.open("post", "user",true);
    // 设置请求头
    ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    // 使用send方法发送数据
    ajax.send("name=zhiyuan&age=22");

3.get和post区别

1. get请求参数在url中显示，post请求不会在url中显示
2. 使用get请求发送数据量小(是由于浏览器地址栏的限制)，post请求发送数据量大
3. post请求必须设置Content-Type值为application/x-form-www-urlencoded，且参数通过send()方法发送。get请求参数实在url中进行发送的