jQuery与Ajax的应用——《锋利的jQuery》(第2版)读书笔记3

第6章 jQuery与Ajax的应用

jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法。

1load()方法

(1)载入HTML文档

load()方法是jQuery中最简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中。它的结构为:

load(url [, data] [, callback])

       参数说明:

       url:请求HTML页面的URL地址;

       data(可选):发送至服务器的key/value数据,Object类型;

       callback(可选):请求完成时的回调函数,无论请求成功或失败。 

(2)筛选载入的HTML文档

通过为URL参数指定选择符,可以很方便地从加载过来的HTML文档里筛选出所需要的内容。load()方法的URL参数的语法结构为: ”url selector” 。注意,URL和选择器之间有一个空格。

(3)传递方式

load()方法的传递方式根据参数data来自动指定。如果没有参数传递,则采用GET方式传递;反之,则会自动转换为POST方式。

(4)回调函数

对于必须在加载完成后才能继续的操作,load()方法提供了回调函数(callback),该函数有3个参数,分别代表请求返回的内容、请求状态和XMLHttpRequest对象。

2、$.get()方法和$.post()方法 

load()方法通常用来从Web服务器上获取静态的数据文件。在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是$.ajax()方法)。

 

$.get()方法使用GET方式来进行异步请求。它的结构为:

$.get(url [, data] [, callback] [, type])

       参数说明:

url:请求的HTML页的的URL地址

data:发送至服务器的 key/value 数据会作为QueryString附加到请求url中。

callback:载入成功时回调函数。

type:服务器端返回内容格式,包括xml, html, script, json, text, _default。

 

       如果服务器端接收到传递的data数据并成功返回,那么就可以通过回调函数将返回的数据显示到页面上。

       $.get()方法的回调函数只有两个参数,代码如下:

       function (data, textStatus){

              //data    返回的内容,可以是XML文档、JSON文件、HTML片段等等

              //textStatus     请求状态:success、error、notmodified、timeout 4种

       }

       在不需要与其他应用程序共享数据的时候,使用HTML片段来提供返回数据一般来说是最简单的;如果数据需要重用,那么JSON文件是不错的选择,它在性能和文件大小方面具有优势;而当远程应用程序未知时i,XML文档是明智的选择,它是Web服务域的“世界语”。

 

       $.post()方法和$.get()方法的结构和使用方式相同,不过它们之间仍有些区别。

 

3、$.getScript()方法和$.getJson()方法

       jQuery提供了$. getScript()方法来直接加载.js文件。

       $.getJSON()方法用于加载JSON文件。

4、$.ajax()方法

       $.ajax()方法是jQuery最底层的Ajax实现。

      它的结构为:

              $.ajax(options)

       该方法只有1个参数,但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息,参数key/value的形式存在,所有参数都是可选的。

5、序列化元素

serialize()方法作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求。

serializeArray()方法也作用于一个jQuery对象,不同的是,它是将DOM元素序列化后,返回JSON格式的数据,然后可以使用$.each()函数对数据进行迭代输出。

$.param()方法用来对一个数组或对象按照key/value进行序列化。

6、jQuery中的Ajax全局事件

  • ajaxComplete(callback)  Ajax请求完成时执行的函数;
  • ajaxError(callback)  Ajax请求发生错误时执行的函数,捕捉到的错误可以作为最后一个参数传递;
  • ajaxSend(callback)  Ajax请求发送前执行的函数;
  • ajaxStart(callback)  Ajax请求开始时执行的函数;
  • ajaxStop(callback)  Ajax请求结束时执行的函数;
  • ajaxSuccess(callback)  Ajax请求成功时执行的函数。

这些方法都是全局的方法,因此无论创建它们的代码位于何处,只要有Ajax请求发生,就会触发它们。

 

posted @ 2016-04-03 08:18  浅岸  阅读(225)  评论(0编辑  收藏  举报