`

Ajax的主要步骤 及 XMLHttpRequest对象的属性和方法

 
阅读更多

Ajax应用程序可以用javascript脚本代码创建

主要步骤如下

(1) 调用XMLHttpRequest对象的open()方法,设置所有的请求方法,请求资源的URL, 并指定采用同步或异步方式发送HTTP请求。

(2) 设置XMLHttpRequest对象的onreadystatechange属性,以指定当请求状态改变时调用的时间处理程序

(3) 调用XMLHttpRequest对象的sendf方法,向服务器发送请求并接受响应。在服务器段接收请求和发送请求时可以使用各种编程语言实现: asp、jsp、php、asp.net.......

(4) 在事件处理程序中,对从服务器获取的HTTP代码块、XML数据、json数据或其他数据进行解析和处理,然后插入到HTTP文档中,以实现页面的局部更新。

 

如果在调用open和send方法时都没有传入任何请求参数,则这种请求也成为简单请求。简单请求通常用在自动刷新的场合,用于从服务器端获取公告性质的响应。例如股票行情等实时信息。由于发送简单请求时不需要向服务器传递请求参数,所以使用POST或GET方法都是可以的。

  发送GET请求时,可将open()方法的第一个参数设置为GET,若要向服务器端发送请求参数,应在调用open方法时把名称/值附加在第2个参数(服务器资源URL)的后面。但由于URL的长度是有限的,所以不能通过GET请求来发送大量数据,如果数据量太大,数据可能被截断,将无法得到预期的处理结果,在这种情况下,可以改用POST方法发送异步请求。

  同时浏览器会缓存HTTP GET请求的结果。如果要保证不缓存结果,可以在客户端或者服务器端禁止页面缓存。

   ~ 若要在客户端禁止页面缓存,可以在ajax请求的后台数据处理页面的URL上附加一个随机字符串。所用javascript代码如下,加之后ajax每次发出的URL都不同,因此浏览器会认为ajax每次发出的HTTP请求也是各不相同的,从而每次都会重新请求。

    xhr.open("GET","test.jsp?name=span&time=" + new Date().getTime(),true);

 

XMLHttpRequest对象的属性和方法 

1. readyState属性

返回XMLHttpRequest对象所处的状态。[nState = ]xhr.readyState;

readyState属性是一个只读属性,没有默认值。属性值可以为下列整数之一

  - 0:表示未初始化状态(Uninitialized),以创建XMLHttpRequest对象,但尚未进行初始化(即未调用open方法)

  - 1:表示准备发送(Open),已调用XMLHttpRequest对象的open()方法,发送到服务器段的请求准备就绪。

  - 2:表示已发送状态(Sent),已调用XMLHttpRequest对象的send方法,但是状态和表头仍然不可用。

  - 3:表示正在接收状态(Receiving),已收到HTTP响应标头,但尚未完全接收到响应的正文。

  - 4:表示完成响应状态(Loaded),所有数据均已收到,并且可用。

2. onreadystatechange属性 

  可读写属性,没有默认值,可将其设置为一个已经定义的JavaScript命名函数的的名称和匿名函数。

   无论readyState值何时发生改变,XMLHttpRequest对象都会触发一个readysatechange事件。onreadystatechange属性用于设置异步请求的事件处理程序

  xhr.onreadystatechange [= vCallback];

 

3. responseText属性

  只读属性,没有默认值。只有readyState属性值为4时,才能通过该属性获取完整的响应信息

  返回客户端接收到的HTTP响应的文本内容。

  [sBody = ]xhr.responseText;

 

4. responseXML属性

  只读属性,没有默认值。只有readyState属性值为4时,并且Content-Type响应标头的MIME属性为text/xml 或application/xml时,该属性才会有值,并被解析为一个XML文档。

  返回服务器响应的XML文档对象

  [oXMLdOCUMENT = ]xhr.responseXML;

 

5. status属性

  只读属性,没有默认值。只有当readyState属性值为3或者4时,才能读取status属性;只有当status属性值为200时,才能访问responseText和responseXML属性。

返回请求的HTTP状态码。

  [nStatus = ]xhr.status;  nStatus为一个整形变量,可接受HTTP状态码,例如

   ~ 200:表示服务器响应正常  

   ~ 401:表示访问被拒绝

   ~ 404:表示所请求的资源不存在

   ~ 500: 表示服务器内部错误

 

6. statusText属性

  只读属性,没有默认值。只有当服务器响应已经完成时,才能有该状态文本信息。返回HTTP请求的状态文本

  [sStatus = ]xhr.statusText;

 

7. open方法

  用于初始化请求参数,挤兑一个挂起的请求设置请求方法、目标URL以及其他可选属性

  xhr.open(sMethod, sUrl[, bAsync][, sUser][, sPassword]);

    - sMethod参数: 必选项,其值是一个字符串,指定打开连接苏勇的HTTP方法,例如GET,POST或HEAD

    - sUrl参数:必选项,值是一个字符串,指定请求的绝对或相对URL,该地址会被自动解析为绝对地址。当使用GET方法发送请求时,可以将请求参数附加在该参数之后,URL与参数之间用问好(?)分隔,参数名与参数值之间使用等号(=)连接,不同名称/值对之间使用符号&连接,例如test.jsp?name1=value1&name2=value2.

    - bAsync参数:可选项, 值为boolean值 true或false。

         ~ 如果值为true,则为异步操作,调用send方法立即返回,脚本继续执行,无需等待响应;

         ~ 如果值为false,则在接受响应之前,脚本停止执行,并且冻结页面的功能;

         ~ 如果未提供该参数,则默认值为true。

    - sUser:可选项,指定进行身份验证的用户名。如果该参数为空(""),或者该参数为填但站点要求进行身份验证,则显示一个登陆窗口。

    - sPassword是可选项,指定进行身份验证的密码。

 

8. send方法

  向服务器发送HTTP请求并接收响应。

  xhr.send([varBody]);

  参数varBody为可选项,可以是String类型值、无符号字节数组,也可以是一个XML DOM对象。指定随请求发送的消息正文。send方法没有返回值。

  调用send()方法是同步还是异步,取决于open()方法时参数bAsync的值:

      ~ 如果采用同步方式,则次调用不会返回,直到接收到整个响应或协议堆栈超时时间到期。

      ~ 如果采用异步方式,则次调用立即返回。

  使用GET方法向服务器发送请求时,请求参数可以附加在URL后面,但在调用send方法时,还是应该传递一个参数,此时使用null作为参数即可。如果直接使用无参数的send方法,在IE中可以正常运行,在Firefox里不能正常运行。

 

9. abort方法

  没有返回值,取消当前HTTP请求,中止一个在进行中的操作。

      xhr.abort();

  通过在open方法中将true传递给bAsync参数可以创建一个异步请求。调用abort方法将重置XMLHttpRequest对象,删除其onreadystatechange时间处理程序,并将readyState属性值设置为0(未初始化)。

 

10. setRequestHeader方法

  将自定义的HTTP标头添加到请求中

      xhr.setRequestHeader(sName, sValue);

  2个参数都是必选项,分别制定标头的名称和值。当readyState属性值为1时,可以调用setRequestHeader方法,该方法没有返回值。

 

11. getAllResponseHeaders方法

  返回响应标头的完整列表。

      sHeader s = xhr.getAllResponseHeaders();

  该方法返回一个字符串,包含全部响应标头。每个名称/值对由回车符/换行符序列(CR/LF)分隔。

 

12. getResponseHeader方法

  返回指定的响应标头。

      p = xhr.getResponseHeader(bstrHeader);

  其中bstrHeader是必选的一个字符串,用于指定响应标头的名称。返回值是一个字符串,包含响应标头的值。

 

下面用一个例子说明如何通过XMLHttpRequest对象实现Ajax交互。

test.html__________________

<span>你好,Ajax!  </span>

ajaxDemo1.html____________

<html>

  <head>

      <title>Ajax应用实例</title>

      <style type="text/css">

           p, button, li {font-size: 12px; color:green}

           span{font-size="22px; font-style:itatlic; font-weight:bold; color: red; width:145px; background-color:yellow; display:block; position:relative"}

      </style>

      <script type="text/javascript" src="../scripts/jquery-1.4.2.js"> </script>

      <script type="text/javascript" src="../scripts/ajax.js"> </script>

      <script type="text/javascript">

            var xhr;

            function callback() {

                   var states = ["正在初始化......”, "正在初始化请求......", "正在发送请求......", "正在接收数据.....", "正在解析数据......"];

                    $("ol").append("<li>" + states[xhr.readyState] + "</li>");

                    $("li:last").append("完成!");

                    if(xhr.readyState == 4 && xhr.status ==200) {

                           var sHeaders = xhr.getAllResponseHeaders();

                           var sResponse = xhr.responseText;

                           $("p:first").html("<b>响应标头:</b>" + sHeaders);

                           $("p:last").html("<b>服务器响应文本:</b>" + sResponse);

                           $("span").hide().fadeIn(2000).animate({left:"+=168"},2000).animate({top:"-=16",fontSize:"22px"},1000);

                     }

             }

 

             $(document).ready(function(){

                     $("button").click(

                             xhr = createXMLHttpReq();

                             if(xhr){

                                     try{

                                             xhr.open("GET", "test.html",true);

                                             xhr.onreadystatechange = callback;

                                             xhr.send(null);

                                             

                                     }catch(oErr){

                                            alert("无法连接服务器:" + oErr.toString());

                                     }

                             }

                      );

             });

      </script>

  </head>

  <body>

      <button>发送请求</button>

      <ol></ol>

      <p></p>

      <p></p>

  </body>

</html>

 

—————————————————————————————————— 

分享到:
评论

相关推荐

    Sy5_AjAx.rar

    2. 掌握XMLHttpRequest对象的常用方法和属性; 3. 学会使用Ajax同步/异步请求文本数据(字符串); 4. 掌握XML的编写规范,能够编写XML文件; 5. 学会使用Ajax同步/异步请求XML数据。 6. 掌握JSON的编写规范,能够...

    Ajax课件学习(免费)

    1、XmlHttpRequest对象的open方法允许程序员用一个ajax调用向服务器发送请求。 2、method表示请求类型。最常用的有get和post请求。如果不向服务器端发送数据,只是请求服务器端的数据,这个时候可以用get方法。...

    New of GWT Introduction--GWT开发快速入门

    本文中作者将介绍如何使用 GWT 开发 Ajax 应用的基本方法和步骤。 Ajax简介 Ajax是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写,由XHTML、CSS、JavaScript、XMLHttpRequest、XML等技术组合而成,是...

    J2EE应用开发详解

    91 6.2 CSS 92 6.3 XSLT 94 6.4 小结 96 第7章 Ajax简介 97 7.1 Ajax简介 97 7.2 Ajax技术核心 100 7.2.1 XMLHttpRequest对象的常用方法 100 7.2.2 标准的XMLHttpRequest属性 101 7.3 一个简单的Ajax实例 101 7.4 小...

    java web技术开发大全(最全最新)

    除此之外,《Java Web开发技术大全:JSP+Servlet+Struts+Hibernate+Spring+Ajax》还提供了两个完整的实例来讲解开发SSH的详细步骤和方法。通过对这两个实例的学习,读者可以对SSH开发模式有更透彻地理解和认识。SSH是...

    jquery插件使用方法大全

    (4)的方法会在指定的Dom对象上绑定响应ajax执行的事件。 (5)同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。 var html = $.ajax({ url: "some.php", async: false }).responseText;...

    亮剑.NET深入体验与实战精要2

    本书既考虑到实际开发中经常遇到的困惑和难题,也分析了解决问题的思路和方法,更总结出项目开发中不可或缺的技术点及思想。读者可以在欣赏一个个有趣例子的过程中,不知不觉具备开发真正商业项目的能力。 本书集...

    亮剑.NET深入体验与实战精要3

    本书既考虑到实际开发中经常遇到的困惑和难题,也分析了解决问题的思路和方法,更总结出项目开发中不可或缺的技术点及思想。读者可以在欣赏一个个有趣例子的过程中,不知不觉具备开发真正商业项目的能力。 本书集...

    java web开发技术大全

    除此之外,《Java Web开发技术大全:JSP+Servlet+Struts+Hibernate+Spring+Ajax》还提供了两个完整的实例来讲解开发SSH的详细步骤和方法。通过对这两个实例的学习,读者可以对SSH开发模式有更透彻地理解和认识。SSH是...

    千方百计笔试题大全

    164、介绍一下XMLHttpRequest对象 38 165、AJAX应用和传统Web应用有什么不同? 38 166、如何用JQuery进行表单验证? 39 167、Prototype如何实现页面局部定时刷新? 40 168、Prototype如何为一个Ajax添加一个参数? ...

    java面试宝典

    164、介绍一下XMLHttpRequest对象 38 165、AJAX应用和传统Web应用有什么不同? 38 166、如何用JQuery进行表单验证? 39 167、Prototype如何实现页面局部定时刷新? 40 168、Prototype如何为一个Ajax添加一个参数? ...

    PHP和MySQL WEB开发(第4版)

    6.1.1 类和对象 6.1.2 多态性 6.1.3 继承 6.2 在PHP中创建类、属性和操作 6.2.1 类的结构 6.2.2 构造函数 6.2.3 析构函数 6.3 类的实例化 6.4 使用类的属性 6.5 使用private和public关键字控制访问 6.6 类操作的调用...

    PHP和MySQL Web开发第4版pdf以及源码

    6.1.1 类和对象 6.1.2 多态性 6.1.3 继承 6.2 在PHP中创建类、属性和操作 6.2.1 类的结构 6.2.2 构造函数 6.2.3 析构函数 6.3 类的实例化 6.4 使用类的属性 6.5 使用private和public关键字控制访问 6.6 类...

    PHP和MySQL Web开发第4版

    6.1.1 类和对象 6.1.2 多态性 6.1.3 继承 6.2 在PHP中创建类、属性和操作 6.2.1 类的结构 6.2.2 构造函数 6.2.3 析构函数 6.3 类的实例化 6.4 使用类的属性 6.5 使用private和public关键字控制访问 6.6 类...

    整理后java开发全套达内学习笔记(含练习)

    属性(品质,特征) [ә'tribju:t] boolean (关键字) 逻辑的, 布尔型 call n.v.调用; 呼叫; [kɒ:l] circumstance n.事件(环境,状况) ['sә:kәmstәns] crash n.崩溃,破碎 [kræʃ] cohesion 内聚,黏聚,结合 [kәu'...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    7.3.3 ExecuteReader()方法和DataReader 7.3.4 ExecuteScalar()方法 7.3.5 ExecuteNonQuery()方法 7.3.6 SQL注入攻击 7.3.7 使用参数化命令 7.3.8 调用存储过程 7.4 事务 7.4.1 事务和ASP.NET...

    ASP.NET4高级程序设计(第4版) 3/3

    此外,《ASP.NET 4高级程序设计(第4版)》专门提供了两章的内容来教你如何用Ajax 技术制作快速响应的页面,以及如何使用微软的ASP.NETAJAX平台。另外,还专门介绍了ASP.NET4 新增的功能,如MVC 和动态数据等。  ...

    爱革CMS(门户网站) 3.0.rar

    ■对象,属性和操作名称采取简单完整的英文名词 ■标签的输入有代码提示 ◦直观性 ■模板不会影响到设计好的页面。设计与模板接近 ■源代码状态下,模板代码高亮显示,使得很容易辨别和定位 ■设计状态下,...

    爱革CMS(公司网站) 3.0.rar

    ■对象,属性和操作名称采取简单完整的英文名词 ■标签的输入有代码提示 ◦直观性 ■模板不会影响到设计好的页面。设计与模板接近 ■源代码状态下,模板代码高亮显示,使得很容易辨别和定位 ■设计状态下,...

Global site tag (gtag.js) - Google Analytics