ajax核心技术的简练总结——XMLHttpRequestd
2015-01-19 11:42
661 查看
一、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对象
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.根据处理状态采取措施
3.返回状态码
处理完响应后无论成功失败都会返回一个状态码,表示服务器处理请求的结果
(1)识别XML的根节点
(2)获取XML响应信息中的值:
根据获取到的根节点和getElementByTagName等方法获取根节点中子节点的值
(3)使用响应信息中的值:
类似响应为文本,将值反馈给客户端
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)使用响应信息中的值:
类似响应为文本,将值反馈给客户端
相关文章推荐
- 《XMLHttpRequest对象-AJAX技术核心》
- 利用 Microsoft.XMLHTTP/XMLHttpRequest 对象 实现Ajax技术 的总结
- Ajax核心XMLHttpRequest总结
- Ajax技术---核心XMLHttpRequest对象
- Ajax核心XMLHttpRequest总结
- Ajax核心技术之XMLHttpRequest对象
- Ajax核心技术之XMLHttpRequest
- Ajax核心技术之XMLHttpRequest
- 详解AJAX核心中的XMLHttpRequest对象
- ajax 入门基础之--XMLHttpRequest对象总结
- Ajax(初期学者)核心对象XmlHttpRequest续
- AJAX技术_XMLHttpRequest
- ajax 入门基础之--XMLHttpRequest对象总结(整理转)
- Ajax-核心对象--XMLHttpRequest 对象使用详解
- AJAX - 本质论(一) - 核心对象 - The XMLHttpRequest Object
- 关于ajax的XMLHttpRequest对象的方法总结
- Ajax的核心——XMLHttpRequest 对象
- AJAX核心对象-- XMLHttpRequest 对象使用详解 (二)
- 农国苏:Ajax的核心:XMLHttpRequest(完善中……)
- Ajax核心对象XmlHttpRequest