Ajax 学习

先来一个Ajax的get请求吧！

function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=callback
	xmlhttp.open("GET","/try/ajax/demo_get.php",true);
	xmlhttp.send();
}
function callback()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}

回忆回忆Ajax请求五部曲：

1、首先创建XMLHttpRequest异步对象，IE5、IE6执行的函数不同？（忽视…）

xmlhttp=new XMLHttpRequest();

2、设置回调函数xmlhttp.onreadystatechange

xmlhttp.onreadystatechange=callback

3、配置请求信息使用open()方法

	xmlhttp.open("GET","/try/ajax/demo_get.php",true);

open(method,url,async)

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

4、将请求发送到服务器xmlhttp.send(string);

String参数仅用于post请求

5、最后编写第二步的回调函数

在XMLHttpRequest对象中还有一个重要的属性：readyState

function callback()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}

readyState：记录了XMLHttpRequest的状态，从0到4变化

• 0: 请求未初始化

• 1: 服务器连接已建立

• 2: 请求已接收

• 3: 请求处理中

• 4: 请求已完成，且响应已就绪

  在进行获取数据之前要先判断是否当前的readyState状态已经准备就绪

  确定是请求已完成后，需要判断服务器返回的状态码，200是 请求成功，根据返回的状态码进行不同的操作

补充：Ajax添加HTTP头

使用xmlhttp.setRequestHeader()进行HTTP头的设置