AJax技术

ajax入门详解(4)

字号+ 作者:H5之家 来源:H5之家 2015-11-04 16:00 我要评论( )

function getCustomerInfo() { var phone = document.getElementById("phone").value; var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone); request.open("GET", url, true); request.onreadystate

function getCustomerInfo() {
  var phone = document.getElementById("phone").value;
  var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
  request.open("GET", url, true);
  request.onreadystatechange = updatePage;
  request.send(null);
 }
  需要特别注意的是该属性在代码中设置的位置 —— 它是在调用 send() 之前 设置的。发送请求之前必须设置该属性,这样服务器在回答完成请求之后才能查看该属性。

现在剩下的就只有编写 updatePage() 方法了。

代码 7. 检查就绪状态

function updatePage() {
  if (request.readyState == 4)
      if (request.status == 200)
       alert("Server is done!");
}

其中 request.readyState 是 HTTP 的就绪状态,在这里我们大概需要了解这 5 种状态,关于其详细意义,我们在这就不在做深入研究了。

request.readyState == 0 :请求没有发出(在调用 open() 之前)。
   request.readyState == 1 :请求已经建立但还没有发出(调用 send() 之前)。
   request.readyState == 2 :请求已经发出正在处理之中(这里通常可以从响应得到内容头部)。
   request.readyState ==3 :请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应。
   request.readyState == 4 :响应已完成,可以访问服务器响应并使用它。

而接下来的 request.status 为 HTTP 状态码,为 200 的时候为正常, 400 多的时候为客户端的错误, 500 多的时候为服务器端的服务,如果您对这方面的知识感兴趣,不妨可以去借一些 HTTP 协议之类的书看看,这里也不做深入研究了。

l         读取响应文本

当我们成功做完上面的一切时,服务器最后给出了处理的响应,我们可以把响应的内容 以 responseText 或者 responseXML 形式组织返回给客户端供其调用。 responseXML 的话,要涉及到对 XML 的操作,因为 jdk 本身对 XML 的操作比较弱,不过我们可以运用第三方的包 org.jdom (网上有的下载),如果大家有兴趣,可以自己去研究,这里我们简单的给出一个 responseXML 的用法的例子

代码 8. responseText 的简单运用

function updatePage() {
   if (request.readyState == 4) {
   if (request.status == 200) {
    var response = request.responseText.split("|");
    document.getElementById("order").value = response[0];
    document.getElementById("address").innerHTML = response[1].replace(/\n/g, "");
   } else
    alert("status is " + request.status);
  }
   }
到现在,相信大家一定对 Ajax 有了一个系统的了解了吧,仅仅只是讲了 Ajax 的一些最基础的东西,如果您对这个有兴趣,还可以进行进一步的深入研究。

l      Ajax 应用场景

然而 Ajax 不是万能的,在适合的场合使用 Ajax ,才能充分发挥它的长处,改善系统性能和用户体验,绝不可以为了技术而滥用。 Ajax 的特点在于异步交互,动态更新 web 页面,因此它的适用范围是交互较多,频繁读取数据的 web 应用。现在来看几个 Ajax 的应用实例,读者可以了解如何使用 Ajax 技术改进现有的 web 应用系统。

场景 1. 数据验证

在填写表单内容时,需 要保证数据的唯一性(例如新用户注册填写的用户名),因此必须对用户输入的内容进行数据验证。数据验证通常有两种方式:一种是直接填写,然后提交表单,这 种方式需要将这个页面提交到服务器端进行验证,整个过程不仅时间长而且造成了服务器不必要的负担;第二种方式是改进了的验证过程,用户可以通过点击相应的 验证按钮,打开新窗口查看验证结果,但是这样需要新开一个浏览器窗口或者对话框,还需要专门编写验证的页面,比较耗费系统资源。而使用 Ajax 技术,可以由 XMLHttpRequest 对象发出验证请求,根据返回的 HTTP 响应判断验证是否成功,整个过程不需要弹出新窗口,也不需要将整个页面提交到服务器,快速而又不加重服务器负担。

场景 2. 按需取数据

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 网页注册表单的网页设计技巧

    网页注册表单的网页设计技巧

    2016-02-06 16:00

  • JavaScript学习笔记 (七)

    JavaScript学习笔记 (七)

    2016-01-17 17:17

  • 简述jQuery ajax的执行顺序

    简述jQuery ajax的执行顺序

    2016-01-15 15:21

  • jQuery中ajax的load()与post()方法实例详解

    jQuery中ajax的load()与post()方法实例详解

    2016-01-15 14:11

网友点评
(