学习AJAX，解析XMLHttpRequest对象

XMLHttpRequest对象的属性和事件

1.readyState属性

当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态：一直等待直到请求被处理；然后，它才接收一个响应。这样以来，脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性

onreadystatechange事件

　　无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值-向该方法指示无论 readyState值何时发生改变，该对象都将激活。

　　responseText属性

　　这个 responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该 responseText包含完整的响应信息。

　　responseXML属性

　　此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为 text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么 responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。

　　其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。如果文档不能被分析(例如，如果文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。

　　status属性

　　这个status属性描述了HTTP状态代码，而且其类型为short。而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。

　　statusText属性

　　这个statusText属性描述了HTTP状态代码文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

2. XMLHttpRequest对象的方法

XMLHttpRequest对象提供了各种方法用于初始化和处理HTTP请求，下列将逐个展开详细讨论。

　　abort()方法

　　你可以使用这个abort()方法来暂停与一个XMLHttpRequest对象相联系的HTTP请求，从而把该对象复位到未初始化状态。

　　open()方法

　　你需要调用open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)方法初始化一个XMLHttpRequest对象。其中，method参数是必须提供的-用于指定你想用来发送请求的HTTP方法 (GET，POST，PUT，DELETE或HEAD)。为了把数据发送到服务器，应该使用POST方法；为了从服务器端检索数据，应该使用GET方法。另外，uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。借助于window.document.baseURI属性，该uri被解析为一个绝对的URI-换句话说，你可以使用相对的URI-它将使用与浏览器解析相对的URI一样的方式被解析。async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求，需要把这个参数设置为false。对于要求认证的服务器，你可以提供可选的用户名和口令参数。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、 responseXML、status和statusText属性复位到它们的初始值。另外，它还复位请求头部。注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。

　　send()方法

　　在通过调用 open()方法准备好一个请求之后，你需要把该请求发送到服务器。仅当readyState值为1时，你才可以调用send()方法；否则的话，XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true 时，send()方法立即返回，从而允许其它客户端脚本处理继续。在调用send()方法后，XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应时，在接收消息体之前，如果存在任何消息体的话，XMLHttpRequest对象将把readyState设置为 3(正在接收中)。当请求完成加载时，它把readyState设置为4(已加载)。对于一个HEAD类型的请求，它将在把readyState值设置为 3后再立即把它设置为4。

　　send()方法使用一个可选的参数-该参数可以包含可变类型的数据。典型地，你使用它并通过POST方法把数据发送到服务器。另外，你可以显式地使用null参数调用send()方法，这与不用参数调用它一样。对于大多数其它的数据类型，在调用send() 方法之前，应该使用setRequestHeader()方法(见后面的解释)先设置Content-Type头部。如果在send(data)方法中的 data参数的类型为DOMString，那么，数据将被编码为UTF-8。如果数据是Document类型，那么将使用由 data.xmlEncoding指定的编码串行化该数据。

　　setRequestHeader()方法

　　该setRequestHeader(DOMString header，DOMString value)方法用来设置请求的头部信息。当readyState值为1时，你可以在调用open()方法后调用这个方法；否则，你将得到一个异常。

　　getResponseHeader()方法

　　getResponseHeader(DOMString header，value)方法用于检索响应的头部值。仅当readyState值是3或4(换句话说，在响应头部可用以后)时，才可以调用这个方法；否则，该方法返回一个空字符串。

　　getAllResponseHeaders()方法

　　该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部（每一个头部占单独的一行）。如果readyState的值不是3或4，则该方法返回null。

3、发送请求

在AJAX中，许多使用XMLHttpRequest的请求都是从一个HTML事件（例如一个调用JavaScript函数的按钮点击(onclick) 或一个按键(onkeypress)）中被初始化的。AJAX支持包括表单校验在内的各种应用程序。有时，在填充表单的其它内容之前要求校验一个唯一的表单域。例如要求使用一个唯一的UserID来注册表单。如果不是使用AJAX技术来校验这个UserID域，那么整个表单都必须被填充和提交。如果该 UserID不是有效的，这个表单必须被重新提交.

下面建立一个带有按钮的页面

<body><div><input id="Button1" type="button" value="测试" οnclick="sendRequest()" /></div></body>

创建一个XMLHttpRequest对象的过程因浏览器实现的不同而有所区别。如果浏览器支持XMLHttpRequest对象作为一个窗口属性(所有普通的浏览器都是这样的，除了IE 5和IE 6之外)，那么，代码可以调用XMLHttpRequest的构造器。如果浏览器把XMLHttpRequest对象实现为一个 ActiveXObject对象(就象在IE 5和IE 6中一样)，那么，代码可以使用ActiveXObject的构造器。下面的函数将调用一个init()函数，它负责检查并决定要使用的适当的创建方法- 在创建和返回对象之前。

<script type="text/javascript">function sendRequest(){var xmlHttpReq=init();function init() {if (window.XMLHttpRequest) {return new XMLHttpRequest();}else if (window.ActiveXObject) {return new ActiveXObject("Microsoft.XMLHTTP");}}var URL = "/easyui/tab1.aspx?name=xx";//回调函数function callback(){if(xmlHttpReq.readyState == 4){if(xmlHttpReq.status == 200){var v = xmlHttpReq.responseText;alert(v);}}}xmlHttpReq.open("GET",URL,true);xmlHttpReq.onreadystatechange=callback;xmlHttpReq.send(null);}
</script>

按道理说，应该用ashx来输出自定义的内容.我这里使用了aspx页面进行测试

建立tab1.aspx

在LOAD事件里

    protected void Page_Load(object sender, EventArgs e){if (!IsPostBack) {if (Request["name"] != null){string value = Request["name"].ToString();Response.Write("信息为:" + value + "已收到");Response.End();}}}

如果不加Response.End这句话，在Response.Write输出数据后也输出html页面字符串。

因为asp.net要为aspx创建一个Page对象实例，要走普通的Page页面的完整生命周期，因此需要用 Respose.End 语句终止正常的Page页面输出

完成之后点击测试按钮,用JS显示回送的字符串

小结

XMLHttpRequest不必把Web页面寄送到服务器而实现数据传送，降低服务器的压力，它为客户端与服务器之间提供了一种动态的交互能力。

转载于:https://www.cnblogs.com/yhwtech/archive/2013/03/27/2984860.html

学习AJAX，解析XMLHttpRequest对象相关推荐

AJAX - 创建XMLHttpRequest 对象
AJAX - 创建XMLHttpRequest 对象 · Previous Page · Next ...
Ajax的XMLHttpRequest对象
Ajax的XMLHttpRequest对象编写一个例子:从服务器取回一个Hello Ajax字符串. HTML: <input type="button" valu ...
Ajax中XMLHttpRequest对象的详细解析
| responseXML | 服务器的相应,表示为XML,这个对象可以解析为一个DOM | | status | 服务器的HTTP状态码 | | statusText | HTTP状态的对应文本 | ...
全面剖析Ajax的XMLHttpRequest对象（学习Ajax必须知道的东西）
XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础.尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用:但是,我们 ...
Ajax异步XMLHttpRequest对象
示例Ajax: <%@ page language="java" contentType="text/html; charset=utf-8"pageEn ...
艾伟：详解AJAX核心 —— XMLHttpRequest 对象 (下)
继续上一篇的内容上一篇关于XMLHttpRequest 对象发送对服务器的请求只说到了用Get方式,没有说Post方式的.那是因为要说Post方式就需要先说另外一个东西,那就是DOM(Documen ...
jquery与ajax的XMLHttpRequest对象介绍
首先认识一个对象这个对象叫XMLHttpRequest XMLHttpRequest对象可以提供在不刷新页面的情况下向服务器发送异步请求,并且接受服务器端返回的结果.从而实现局部更新当前页面的功 ...
ajax(判断浏览器创建xmlhttprequest对象),XMLHTTPRequest对象的创建与浏览器的兼容问题...
MLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpRequest ...
AJAX核心对象-- XMLHttpRequest 对象使用详解 (一)
作者:Brett McLaughlin 多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的HTML 页面.常常是点击一个按钮,等待服务器响应,再点击另一个按钮,然后再等待,这样一个反复的过 ...

学习AJAX，解析XMLHttpRequest对象

学习AJAX，解析XMLHttpRequest对象相关推荐

最新文章

热门文章