8.1 jQuery框架中的Ajax简介
Ajax技术的核心是XMLHTTPRequest对象
,该对象是Ajax实现的关键,发送异步请求、接收服务器端的响应以及执行回调等操作都是通过XMLHTTPRequest对象来完成的。
jQuery框架对Ajax操作进行了封装,在jQuery框架的Ajax模块中提供了很多方法用于网络编程。我们主要从Ajax网络请求、Ajax事件以及序列化等方面讲解。
8.2 jQuery框架中的Ajax网络请求
jQuery框架中为我们提供的发送网络请求方法主要有:
- load方法
- ajax方法
- get方法
- post方法
- getScript方法
- getJSON方法
① load方法
语法
jQ.load(url,[data],[callback])
参数
- url 资源的请求路径
- data 发送请求时提交的参数,支持查询字符串和JSON对象格式
- callback 加载完成的回调函数,3形参为:响应体 + 状态 + 请求对象
说明
该方法请求远程的资源,并插入到选中的jQ实例对象中。
注意
- 默认发送GET请求,如果传递参数(JSON对象)则发送POST请求。
- 支持对返回的数据进行筛选
代码示例
② ajax方法
语法
$.ajax(url,[settings]) | $.ajax(settings)
常用参数说明
- url 资源的请求路径
- data 发送请求时提交的参数,支持查询字符串和JSON对象格式
- async 是否异步发送网络请求
- cache 是否进行缓存处理
- context 指定回调函数中的this指针
- dataType 预期服务器返回的数据类型
- timeout 请求的超时时间
- beforeSend 请求发送前执行的回调函数
- complete 请求完成后执行的回调函数
- error 请求失败执行的回调函数
- success 请求成功执行的回调函数
说明
该方法是jQuery框架中最底层的Ajax实现,用于发送网络请求。
注意
- 最简单的情况下,$.ajax()可以不带任何参数直接使用。
- 所有的选项都可以通过$.ajaxSetup()函数来进行全局设置。
8.1 jQuery框架中的Ajax简介
Ajax技术的核心是XMLHTTPRequest对象
,该对象是Ajax实现的关键,发送异步请求、接收服务器端的响应以及执行回调等操作都是通过XMLHTTPRequest对象来完成的。
jQuery框架对Ajax操作进行了封装,在jQuery框架的Ajax模块中提供了很多方法用于网络编程。我们主要从Ajax网络请求、Ajax事件以及序列化等方面讲解。
8.2 jQuery框架中的Ajax网络请求
jQuery框架中为我们提供的发送网络请求方法主要有:
- load方法
- ajax方法
- get方法
- post方法
- getScript方法
- getJSON方法
① load方法
语法
jQ.load(url,[data],[callback])
参数
- url 资源的请求路径
- data 发送请求时提交的参数,支持查询字符串和JSON对象格式
- callback 加载完成的回调函数,3形参为:响应体 + 状态 + 请求对象
说明
该方法请求远程的资源,并插入到选中的jQ实例对象中。
注意
- 默认发送GET请求,如果传递参数(JSON对象)则发送POST请求。
- 支持对返回的数据进行筛选
代码示例
② ajax方法
语法
$.ajax(url,[settings]) | $.ajax(settings)
常用参数说明
- url 资源的请求路径
- data 发送请求时提交的参数,支持查询字符串和JSON对象格式
- async 是否异步发送网络请求
- cache 是否进行缓存处理
- context 指定回调函数中的this指针
- dataType 预期服务器返回的数据类型
- timeout 请求的超时时间
- beforeSend 请求发送前执行的回调函数
- complete 请求完成后执行的回调函数
- error 请求失败执行的回调函数
- success 请求成功执行的回调函数
说明
该方法是jQuery框架中最底层的Ajax实现,用于发送网络请求。
注意
- 最简单的情况下,$.ajax()可以不带任何参数直接使用。
- 所有的选项都可以通过$.ajaxSetup()函数来进行全局设置。
- 代码示例
③ get和post方法
语法
[1]$.get(url,[data],[callback],[type])
[2]$.post(url,[data],[callback],[type])
参数
- url 资源的请求路径
- data 发送请求时提交的参数
- callback 请求成功的回调函数
- type 服务器端返回内容的格式:包括xml、html、json、script等
GET和POST对比
- GET请求参数跟在URL后,POST请求参数作为请求体发送。
- GET请求对参数大小有限制,而POST请求理论上不受限制。
- GET请求的数据会被浏览器缓存,存在严重的安全性问题。
- 服务器端读取数据的方式不同。在PHP中,区分为$_GET和$_POST。
代码示例
④ getScript和getJson方法
jQuery框架提供了getScript和getJson方法来直接加载js文件和JSON数据
语法
[1] $.getScript(url,[callBack])
[2] $.getJson(url,[callBack])
说明
- getScript方法用于加载js文件,并自动执行。
- getJson方法用于加载JSON数据。
代码示例
8.3 jQuery框架中的Ajax事件方法
jQuery框架中除了提供上述方法来发送网络请求外,还提供了一些事件方法来对调用Ajax方法过程中的HTTP请求进行精细控制。通过jQuery提供的一些自定义全局函数,能够为各种与Ajax相关的事件注册回调函数。jQuery的Ajax全局事件方法如下:
[1] ajaxStart(callBack)
=>检测到网络请求开始发送会触发,1次
[2] ajaxStop(callBack)
=>检测到网络请求结束会触发,1次
[3] ajaxSend(callBack)
=>检测到网络请求开始发送会触发,N次
[4] ajaxComplete(callBack)
=>检测到网络请求结束会触发,N次
[5] ajaxError(callBack)
=> 网络请求失败会触发
[6] ajaxSuccess(callBack)
=> 网络请求成功会触发
8.4 jQuery框架中的序列化方法
在开发的时候,经常需要把表单中的数据作为网络请求的参数,如果一个一个的获取再拼接成查询字符串那么相当的麻烦,jQuery框架中为我们提供了两个对应的方法,可以方便解决该需求。
serialize方法
能够将DOM元素内容序列化为查询字符串。
serializeArray方法
可以将DOM元素序列化后返回JSON格式的数据。
代码示例