JQUERY中的AJAX应用
Ajax介绍
1.什么是Ajax
Ajax全称为"Asynchronous JavaScript and XML",是由客户端js所发起的http请求代号.
实现无刷新的数据更新界面效果.
2.Ajax原理
运用XHTML+CSS来表达信息;
运用JavaScript操作DOM(Document Object Model)运行动态效果;
运用XML和XSLT进行数据交换及操作;
运用XMLHttpRequest为Agent与网页服务器进行异步数据交换;
运用JavaScript技术实现
3.Ajax的优点
1.不需要任何浏览器插件,在任何支持JavaScript的浏览器上运行
2.优秀的用户体验
3.提高Web程序的性能
4.减轻服务器和带宽的负担
4.Ajax的缺点
1.它可能破坏浏览器后退按钮的正常行为
2.对搜索引擎的支持的不足
3.开发和调试工具的缺乏
4.手持设备支持性差
5.XMLHttpRequest对象
XMLHttpRequest对象的属性:
1.readyState:HTTP请求的状态,这个状态的属性值从0增加到4.
| 状态 | 名称 | 描述 |
| 0 | Uninitialized | 初始化状态.XMLHttpRequest对象已创建或被abort()方法重置. |
| 1 | Open | open()方法已调用,但是send()方法未调用.请求还没有被发送. |
| 2 | Sent | Send()方法已调用,HTTP请求已发送到Web服务器.未接受到响应. |
| 3 | Receiving | 所有响应头部都已经接收到.响应体开始接收但未完成. |
| 4 | Loaded | HTTP响应已经完全接收. |
2.responseText:目前为止从服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串.
3.responseXML:对请求的响应,解析为XML并作为Document对象返回.
4.status:由服务器返回的HTTP状态代码.
5.statusText:对应status状态的状态名称.
XMLHttpRequest对象的方法:
1.abort():取消当前响应,关闭连接并且结束任何未决的网络活动.把XMLHttpRequest对象的readyState属性重置为0的状态,并且取消所有未决的网络活动.
2.getAllResponseHeaders():把HTTP响应头部作为未解析的字符串返回.如果readyState小于3,这个方法返回null.
3.getResponseHeader():返回指定的HTTP响应头部的值.
4.open():初始化HTTP请求参数,例如URL和HTTP方法,但是并不发送请求.
语法:
open(method,url,async,username,password)
参数说明:
method:是用于请求的HTTP方法.
url:参数是请求的主体.
Async:参数指示请求使用应该异步地执行.如果这个参数是false,请求是同步的.
username和password参数是可选的,为url所需的授权提供认证资格.
5.send():发送HTTP请求,使用传递给open()方法的参数,以及传递给该方法的可选请求体.
6.setRequestHeader():向一个打开但未发送的请求设置或添加一个HTTP请求.
jQuery中的Ajax
1.load()方法
load()方法是jQuery中最为简单和常用的Ajax方法,通常用来载入远程HTML代码并将加载的HTML代码插入DOM中.
语法:
load(url[, data][, callback]);
参数说明:
url:表示请求的HTML页面的URL
data(可选):发送到服务器端的key/value数据(一般用json格式),为object类型
callback(可选):请求完成(无论成功或失败)时的回调函数
1)load()加载指定的HTML文件
2)load()可筛选载入的HTML文档,用法是:load(url selector).
3)传递方式.load()方法的传递方式根据参数data来自动指定.如果没有参数传递,则采用GET方式传递,反之,则会自动转换为POST方式.
4)回调参数.对于必须在加载完成后才能继续的操作,load()方法提供了回调函数(callback),该函数有3个参数,分别代表请求返回的内容,请求状态和XMLHttpRequest对象.
load()方法中.无论Ajax请求是否成功,只要当请求完成(complete)后,回调函数(callback)就被触发.
2.jQuery.get()方法与jQuery.post()方法
1.jQuery.get()方法
$.get()方法使用GET方式来进行异步请求.
语法:
$.get(url[, data][, callback][, type])
参数说明:
url:待载入页面的URL地址;
data:(可选)待发送Key/value参数;
callback:(可选)载入成功时回调函数.
type:(可选)返回内容格式, xml,html,script,json,text,_default.
$.get()方法的回调函数:
//回调函数 function(data, textStatus{ //代码 }
参数说明:
data:参数代表请求返回的内容,
textStatus:参数代表请求状态,对应有success,error,notmodified,timeout等四种状态.
2.jQuery.post()方法
$.post()方法通过远程HTTP POST请求载入信息.
语法:
$.post(url[, data][, callback][, type])
参数说明:
url:待载入页面的URL地址;
data:(可选)待发送Key/value参数;
callback:(可选)载入成功时回调函数.
type:(可选)返回内容格式,xml,html,script,json,text,_default.
GET提交方法与POST提交方法存在如下的区别:
GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器.
GET方式对传输的数据有大小限制(通常不能大于2KB),而使用POST方式传递的数据量要比GET方式大得多(理论上不受限制).
GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码.在某种情况下,GET方式会带来严重的安全性问题,而POST方式相对来说安全性要高.
GET方式和POST方式传递的数据在服务器端的获取也不相同.在ASP.NET中,GET方式的数据可以用Request.QueryString获取,而POST方式可以用Request.Form获取,两种方式也都可以用Request.Params来获取.
3.jQuery.getScript()方法
通过HTTP GET请求载入并执行一个JavaScript文件.
语法:
$.getScript(url,callback)
参数说明:
url:待载入JS文件地址.
callback(可选):成功载入后回调的函数.
4.jQuery.getJSON()方法
$.getJSON()方法用于加载JSON文件,参数和使用方法与$.getScript()方法的用法相同.
3.jQuery.ajax()方法
$.ajax()方法是jQuery底层AJAX实现.简单易用的高层实现是$.get(),$.post()等.
结构:
$.ajax(options)
该方法只有一个参数,参数以key/value的形式存在,所有参数都是可选的,常用参数见表:
| 参数名称 | 参数类型 | 参数说明 |
| url | string | (默认:当前页地址)发送请求的地址 |
| type | string | (默认:"GET") 请求方式 ("POST"或"GET"),默认为"GET".注意:其它HTTP请求方法,如PUT和DELETE也可以使用,但仅部分浏览器支持. |
| timeout | number | 设置请求超时时间(毫秒).此设置将覆盖全局设置. |
| data | object,string |
发送到服务器的数据.将自动转换为请求字符串格式.GET请求中将附加在URL后.查看processData选项说明以禁止此自动转换. 必须为key/value格式.如果为数组,jQuery将自动为不同值对应同一个名称. |
| datatype | string |
预期服务器返回的数据类型.如果不指定,jQuery将自动根据HTTP包MIME信息来智能判断,比如XML MIME类型就被识别为XML.在1.4中,JSON就会生成一 个JavaScript对象,而script则会执行这个脚本.随后服务器端返回的数据会根据这个值解析后,传递给回调函数. |
| beforeSend(XHR) | function |
发送请求前可修改XMLhttpRequest对象的函数,如添加自定义HTTP头.XMLHttpRequest对象是唯一的参数. 这是一个Ajax事件.如果返回false可以取消本次ajax请求. |
| success | function | 请求成功后的回调函数,参数:由服务器端返回,并根据dataType参数进行处理后的数据;描述状态的字符串,Ajax事件. |
| error | function | (默认:自动判断(xml或html))请求失败时调用此函数.有以下三个参数:XMLHttpRequest对象,错误信息,(可选)捕获的一场对象 |
| complete(XHR, TS) | function | 请求完成后回调函数(请求成功或失败之后均调用).参数XMLHttpRequest对象和一个描述成功请求类型的字符串. |
| async | boolean |
(默认:true)默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为false. 注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行. |
| cache | boolean | (默认:true,dataType为script和jsonp时默认为false) jQuery1.2新功能,设置为false将不缓存此页面. |
4.序列化元素
1.serialize()方法:序列表表格内容为字符串. 能够将DOM元素内容序列化为字符串,用于Ajax请求.
2.serializeArray()方法:将DOM元素序列化后,返回JSON对象格式的数据,需要使用插件或者第三方库进行字符串化操作.
3.$.param()方法:serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化.
5.jQuery中的Ajax全局事件
| 方法名称 | 方法说明 |
| ajaxStart(callback) | AJAX请求开始的时候 |
| ajaxStop(callback) | AJAX请求结束后 |
| ajaxSend(callback) | AJAX请求发送前执行的函数 |
| ajaxError(callback) | AJAX请求发生错误时执行的函数 |
| ajaxSuccess(callback) | AJAX请求成功时执行的函数 |
| ajaxComplete(callback) | AJAX请求完成时执行的函数 |
