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)使用响应信息中的值: 类似响应为文本,将值反馈给客户端 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |