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

Posted 2020-07-03 浅岸

第6章 jQuery与Ajax的应用

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

1、load()方法

（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请求发生，就会触发它们。