jQuery执行请求demo

Ajax教程地址

4.3.2　执行GET请求

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

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

 

这个联合数组的属性将自动被转成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，一个用来存储各个参数的联合数组，以及一个负责接收返回数据的回调函数。例如：

与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代码能够大大简化：

 

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

 

在这里只需要修改一行，就可以彻底去掉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中是一个较低层次的操作，因此success()和error()函数必须考虑XHR对象中与请求相关的额外数据，包括服务器端返回的数据。

4.3.8　ajaxStart()和ajaxStop()方法

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

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

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

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