12.jQuery Ajax
来源:互联网 发布:网络主播工资表 编辑:程序博客网 时间:2024/06/07 14:16
Ajax 全称为:“Asynchronous JavaScript and XML”(异步JavaScript 和XML),它并不是JavaScript 的一种单一技术,而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax,可以无刷新状态更新页面,并且实现异步提交,提升了用户体验。
一.Ajax 概述
Ajax 这个概念是由Jesse James Garrett 在2005 年发明的。它本身不是单一技术,是一串技术的集合,主要有:
1.JavaScript,通过用户或其他与浏览器相关事件捕获交互行为;
2.XMLHttpRequest 对象,通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求;
3.服务器上的文件,以XML、HTML 或JSON 格式保存文本数据;
4.其它JavaScript,解释来自服务器的数据(比如PHP 从MySQL 获取的数据)并将其呈现到页面上。
由于Ajax 包含众多特性,优势与不足也非常明显。优势主要以下几点:
1.不需要插件支持(一般浏览器且默认开启JavaScript 即可);
2.用户体验极佳(不刷新页面即可获取可更新的数据);
3.提升Web 程序的性能(在传递数据方面做到按需放松,不必整体提交);
4.减轻服务器和带宽的负担(将服务器的一些操作转移到客户端);
而Ajax 的不足由以下几点:
1.不同版本的浏览器度XMLHttpRequest 对象支持度不足(比如IE5 之前);
2.前进、后退的功能被破坏(因为Ajax 永远在当前页,不会几率前后页面);
3.搜索引擎的支持度不够(因为搜索引擎爬虫还不能理解JS 引起变化数据的内容);
4.开发调试工具缺乏(相对于其他语言的工具集来说,JS 或Ajax 调试开发少的可怜)。
异步和同步
使用Ajax 最关键的地方,就是实现异步请求、接受响应及执行回调。异步与同步有什么区别呢?普通的Web
程序开发基本都是同步的,意为执行一段程序才能执行下一段,类似电话中的通话,一个电话接完才能接听
下个电话;而异步可以同时执行多条任务,感觉有多条线路,类似于短信,不会因为看一条短信而停止接受另
一条短信。Ajax 也可以使用同步模式执行,但同步的模式属于阻塞模式,这样会导致多条线路执行时又必须
一条一条执行,会让Web 页面出现假死状态,所以,一般Ajax 大部分采用异步模式。
二.load()方法
jQuery 对Ajax 做了大量的封装,使用起来也较为方便,不需要去考虑浏览器兼容性。对于
封装的方式,jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装
了第二层有三种方法:.load()、$.get()和$.post(),最高层是$.getScript()
和$.getJSON()方法。
.load()方法可以传三个参数:url(必须,请求html 文件的url 地址,参数类型为String)
、data(可选,发送的key/value 数据,参数类型为Object)、callback(可选,成功或失败
的回调函数,参数类型为函数Function)。
如果想让Ajax 异步载入一段HTML 内容,只需要一个HTML 请求的url 即可。
HTML:
<input type="button" value="异步获取数据" /><div id="box"></div>
jQuery:
$('input').click(function () { $('#box').load('test.html');});
如果想对载入的HTML 进行筛选,那么只要在url 参数后面跟着一个选择器即可。
//带选择器的url$('input').click(function () { $('#box').load('test.html .my');});
如果是服务器文件,比如.jsp。一般不仅需要载入数据,还需要向服务器提交数据,那么就可以使用第二个可选参数data。向服务器提交数据有两种方式:get 和post。
//不传递data,则默认get 方式$('input').click(function () { $('#box').load('test.jsp?url=xxx');});
//传递data,则为post 方式$('input').click(function () { $('#box').load('test.jsp', { url : 'xxx' });});
在Ajax 数据载入完毕之后,就能执行回调函数callback,也就是第三个参数。回调函数也可以传递三个可选参数:responseText(请求返回)、textStatus(请求状态)、XMLHttpRequest(XMLHttpRequest 对象)。
$('input').click(function () { $('#box').load('test.jsp', { url : 'xxx' }, function (response, status, xhr) { alert('返回的值为:' + response + ',状态为:' + status + ', 状态是:' + xhr.statusText); });});
注意:status 得到的值,如果成功返回数据则为:success,否则为:error。XMLHttpRequest对象属于JavaScript 范畴,可以调用一些属性如下:
说明
responseText
作为响应主体被返回的文本
responseXML
如果响应主体内容类型是"text/xml"或"application/xml",
则返回包含响应数据的XML DOM 文档
status
响应的HTTP 状态
statusText
HTTP 状态的说明
状态字符串
说明
200
OK
服务器成功返回了页面
400
Bad Request
语法错误导致服务器不识别
401
Unauthorized
请求需要用户认证
404
Not found
指定的URL 在服务器上找不到
500
Internal Server Error
服务器遇到意外错误,无法完成请求
503
ServiceUnavailable
由于服务器过载或维护导致无法完成请求
//使用$.get()异步返回html 类型$('input').click(function () { $.get('test.jsp', { url : 'xxx' }, function (response, status, xhr) { if (status == 'success') { $('#box').html(response); } }) //type 自动转为html});
//使用$.get()异步返回xml$('input').click(function () { $.get('test.xml', function (response, status, xhr) { $('#box').html($(response).find('root').find('url').text()); }); //type 自动转为xml});
//使用$.get()异步返回json$.get('test.json', function (response, status, xhr) { alert(response[0].url);});
$.post()方法的使用和$.get()基本上一致,它们之间的区别也比较隐晦,基本都是背后的不同,在用户使用上体现不出。具体区别如下:
//使用$.post()异步返回html$.post('test.jsp', { url : 'xxx'}, function (response, status, xhr) { $('#box').html(response);});
jQuery 提供了一组用于特定异步加载的方法:$.getScript(),用于加载特定的JS 文件;$.getJSON(),用于专门加载JSON 文件。
有时希望能够特定的情况再加载JS 文件,而不是一开始把所有JS 文件都加载了,这时使用$.getScript()方法。
//点击按钮后再加载JS 文件$('input').click(function () { $.getScript('test.js');});$.getJSON()方法是专门用于加载JSON 文件的,使用方法和之前的类似。$('input').click(function () { $.getJSON('test.json', function (response, status, xhr) { alert(response[0].url); });});
五.$.ajax()
$.ajax()是所有ajax 方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。这个方法只有一个参数,传递一个各个功能键值对的对象。
类型
说明
url
String
发送请求的地址
type
String
请求方式:POST 或GET,默认GET
timeout
Number
设置请求超时的时间(毫秒)
data
dataType
String
返回的数据类型,比如html、xml、json 等
beforeSend
Function
发送请求前可修改XMLHttpRequest 对象的函数
complete
Function
请求完成后调用的回调函数
success
Function
请求成功后调用的回调函数
error
Function
请求失败时调用的回调函数
global
Boolean
默认为true,表示是否触发全局Ajax
cache
Boolean
DOM
String
Boolean
Boolean
Function
用来筛选响应数据的回调函数。
ifModified
Boolean
String
String
在HTTP 认证请求中使用的用户名
password
String
在HTTP 认证请求中使用的密码
scriptCharset
String
Function
用来提供XHR 实例自定义实现的回调函数
traditional
Boolean
//$.ajax 使用$('input').click(function () { $.ajax({ type : 'POST', //这里可以换成GET url : 'test.jsp', data : { url : 'xxx' }, success : function (response, stutas, xhr) { $('#box').html(response); } });});
注意:对于data 属性,如果是GET 模式,可以使用三种之前说所的三种形式。如果是POST 模式可以使用之前的两种形式。
六.表单序列化
Ajax 用的最多的地方莫过于表单操作,而传统的表单操作是通过submit 提交将数据传输到服务器端。如果使用Ajax 异步处理的话,需要将每个表单元素逐个获取才方能提交。这样工作效率就大大降低。
//常规形式的表单提交$('form input[type=button]').click(function () { $.ajax({ type : 'POST', url : 'test.jsp', data : { user : $('form input[name=user]').val(), email : $('form input[name=email]').val() }, success : function (response, status, xhr) { alert(response); } });});
使用表单序列化方法.serialize(),会智能的获取指定表单内的所有元素。这样,在面对大量表单元素时,会把表单元素内容序列化为字符串,然后再使用Ajax 请求。
//使用.serialize()序列化表单内容$('form input[type=button]').click(function () { $.ajax({ type : 'POST', url : 'test.jsp', data : $('form').serialize(), success : function (response, status, xhr) { alert(response); } });});
.serialize()方法不但可以序列化表单内的元素,还可以直接获取单选框、复选框和下拉列表框等内容。
//使用序列化得到选中的元素内容$(':radio').click(function () { $('#box').html(decodeURIComponent($(this).serialize()));});
除了.serialize()方法,还有一个可以返回JSON 数据的方法:.serializeArray()。这个方法可以直接把数据整合成键值对的JSON 对象。
$(':radio').click(function () { console.log($(this).serializeArray()); var json = $(this).serializeArray(); $('#box').html(json[0].value);});
有时,可能会在同一个程序中多次调用$.ajax()方法。而它们很多参数都相同,这个时候可以使用jQuery 提供的$.ajaxSetup()请求默认值来初始化参数
$('form input[type=button]').click(function () { $.ajaxSetup({ type : 'POST', url : 'test.jsp', data : $('form').serialize() }); $.ajax({ success : function (response, status, xhr) { alert(response); } });});
在使用data 属性传递的时候,如果是以对象形式传递键值对,可以使用$.param()方法将对象转换为字符串键值对格式。
var obj = {a : 1, b : 2, c : 3};var form = $.param(obj);alert(form);
注意:使用$.param()将对象形式的键值对转为URL 地址的字符串键值对,可以更加稳定准确的传递表单内容。因为有时程序对于复杂的序列化解析能力有限,所以直接传递obj对象要谨慎。
- 12.jQuery Ajax
- jquery ajax
- jquery ajax
- AJAX jquery
- ajax jquery
- AJAX + jQuery
- jquery.ajax
- Jquery Ajax
- jquery ajax
- Jquery+ajax
- jquery ajax
- jquery ajax
- jquery ajax
- jQuery ajax
- JQuery ajax
- jquery ajax
- jquery ajax
- jQuery Ajax
- poj 1422 hungary算法(伞兵降落)
- html标签中dl dd这个标签的作用
- 陀螺原则
- HDU-2096-分拆素数
- string 1
- 12.jQuery Ajax
- 9 Handling Errors
- 黑马程序员-面向对象总结(2)
- STL--F - Sequence(n*m->求最小的前m个和)
- 10 Specifying an Endpoint Configurator Class
- HDU-2049【递推】
- Android ActionBar 示例
- 杭电1027
- C++中cin、cin.get()、cin.getline()、getline()、gets()等函数的用法