jQuery—Ajax使用
来源:互联网 发布:单片机跑马灯实验报告 编辑:程序博客网 时间:2024/05/29 23:48
AJAX是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新[百度百科]
** XMLHttpRequest对象
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
常用属性:
readyState 属性:存有服务器响应的状态信息。每当 readyState改变时,onreadystatechange函数就会被执行。
状态 描述
0 请求未初始化(在调用 open()之前)
1 请求已提出(调用 send()之前)
2 请求已发送(这里通常可以从响应得到内容头部)
3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
4 请求已完成(可以访问服务器响应并使用它)
responseText 属性:可以通过 responseText属性来取回由服务器返回的数据。
Status属性:服务器返回的http状态码。200表示“成功”,404表示“未找到”,500表示“服务器内部错误”等。
statusText属性:服务器返回状态的文本信息。
responseXML属性:服务器响应的XML内容对应的DOM对象
** load()方法
.load()方法可以参数三个参数:url(必须,请求 html 文件的 url地址,参数类型为String)、data(可选,发送的 key/value 数据,参数类型为Object)、callback(可选,成功或失败的回调函数,参数类型为函数 Function)
// post方式发送 url | data | callback function
$("input").eq(1).click(function(e){
$("div").load("/jquery/Ajax_load",{
url:'send url',
},function(response, status, xhr){//返回值状态
/*
XMLhttpRequest对象属于JavaScript范畴
属性:
responseText:返回的主题
responseXML:返回包含数据的XML DOM文档
status:响应的HTPP状态
statusText:HTTP状态说明
*/
// alert("返回值:"+response+" |返回状态:"+status);
alert("responseText: "+xhr.responseText
+"responseXML: "+xhr.responseXML
+"status: "+xhr.status
+"statusText: "+xhr.statusText);
});
});
** $.get()和$.post()
.load()方法是局部方法,因为他需要一个包含元素的 jQuery对象作为前缀。而$.get()和
$.post()是全局方法,无须指定某个元素。对于用途而言,.load()适合做静态文件的异步获取,而对于需要传递参数到服务器页面的,$.get()和$.post()更加合适。
$.get()方法有四个参数,前面三个参数和.load()一样,多了一个第四参数 type,即服务
器返回的内容格式:包括 xml、html、script、json、jsonp和 text。
/*
get: 地址url, 数据data,回调函数,返回类型
返回类型: html, json, xml, text等
*/
$('input').eq(0).click(function(){
$.get('/jquery/Ajax_load',{data:"some request data"},function(response,status,xhr){
if(status=='success'){
$("div").html(response);
}else{
alert("responseText: "+xhr.responseText
+"status: "+xhr.status
+"statusText: "+xhr.statusText);
}
},'html');
});
$.post()方法和$.get()方法一样
/* post */
$('input').eq(1).click(function(){
$.post('/jquery/Ajax_load',{data:'use ajax send data'},function(response,status,xhr){
if(status=='success'){
$("div").html(response);
}else{
alert("responseText: "+xhr.responseText
+"status: "+xhr.status
+"statusText: "+xhr.statusText);
}
});
});
** $.getScript()和$.getJSON()
jQuery 提供了一组用于特定异步加载的方法:$.getScript(),用于加载特定的 JS 文件;
$.getJSON(),用于专门加载 JSON文件。
** $.ajax()
$.ajax()是所有 ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。
这个方法只有一个参数。
/*
$.ajax
常用参数:
url 发送请求的地址
type 请求方式get或者post
timeout 请求超时时间
data 发送到服务器的数据
dataType 返回的数据类型
complate 请求完成后调用的回调函数
success 请求成功后调用的回调函数
error 请求失败后调用的回调函数
contentType 指定请求内容的类型
dataFilter 用来筛选响应数据的回调函数
......
*/
$('input').eq(2).click(function(){
$.ajax({
url:'/jquery/Ajax_load',
type:'post',
data:{data:'use ajax send data'},
success:function(response,status,xhr){
if(status=='success'){
$("div").html(response);
}else{
alert("responseText: "+xhr.responseText
+"status: "+xhr.status
+"statusText: "+xhr.statusText);
}
}
});
});
** 表单序列化
使用表单序列化方法.serialize(),会智能的获取指定表单内的所有元素。这样,在面对大量表单元素时,会把表单元素内容序列化为字符串,然后再使用Ajax请求。
除了.serialize()方法,还有一个可以返回JSON数据的方法:.serializeArray()。这个方法
可以直接把数据整合成键值对的 JSON对象。
<form>
用户名:<inputname="user"type="text"><br/>
电话号码:<inputname="phone"type="text"><br/>
性别: <inputname="gender"value='1'type="radio"checked="checked">男
<inputname="gender"value="0"type="radio">女<br/>
<inputtype="submit"value="submit">
</form>
#1 .serialize()
$("input[type=submit]","form").click(function(){
$.ajax({
url:'/jquery/Ajax_Adv',
data:$("form").serialize(),
type:'post',
success:function(resp, status, xhr){
$("div").html(resp);
}
});
returnfalse;
});
#2 .serializeArray
$("input[type=submit]","form").click(function(){
$.ajax({
url:'/jquery/Ajax_Adv',
data:$("form").serializeArray(),
type:'post',
success:function(resp, status, xhr){
$("div").html(resp);
}
});
returnfalse;
});
** 请求加载
jQuery 提供了两个全局事件,.ajaxStart()和.ajaxStop()。这两个全局事件,只要用户触发
了Ajax,请求开始时(未完成其他请求)激活.ajaxStart(),请求结束时(所有请求都结束了)激活.ajaxStop()。
$("div").ajaxStart(function(){
alert("开始 AJAX 请求已完成");
});
$("div").ajaxStop(function(){
alert("所有 AJAX 请求已完成");
});
** 请求全局事件
jQuery对于Ajax操作提供了很多全局事件方法,.ajaxStart()、.ajaxStop()、.ajaxError()
等事件方法。他们都属于请求时触发的全局事件,除了这些,还有一些其他全局事件:
.ajaxSuccess(),对应一个局部方法:.success(),请求成功完成时执行。
.ajaxComplete(),对应一个局部方法:.complete(),请求完成后注册一个回调函数。
.ajaxSend(),没有对应的局部方法,只有属性beforeSend,请求发送之前要绑定的函数。
** jqXHR对象
在之前,我们使用了局部方法:.success()、.complete()和.error()。这三个局部方法并不
是XMLHttpRequest对象调用的,而是$.ajax()之类的全局方法返回的对象调用的。这个对象,就是 jqXHR对象,它是原生对象XHR的一个超集。
使用 jqXHR的连缀方式比$.ajax()的属性方式有三大好处:
1.可连缀操作,可读性大大提高
2.可以多次执行同一个回调函数
3.为多个操作指定回调函数
** .done()、.Fail()、always()
使用.success()、.error()和.complete()连缀的方法,可以用.done()、.fail()和.always()取代。
$("input[type=submit]").click(function(){
$.ajax({
url:'/jquery/Ajax_Adv',
data:$("form").serializeArray(),
type:'post',
}).done(function(resp){
$("div").empty();
$("div").append("<span>"+resp+" ==> 1</span><br/>");
}).done(function(resp){
$("div").append("<span>"+resp+" ==> 2</span>");
}).fail(function (statusText, status){
alert(statusText+" | "+status);
}).always(function(resp,status,xhr){
alert("状态:"+status+" | 返回数据:"+resp);
console.log(xhr);
});
returnfalse;
});
- jQuery—Ajax使用
- Jquery—使用AJAX
- JQuery中使用ajax $.ajax()
- Ajax-jQuery的Ajax使用
- 【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
- jquery ajax使用小结
- jquery ajax .net使用
- IOS面试宝典(二)(持续更新)-描述UIViewController的生命周期
- system("pause")危害
- 树结构练习——排序二叉树的中序遍历
- 从劫匪的行动来看同步、异步、阻塞、非阻塞
- springMVC+easyui中的datagrid分页
- jQuery—Ajax使用
- ping++ 集成支付
- 1895: 985的0-1串难题(好题)
- 加速Android Studio/Gradle构建
- Hibernate List&Map&array&Set映射出错
- BroadcastReceiver应用详解
- uva12118
- Jmeter入门/实例
- C#中DataGridView的数据批量更新