学习AJAX
而设计AJAX时使用
个重要技术(工具)就是XMLHTTPRequest对象了这里海啸把我学习XMLHTTPRequest对象点资料拿出来跟大家起分享文中资料都是海啸在学习时在网上收集
如果您开过那就再加深下印象吧！(如果您觉得侵犯了您版权请联系海啸([email protected])) 1、XMLHTTPRequest对象什么是？
最通用
定义为:XmlHttp是套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据套APIXmlHttp最大用处是可以更新网页部分内容而不需要刷新整个页面(这个功能正是AJAX大特点的:)) 来自MSDN
解释:XmlHttp提供客户端同http服务器通讯协议客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft? XML Document Object Model (DOM)处理回应 这里说些题外话
其实这个东西很早就出现了只是以前浏览器支持不够只有IE中才支持所以大多数WEB
员都没有如何用他但是现在情况发生了很大地改变Mozilla和Safari把它采用为事实上标准主流浏览器都开始支持XMLHTTPRequest对象了但是这里需要重点介绍说明是XMLHTTPRequest目前还不是个W3C标准所以在区别浏览器上表现也稍有些区别 2、创建XMLHTTPRequest对象
对了
说到区别我们这里来看看如何来声明(使用)它在使用XMLHTTPRequest对象发送请求和处理响应的前我们必须要用javascript创建个XMLHTTPRequest对象(IE把XMLHTTPRequest实现为个ActiveX对象其他浏览器[如Firefox/Safari/Opear]则把它实现为个本地javascript对象)下面我们就来看看具体如何运用javascript来创建它吧: [Copy to clipboard] [ - ]
CODE:<script language=\"javascript\" type=\"text/javascript\">
<!--
var xmlhttp;
// 创建XMLHTTPRequest对象
function createXMLHTTPRequest
{ 
(window.ActiveXObject){ // 判断是否支持ActiveXControl控件 xmlhttp =
ActiveObject(\"Microsoft.XMLHTTP\"); // 通过例子化ActiveXObject个新例子来创建XMLHTTPRequest对象 }
(window.XMLHTTPRequest){ // 判断是否把XMLHTTPRequest实现为个本地javascript对象 xmlhttp =
XMLHTTPRequest; // 创建XMLHTTPRequest个例子(本地javascript对象) }
}
//-->
</script>
3、属性和思路方法
由于东西太多现在先用个页面来列举出说有
思路方法和属性以后再来详细举例(主要是本人也在学习中) [Copy to clipboard] [ - ]
CODE:<html>
<head>
<title>XMLHTTPRequest对象
介绍说明DEMO</title> [Page]<script language=\"javascript\" type=\"text/javascript\">
<!--
var xmlhttp;
// 创建
个XMLHTTPRequest对象 function createXMLHTTPRequext
{ (window.ActiveXObject) { xmlhttp =
ActiveXObject(’Microsoft.XMLHTTP’); }
(window.XMLHTTPRequest){ xmlhttp =
XMLHTTPRequest; }
}
function PostOrder(xmldoc)
{
createXMLHTTPRequext
; // 思路方法:open
// 创建
个新http请求并指定此请求思路方法、URL以及验证信息 // 语法:oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
// 参数
// bstrMethod
// http思路方法
例如:POST、GET、PUT及PROPFIND大小写不敏感 // bstrUrl
// 请求
URL地址可以为绝对地址也可以为相对地址 // varAsync[可选]
// 布尔型
指定此请求是否为异步方式默认为true如果为真当状态改变时会
onreadystatechange属性指定回调
// bstrUser[可选]
// 如果服务器需要验证
此处指定用户名如果未指定当服务器需要验证时会弹出验证窗口 // bstrPassword[可选]
// 验证信息中
密码部分如果用户名为空则此值将被忽略 // 备注:
此思路方法后可以send思路方法向服务器发送数据 xmlhttp.Open(\"get\", \"http://localhost/example.htm\", false);
// var book = xmlhttp.responseXML.selectSingleNode(\"//book[@id=’bk101’]\");
// alert(book.xml);
// 属性:onreadystatechange
// _disibledevent=> // 如下
例子演示当XMLHTTPRequest对象readyState属性改变时HandleStateChange // 当数据接收完毕后(readystate
4)此页面上个按钮将被激活
// 备注:此属性只写
为W3C文档对象模型扩展. xmlhttp.onreadystatechange= HandleStateChange;
// 思路方法:send
// 发送请求到http服务器并接收回应
// 语法:oXMLHttpRequest.send(varBody); [Page]
// 参数:varBody (欲通过此请求发送
数据) // 备注:此思路方法
同步或异步方式取决于open思路方法中bAsync参数如果bAsync False此思路方法将会等待请求完成或者超时时才会返回如果bAsync True此思路方法将立即返回 // This method takes _disibledevent=> // 备注:每个http头名称和值用冒号分割
并以\\r\\n结束当send思路方法完成后才可该思路方法 alert(xmlhttp.getAllResponseHeaders
); // 思路方法:getResponseHeader
// 从响应信息中获取指定
http头 // 语法:strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);
// 备注:当send思路方法成功后才可
该思路方法如果服务器返回文档类型为\"text/xml\", 则这句话 // xmlhttp.getResponseHeader(\"Content-Type\");将返回
串\"text/xml\"可以使用getAllResponseHeaders思路方法获取完整http头信息 alert(xmlhttp.getResponseHeader(\"Content-Type\")); // 输出http头中
Content-Type列:当前web服务器版本及名称 document.frmTest.myButton.disabled = true;
// 思路方法:abort
// 取消当前请求
// 语法:oXMLHttpRequest.abort
; [Page]// 备注:
此思路方法后当前请求返回UNINITIALIZED 状态 // xmlhttp.abort
; // 思路方法:
RequestHeader // 单独指定请求
某个http头 // 语法:oXMLHttpRequest.
RequestHeader(bstrHeader, bstrValue); // 参数:bstrHeader(
串头名称) // bstrValue(
串值) // 备注:如果已经存在已此名称命名
http头则覆盖的此思路方法必须在open思路方法后 // xmlhttp.
RequestHeader(bstrHeader, bstrValue); }
function HandleStateChange
{
// 属性:readyState
// 返回XMLHTTP请求
当前状态 // 语法:lValue = oXMLHttpRequest.readyState;
// 备注:变量
此属性只读状态用长度为4整型表示.定义如下: // 0 (未
化) 对象已建立但是尚未化(尚未open思路方法) // 1 (
化) 对象已建立尚未send思路方法 // 2 (发送数据) send思路方法已
但是当前状态及http头未知 // 3 (数据传送中) 已接收部分数据
响应及http头不全这时通过responseBody和responseText获取部分数据会出现
// 4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整
回应数据 (xmlhttp.readyState 4){ document.frmTest.myButton.disabled = false;
// 属性:responseBody
// 返回某
格式服务器响应数据 // 语法:strValue = oXMLHttpRequest.responseBody;
// 备注:变量
此属性只读以unsigned 未经解码 2进制数据 alert(xmlhttp.responseBody);
// 属性:responseStream
// 以Ado Stream对象
形式返回响应信息 // 语法:strValue = oXMLHttpRequest.responseStream;
// 备注:变量
此属性只读以Ado Stream对象形式返回响应信息 alert(xmlhttp.responseStream);
// 属性:responseText [Page]
// 将响应信息作为
串返回 // 语法:strValue = oXMLHttpRequest.responseText;
// 备注:变量
此属性只读将响应信息作为串返回XMLHTTP尝试将响应信息解码为Unicode串 // XMLHTTP默认将响应数据
编码定为UTF-8如果服务器返回数据带BOM(
-order mark)XMLHTTP可 // 以解码任何UCS-2 (big or little endian)或者UCS-4 数据
注意如果服务器返回是xml文档此属 // 性并不处理xml文档中
编码声明你需要使用responseXML来处理 alert(xmlhttp.responseText);
// 属性:responseXML
// 将响应信息格式化为Xml Document对象并返回
// 语法:var objDispatch = oXMLHttpRequest.responseXML;
// 备注:变量
此属性只读将响应信息格式化为Xml Document对象并返回如果响应数据不是有效XML文档 // 此属性本身不返回XMLDOMParseError
可以通过处理过DOMDocument对象获取信息 alert(\"Result = \" + xmlhttp.responseXML.xml);
// 属性:status
// 返回当前请求
http状态码 // 语法:lValue = oXMLHttpRequest.status;
// 返回值:长整形标准http状态码
定义如下: // Number:Description
// 100:Continue
// 101:Switching protocols
// 200:OK
// 201:Created
// 202:Accepted
// 203:Non-Authoritative Information
// 204:No Content
// 205:Re
Content // 206:Partial Content
// 300:Multiple Choices [Page]
// 301:Moved Permanently
// 302:Found
// 303:See Other
// 304:Not Mod
ied // 305:Use Proxy
// 307:Temporary Redirect
// 400:Bad Request
// 401:Unauthorized
// 402:Payment Required
// 403:Forbidden
// 404:Not Found
// 405:Method Not Allowed
// 406:Not Acceptable
// 407:Proxy Authentication Required
// 408:Request Timeout
// 409:Conflict
// 410:Gone
// 411:Length Required
// 412:Precondition Failed
// 413:Request Entity Too Large
// 414:Request-URI Too Long
// 415:Unsupported Media Type
// 416:Requested Range Not Suitable
// 417:Expectation Failed
// 500:Internal Server Error
// 501:Not Implemented
// 502:Bad Gateway
// 503:Service Unavailable
// 504:Gateway Timeout
// 505:HTTP Version Not Supported
// 备注:长整形
此属性只读返回当前请求http状态码,此属性仅当数据发送并接收完毕后才可获取 alert(xmlhttp.status);
// 属性:statusText [Page]
// 返回当前请求
响应行状态 // 语法:strValue = oXMLHttpRequest.statusText;
// 备注:
串此属性只读以BSTR返回当前请求响应行状态,此属性仅当数据发送并接收完毕后才可获取 alert(xmlhttp.statusText);
}
2008-12-25 at 8:35