jQuery基础之六 -- 异步Ajax
来源:互联网 发布:lol端口号 编辑:程序博客网 时间:2024/06/16 22:28
jQuery对Ajax进行了封装,在jQuery中有三层方法:
第1层方法: $.ajax()
第3层方法: $.getScript()和$.getJson()
首先介绍第2层的方法,因为其使用频率很高
load(url [, data] [, callback]);
url: 请求HTML页面的URL地址
data: 可选,发送到服务器的key/value数据,无参数传递是GET方式,有参数传递自动转换成POST方式
callback(responseText, textStatus, XMLHttpRequest): 可选,有3个参数,请求完成时的回调函数,无论成功或失败都会被触发
textStatus: success, error, notmodified, timeout 4种
$("#div").load("test.html"); //将test.html页面的HTML内容插入到主页面的<div>中$("#div").load("test.html .para"); //将test.html中class为"para"的内容插入到主页面的<div>中2.$.get()与$.post()方法: jQuery中的全局函数
$.get/post(url [, data] [, callback] [, type]);
url: 请求HTML页面的URL地址
data: 可选,发送到服务器的key/value数据
callback(response, textStatus): 可选,只有当Response的返回状态是success进才调用
type: 可选,服务器返回内容的格式,包括xml, html, script, json, text和_default
html: $("#html").html(response);
xml: $(data).find("comment").attr("username"); 或者 $(data).find("comment usrename").text(); 在服务器端必须设置Content-Type:text/xml
json: data.username;
$("#send").click(function(){ $.get("xxx.jsp", { username: $("#username").val(), content: $("#content").val() }, function(data, textStatus){ $("#resText").html(data.username + data.content); }, "json");});
GET与POST区别:
1.GET请求会将对数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给WEB服务器
2.GET方式对传输的数据有大小限制,通常不能大于2KB,而使用POST方式传递没有限制
3.GET方式请求的数据会被浏览器缓存起来,例如账号和密码等,会带来严重的安全性问题
4.GET方式和POST方式传递的数据在服务器端的获取不相同,在PHP中,GET通过$_GET[]获取,而POST通过$_POST[]获取,都可以用$_REQUEST[]来获取3.$.getScript()和$.getJson()方法: 动态加载js和json文件
在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的,可以在需要哪个JavaScript文件时,动态地创建<script>标签,js代码:
$(document.createElement("script")).attr("src", "xxx.js").appendTo("head");或者$("<script type='text/javascript' src='xxx.js'>").appendTo("head");jQuery示例: $.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){ $("#go").click(function(){ $(".block").animate({backgroundColor: 'pink'}, 1000).animate({backgroundColor: 'blue'}, 1000); }); // 当jquery.color.js 动画插件加载完毕后,单击按钮,class为block的元素就有了颜色动画变化 });
$.getJson("test.json", function(data){ $("#repText").empty(); var html = ''; $.each(data, function(index, data){ html += '<div class="comment">' + data.username + data[comment] + '</div>'; }); $("#repText").html(html);});4.$.ajax()方法
$.ajax(options); options以key/value的形式存在,所有参数都是可选的,$.Ajax()方法是jQuery最底层的Ajax实现,可以代替前面的所有方法
url: 请求HTML页面的URL地址type: 请求方式,get或者post,默认是get,部分浏览器支持but,deletetimeout: 设置请求超时时间(毫秒),将覆盖$.ajaxSetup()方法的全局设置data: 发送到服务器的数据processData: (默认: true) 默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"dataType: 预设服务器返回的数据类型,xml, html, script,json, jsonp, textdataFilter: 给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数:data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数async: (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 falsecache: (默认: true,dataType为script和jsonp时默认为false) 设置为 false 将不缓存此页面。contentType: (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型context; 设置Ajax相关回调函数的上下文。也就是说,让回调函数内this指向这个对象(如果不设定这个参数,那么this就指向调用本次AJAX请求时传递的options参数)global: 默认为true,表示触发全局Ajax事件 username: 用于响应HTTP访问认证请求的用户名password: 用于响应HTTP访问认证请求的密码traditional: 如果你想要用传统的方式来序列化数据,那么就设置为trueifModified: (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断jsonp: 在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。jsonpCallback: 为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。scriptCharset: 只有当请求时dataType为"jsonp"或"script",并且type是"GET"才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。beforeSend(XMLHttpRequest): 发送请求前可以修改XMLHttpRequest对象的函数,例如添加HTTP头,在beforeSend中,如果返回false可以取消本次Ajax请求 complete(XMLHttpRequest, textStatus): 请求完成后调用的回调函数,成功或失败时均调用,有点类似 load() 方法 success(response, textStatus): 请求成功时调用的回调函数 error(XMLHttpRequest, textStatus, errorThrown): 请求失败时调用的回调函数
$.ajax({ type: "GET", url: "test.js", dataType: "script"}); //加载并执行一个 JS 文件$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); }}); //保存数据到服务器,成功时显示信息。$.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); }}); //装入一个 HTML 网页最新版本。 var xmlDocument = [create xml document]; $.ajax({ url: "page.php", processData: false, data: xmlDocument, success: handleResponse }); // 发送 XML 数据至服务器。设置 processData 选项为 false,防止自动转换数据格式。
5.序列化元素
serialize(); //作用一个jQuery对象,它能够将DOM元素内容序列化字符串,用于Ajax请求
$.get("xxx.jsp", $("#form").serialize(), function(data, textStatus){ // { username: $("#username").val(), content: $("#content").val() } $("#resText").html(data);});serialize()不仅可以作用于form,它可以作用于任何jQuery对象
data不仅可以使用映射方式,也可以使用字符串方式,但要注意中文编码问题
"username=" + encodeURIComponent($('#username').val()) + "&content=" + encodeURIComponent($("#content").val())serializeArray(); //将DOM元素内容序列化后, 不是返回字符串,而是返回JSON格式的数据
var fields = $(":checkbox, :radio").serializeArray();$.each(fields, function(index, field){ $("#html").append(field.value +","); });$.param(); //它是serialize()方法的核心,用来将一个数组或对象按照key/value进行序列化
var obj = {a:1, b:2, c:3};var k = $.param(obj); //a=1&b=2&c=3全局事件:
ajaxSetup(name: value, name:value, ...) 设置全局 AJAX 默认选项,所有的选项都可以通过$.ajaxSetup()函数来全局设置。 ajaxStart(callback); Ajax请求 开始 时执行的函数 ajaxStop(callback); Ajax请求 结束 时执行的函数 ajaxComplete(callback); Ajax请求 完成 时执行的函数 ajaxError(callback); Ajax请求 发生错误 时执行的函数,捕捉到的错误可以作为最后一个参数传递 ajaxSend(callback); Ajax请求 发送前 执行的函数 ajaxSucess(callback); Ajax请求 成功 时执行的函数 //如果想使某个Ajax请求不受全局方法的影响,可以设置参数global为false$.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST"}); //设置 AJAX 请求默认地址为 "/xmlhttp/",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数$.ajax({ data: myData });
<div id="loading">Loading。。。</div>$("#loading").ajaxStart(function(){ $(this).show(); }).ajaxStop(function(){ $(this).hide();}); $("#msg").ajaxComplete(function(event,request, settings){ $(this).append("<li>请求完成.</li>"); });$("#msg").ajaxError(function(event,request, settings){ $(this).append("<li>出错页面:" + settings.url + "</li>");}); $("#msg").ajaxSend(function(evt, request, settings){ $(this).append("<li>开始请求: " + settings.url + "</li>"); }); $("#msg").ajaxSuccess(function(evt, request, settings){ $(this).append("<li>请求成功!</li>"); });
- jQuery基础之六 -- 异步Ajax
- jQuery基础----21jQuery AJAX-异步访问
- jquery异步加载之ajax
- jQuery之异步Ajax请求使用
- jQuery之异步Ajax请求使用
- jQuery异步请求ajax()之async详解
- JavaScript基础系列之六 JQuery
- jquery ajax 同步异步
- jquery ajax异步交互
- jquery-ajax(异步刷新)
- jquery ajax异步提交
- JQuery ajax异步请求
- jquery ajax异步上传
- jquery,ajax,同步异步
- jquery ajax异步请求
- 解决JQUERY ajax异步
- JQuery ajax异步请求
- Jquery ajax异步提交
- Intent 传递复杂对象
- 数据库迁移时Excel列格式错误导致数据丢失的问题-Oracle-Datapump
- zigbee学习参考(1~42 )
- 如何修改frameworks层代码并使修改有效
- 基于用户的推荐和基于物品的推荐
- jQuery基础之六 -- 异步Ajax
- Eclipse 修改注释中字体的大小
- prototype 原型
- VB//关于SaveSetting和GetSetting函数
- Android Bluetooth 总结
- WCF简单应用
- javascript 获取域名
- LINUX PXE网络安装
- CAP理论十二年回顾:"规则"变了