ajax核心技术的简练总结——XMLHttpRequestd

一、XMLHttpRequest对象

1.XMLHttpRequest对象的属性

1>readyState属性——描述将请求发到服务器经历的几个状态

0：未初始化XMLHttpRequest对象

1：“发送”，已调用XMLHttpRequest的open()方法，准备发送

2：“发送”，用send()方法发送请求，没有响应

3：“正在接收”

4：”已加载“

2>responseText属性

包含客户端接收到的文本内容，readyState == 4时responseText才包含完整的文本响应。

3>responseXML属性

也是客户端接收到的回复信息（响应），只不过格式是XML

4>Status属性

描述Http的状态代码

5>statusText属性

描述Http的状态代码文本信息

2.XMLHttpRequest对象的方法

1>abort()暂停Http请求，把XMLHttpRequest对象还原到没初始化的状态

2>open(method, url, bool, username, userpassword)初始化XMLHttpRequest对象

method: 必有参数，传送方法如POST、GET

url:必选参数，目标地址

bool:是否异步请求（true），同步（false）

username/password:可选参数，当服务器要验证用户名和密码时使用

3>send()向服务器发送具体请求，readyState == 1时才可以调用，调用后，readyState == 2

XMLHttp_Object.send(content);

4>setRequestHeader()，一般在send()方法之前调用，

XMLHttp_Object.setRequestHeader(string head, string value)

head :Http头名称

value:Http头的值

5>getResponseHeader(string header)，返回指定header的值，readyState == 3/4才可调用

6>getAllResponseHeader()，以一个字符串的形式返回所有header的值

二、发送请求

1.GET请求

实现步骤：

1>创建XMLHttpRequest对象

try
	{
		var xmlhttp = new XMLHttpRequest();
	}
	catch(e)
	{
		var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');//当浏览器是IE时
	}

2>设置服务器地址,用“？”指定请求中所需传递参数，第一个“？”隔开，其余用“&”隔开

eg:

var url = “ http://127.0.0.1/sample/server.aspx?name="+escape(name) + "&psw=" + escape(psw);

3>打开请求

xmlhttp.open('GET',url,true);

4>发送请求

xmlhttp.send();

2.POST请求

实现步骤：

1>创建XMLHttpRequest对象

2>设置服务器地址

3>打开请求

4>设置Http头部信息

两种：application/x-www-form-urlencoded和multipart/form-data

eg：XMLHttp_Object.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

5>发送请求

三、处理响应（处理服务器的回复信息）

1.调用响应函数

XMLHttp_Object.onreadystatechange = ResponseReq;//当readyState值变化时该语句起作用，该代码放于send()前

2.根据处理状态采取措施

function ResponseReq()
{
	if (XMLHttp_Object.readyState == 4)
	{
		//处理信息
	}
}

3.返回状态码

处理完响应后无论成功失败都会返回一个状态码，表示服务器处理请求的结果

if(XMLHttp_Object.status == 200)
		{
			//处理信息
		}
		else{
			alert("error:返回码：" + XMLHttp_Object.status)
		}

1>响应为文本

var str = XMLHttp_Object.responseText;
document.getElementById('test').innerHTML = str;

2>响应为XML

（1）识别XML的根节点

<span style="font-size:14px;">var root = XMLHttp_Object.responseXML.documentElement;</span>

（2）获取XML响应信息中的值：

根据获取到的根节点和getElementByTagName等方法获取根节点中子节点的值

（3）使用响应信息中的值：

类似响应为文本，将值反馈给客户端