jQuery执行请求demo
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/>元素,可以使用如下所示的代码:
posted on 2013-11-06 12:09 andydaopeng 阅读(610) 评论(0) 编辑 收藏 举报