锋利的jQuery第2版学习笔记67章

Posted 2020-07-04 平凡世界平凡人

第6章，jQuery与Ajax的应用

Ajax的优势和不足

Ajax的优势

1、不需要插件支持

2、优秀的用户体验

3、提高Web程序的性能

4、减轻服务器和带宽的负担

Ajax的不足

1、浏览器对XMLHttpRequest对象的支持度不足

2、破坏浏览器前进、后退按钮的正常功能

3、对搜索引擎的支持的不足

4、开发和调试工具的缺乏

Ajax的XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键----发送异步请求、接收响应及执行回调都是通过它来完成的。

IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest对象的，而其他浏览器的XMLHttpRequest对象是window的子对象

jQuery中的Ajax

1、load()方法

语法结构：load(url [,data] [,callback])

load()方法参数解释

参数	类型	说明
url	String	请求html页面的url地址
data（可选）	Object	发送至服务器的key/value数据
callback（可选）	Function	请求完成时的回调函数，无论请求成功或失败

筛选载入的HTML文档

$(‘#resText‘).load("test.html .para");     // 载入test.html页面中class为“para”的内容

传递方式

load()方法会根据参数data来自动指定，有参数传递为POST方式，无参数则为GET方式

回调函数

有3个参数：1、请求返回的内容；2、请求的状态；3、XMLHttpRequest对象

注：通常用于从Web服务器获取静态文件

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

（1）$.get()使用GET方式来进行异步请求

语法结构：$.get(url [,data] [,callback] [,type]);

$.get()方法参数解释

参数	类型	说明
url	String	请求的HTML页面的url地址
data（可选）	Object	发送至服务器的key/value数据会附加在请求URL中
callback（可选）	Function	载入成功时回调函数，自动将请求结果和状态传递给该方法
type（可选）	String	服务器返回内容的格式，xml，html，script，json，text，_default

回调函数

只有两个参数：1、data，返回的内容，xml文档，json文件等；2、请求状态：success、error、notmodified、timeout

注：只有当数据成功返回(success)才被调用

（2）$.post()使用POST方式进行异步请求

GET与POST的区别

<1>GET请求会将参数跟在URL后进行传递，POST则是作为HTTP实体内容发送个Web服务器。

<2>GET对传输数据有大小限制（通常不大于2kb），而POST则要比GET多的多（理论上不限制）

<3>GET请求会被浏览器缓存下来，在某种情况下会有严重的安全性问题，而POST则可避免

<4>GET与POST传递的数据在服务器端获取方式也不相同

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

（1）$.getScript()

使用$.getScript()方法加载一个js文件就跟加载一个HTML页面一样简单，而且不需要对js文件进行处理，js文件会自动执行

回调函数

会在js加载成功后执行

（2）$.getJson()

$.getJson()用于加载json文件

$.each()方法，jQuery中用于遍历对象和数组，接受两个参数：1、数组或对象；2、回调函数（接受两个参数：1、对象成员或数组索引；2、对应变量或内容）

4、$.ajax()方法

语法结构：$.ajax(options)

options对象中，参数以key/value形式存在，所有参数都是可选

$.ajax()方法有大量的参数，需要另查资料，之后再补充

序列化元素

1、serialize()方法

作用于一个jQuery对象，能够将DOM元素内容序列化为字符串，用于Ajax请求

注：参数传递时要注意将参数进行编码，即使用URI编码，若不希望编码带来麻烦，可以使用serialize()方法，它会自动编码

2、serializeArray()方法

将DOM序列化后，返回json格式数据

3、$.param()方法

serialize()方法核心，用以对一个对象按照key/value进行序列化

jQuery中的Ajax全局事件

当Ajax请求开始时，触发ajaxStart()方法的回调函数；当Ajax请求结束时，触发ajaxStop()方法的回调函数

其他的全局方法

方法名称	说明
ajaxComplete(callback)	Ajax请求完成时执行函数
ajaxError(callback)	Ajax请求发生错误时执行函数，捕捉到的错误可以作为最后一个参数传递
ajaxSend(callback)	Ajax请求发送前执行的函数
ajaxSuccess(callback)	Ajax请求成功时执行函数

第7章，jQuery插件的使用和写法

jQuery表单验证插件----Validation

下载地址：

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

API：

http://docs.jquery.com/Plugins/Validatioin

jQuery表单插件----Form

核心方法：ajaxForm()和ajaxSubmit()

下载地址：

http://jquery.malsup.com/form/#download

ajaxForm()和ajaxSubmit()都可以接受0或1个参数，当为单个参数时，既可以是回调函数，也可以是options对象，通过传递options对象，使它们对表单拥有更多的控制权

模态窗口插件----SimpleModal

下载地址：

http://www.ericmmartin.com/projects/simplemodal/

SimpleModal提供了两种方法调用模态窗口：

1、作为链式jQuery函数：

$("#elementid").modal();

2、作为一个单独的函数：

$.modal("<div><h1>SimpleModal</h1></div>");

两种方法都可接收一个可选参数：options

$("#elementid").modal({options});
$.modal("<div><h1>SimpleModal</h1></div>",{options});

API:

http://www.ericmmartin.com/projects/simplemodal/

管理Cookie的插件----Cookie

下载地址：

http://github.com/carhartl/jquery-cookie

jQuery UI插件

下载地址：

http://ui.jquery.com/download

http://jqueryui.com/download

编写jQuery插件

1、插件种类
（1）封装对象方法的插件

（2）封装全局函数的插件

（3）选择器插件

2、插件基本要点

（1）jQuery插件推荐命名jquery.[插件名].js

（2）所有对象方法都应当附加到jQuery.fn对象上，所有全局函数都应当附加到jQuery对象本身上

（3）在插件内部，this指向当前通过选择器获取的jQuery对象

（4）可以通过this.each来遍历所有元素

（5）所有方法或函数插件都应当以分号结尾

（6）插件应返回一个jQuery对象，以保证插件可链式操作

（7）避免在插件内部使用$作为jQuery对象的别名，应使用完整的jQuery来表示，避免冲突，当然，也可以使用闭包来回避这种问题

jQuery插件机制

jQuery提供了两个用于扩展jQuery功能的方法，即jQuery.fn.extend()和jQuery.extend()

jQuery.fn.extend()用于扩展第一类插件，jQuery.extend()用于扩展后两种插件