jQuery执行请求demo

时间:2023-03-09 02:02:02
jQuery执行请求demo

Ajax教程地址

4.3.2 执行GET请求

使用jQuery来执行GET请求有多种可选的方法。最简单的方法是使用$.get(),其参数是一个URL和一个回调函数:该回调函数有两个参数:一个是从服务器端返回的文本,一个是状态字符串(success或error),比如:

jQuery执行请求demo

也可以用一个由"名称-值"对组成的联合数组来代替URL中的查询字符串:

jQuery执行请求demo 

这个联合数组的属性将自动被转成URL编码格式并添加到查询字符串中,从而使开发人员无需关注这一细节。

在jQuery中也有一些特定的GET方法,每个都是针对不同目的设计的:

$.getIfModified(),仅当所请求的资源自上次请求之后修改过才执行GET请求,其参数与$.get()相同。

$.getJSON(),执行一个GET请求,并将JSON表达式转成一个JavaScript对象。除了回调函数的参数将是一个JavaScript对象而非文本之外,其参数与$.get()是相同的。JSON将在第8章讨论。

$.getScript(),执行一个GET请求,并且期望响应的是一段JavaScript代码。该代码将在响应的基础上执行。除了回调函数不再接收任何信息之外,其参数与$.get()是相同的。

4.3.4 $.post()方法

在jQuery中,POST请求将通过$.post()方法来发送。该方法的参数与$.get()方法相同:一个URL,一个用来存储各个参数的联合数组,以及一个负责接收返回数据的回调函数。例如:

jQuery执行请求demo

与GET请求类似,jQuery将POST参数转成联合数据格式,然后将该数据作为请求体发送出去。

$.post()方法的第二个和第三个参数都是可选的;不过没有任何理由让我们发送一个不带数据(第二个参数)的POST请求。另外建议仍然提供一个回调函数,用来对响应的状态进行监控

4.3.6 load()方法

在前两个例子中只是简单地将服务器返回的数据填充到HTML元素中,只是一个常用的Ajax模式。Prototype程序库提供的Ajax.Updater方法简化了该模式;而jQuery中的load()方法也有相同的作用。

这个load()方法能够在jQuery中的任何元素或元素组上调用,并且有两种模式:GET和POST。要使用GET模式,需要提供一个URL(包括查询字符串)以及一个可选的回调函数;对于POST模式而言,则需要提供一个URL、一个联合数组以及一个可选的回调函数。如果将前面那个GET示例改为使用load()方法,则达到预期效果所需的JavaScript代码能够大大简化:

jQuery执行请求demo 

在这个示例中,第一步是获得一个对divCustomerInfo的引用。当完成该操作后,调用load()方法只需一个URL参数即可。在此回调函数并不是必需的,因为默认的行为是将返回的数据放到<div/>元素中。注意这时已经不再需要displayCustomerInfo()函数了,这也大大地减少了总的代码量。

jQuery执行请求demo 

在这里只需要修改一行,就可以彻底去掉saveResult()函数。这段代码现在首先获取一个对divStatus的引用,然后调用load()方法。由于第二个参数是一个联合数组(oBody),而load()方法将假设该请求是POST类型的。同样,在此也不再需要回调函数了。

这个load()方法为在某元素中装载内容提供了一种简单的方法,虽然失去了对成功或失败情况进行处理的*

4.3.7 $.ajax()方法

在本小节中所讨论的所有其他方法都处于较高的层面,它们为开发人员隐藏了大量的通信细节。所有这些方法有一个共同之处:在其底层,都是使用$.ajax()方法来启动和处理请求的。该方法提供了对请求和响应更精细的控制方法。

$.ajax()方法只有一个参数,即包含各种选项的联合数组,与Prototype的Ajax.Request构造函数很相似。该选项对象由以下属性组成:

Type,请求的类型,GET或POST。

Url,请求发往的URL。

Data,一个存储已编码数据的字符串。仅用于POST请求。

DataType,预期作为响应的数据类型,有"script"、"xml"、"html"或"json"。如果指定的是"script",那么返回的数据将作为JavaScript载入到页面中。

Success(),当接收到成功响应时将要调用的函数。成功响应的状态是2xx或304。该函数有两个参数:XHR对象和一个状态字符串。

Error(),当请求发生错误时将调用的函数。只要不是成功的响应就说明遇到了错误。该函数有两个参数:XHR对象和一个状态字符串。

Error(),当响应接收完成时将调用的函数;不管是成功响应还是不成功的响应。该函数有两个参数:XHR对象和一个状态字符串。

因此如果使用$.ajax()重写前面的GET示例,那么requestCustomerInfo()函数将改为:

jQuery执行请求demo 

由于这在jQuery中是一个较低层次的操作,因此success()和error()函数必须考虑XHR对象中与请求相关的额外数据,包括服务器端返回的数据。

4.3.8 ajaxStart()和ajaxStop()方法

Prototype并不是唯一能够提供针对Ajax请求的全局事件处理函数的程序库;jQuery中通过ajaxStart()和ajaxStop()两个方法提供了类似的功能。当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法。同样,ajaxStop()方法则是在所有Ajax请求都完成时调用。这些方法的参数都是一个函数,这个函数将在事件发生时被调用。

使用这些方法的每一步是获取一个页面元素的引用。然后就可以在这个元素上调用ajaxStart()和ajaxStop()方法了。例如,对于一个ID为divStatus的<div/>元素,可以使用如下所示的代码:

jQuery执行请求demo

这段代码将在divStatus上调用这两个方法。由于ajaxStart()和ajaxStop()方法将返回jQuery对象,二者可以连接在一起。由于是divStatus本身应当被更新,因此在这个函数中使用$(this)对象和html()方法来设置状态文本。

http://book.51cto.com/art/200812/99812.htm