首页 > 代码库 > 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‘,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)使用响应信息中的值:
类似响应为文本,将值反馈给客户端
ajax核心技术的简练总结——XMLHttpRequestd