AJax技术

ajax入门详解(3)

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

有了要连接的 URL 后就可以配置请求了。可以用 XMLHttpRequest 对象的 open() 方法来完成。该方法有五个参数: request-type :发送请求的类型。典型的值是 GET 或 POST ,但也可以发送 HEAD 请求。 url :要连接的

有了要连接的 URL 后就可以配置请求了。可以用 XMLHttpRequest 对象的 open() 方法来完成。该方法有五个参数:
   ·request-type :发送请求的类型。典型的值是 GET 或 POST ,但也可以发送 HEAD 请求。
   ·url :要连接的 URL 。
   ·asynch :如果希望使用异步连接则为 true ,否则为 false 。该参数是可选的,默认为 true 。
   ·username :如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。
   ·password :如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。
  通常使用其中的前三个参数。事实上,即使需要异步连接,也应该指定第三个参数为 “true” 。这是默认值,但坚持明确指定请求是异步的还是同步的更容易理解。
  将这些结合起来,通常会得到 下列所示的一行代码。

代码 4 getCustomerInfo() 方法的改进:

function getCustomerInfo() {
  var phone = document.getElementById("phone").value;
 var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
  request.open("GET", url, true);
}
   open() 是打开吗?
  我们对 open() 方法到底做什么没有达成一致。但它实际上并不是 打开一个请求。如果监控 XHTML/Ajax 页面及其连接脚本之间的网络和数据传递,当调用 open() 方法时将看不到任何通信。

  一旦设置好了 URL ,其他就简单了。多数请求使用 GET 就够了,再加上 URL ,这就是使用 open() 方法需要的全部内容了。

发送请求
  一旦用 open() 配置好之后,就可以发送请求了。幸运的是,发送请求的方法的名称要比 open() 适当,它就是 send() 。
   send() 只有一个参数,就是要发送的内容。但是在考虑这个方法之前,回想一下前面已经通过 URL 本身发送过数据了:

var url = "/cgi-local/lookupCustomer.jsp?phone=" + escape(phone);
  虽然可以使用 send() 发送数据,但也能通过 URL 本身发送数据。事实上, GET 请求(在典型的 Ajax 应用中大约占 80% )中,用 URL 发送数据要容易得多。如果需要发送安全信息或 XML ,可能要考虑使用 send() 发送内容(关于如何使用POST方式安全的发送数据,请参考我的另外一篇文章--POST方式发送ajax请求详解 )。如果不需要通过 send() 传递数据,则只要传递 null 作为该方法的参数即可。

代码 5 getCustomerInfo() 方法的进一步改进:

function getCustomerInfo() {
  var phone = document.getElementById("phone").value;
  var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
  request.open("GET", url, true);
  request.send(null);
}
指定回调方法
  现在我们所做的只有很少一点是新的、革命性的或异步的。必须承认, open() 方法中 “true” 这个小小的关键字建立了异步请求。但是 Ajax 和 Web 2.0 最大的秘密是什么呢?秘密就在于 XMLHttpRequest 的一个简单属性 onreadystatechange 。
  首先一定要理解这些代码中的流程(如果需要请回顾 代码 5 )。建立其请求然后发出请求。此外,因为是异步请求,所以 方法(例子中的 getCustomerInfo() )不会等待服务器。因此代码将继续执行,就是说,将退出该方法而把控制返回给表单。用户可以继续输入信息,应用程序不会等待服务器。
  这就提出了一个有趣的问题:服务器完成了请求之后会发生什么?答案是什么也不发生,至少对现在的代码而言如此!显然这样不行,因此服务器在完成通过 XMLHttpRequest 发送给它的请求处理之后需要某种指示说明怎么做。
  现在 onreadystatechange 属性该登场了。该属性允许指定一个回调函数。回调允许服务器(猜得到吗?)反向调用 Web 页面中的代码。它也给了服务器一定程度的控制权,当服务器完成请求之后,会查看 XMLHttpRequest 对象,特别是 onreadystatechange 属 性。然后调用该属性指定的任何方法。之所以称为回调是因为服务器向网页发起调用,无论网页本身在做什么。比方说,可能在用户坐在椅子上手没有碰键盘的时候 调用该方法,但是也可能在用户输入、移动鼠标、滚动屏幕或者点击按钮时调用该方法。它并不关心用户在做什么。 这就是称之为异步的原因:用户在一层上操作表单,而在另一层上服务器响应请求并触发 onreadystatechange 属性指定的回调方法。
   在 JavaScript 中引用函数
   JavaScript 是一种弱类型的语言,可以用变量引用任何东西。因此如果声明了一个函数 updatePage() JavaScript 也将该函数名看作是一个变量。换句话说,可用变量名 updatePage 在代码中引用函数。
 代码 6. 设置回调方法

 

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

网友点评