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

前端之家收集整理的这篇文章主要介绍了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',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)使用响应信息中的值:

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

猜你在找的Ajax相关文章