Ajax详解
模板: $.post(action,{name:nameValue},function(data,textStatus,xmlHttp){ //alert(data); $("#pycode").val(data); }); function(responseText,XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态:success,error //alert(XMLHttpRequest);//XMLHttpRequest对象 使用方法, 查询地址:http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html jQuery Ajax 实例全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url,[data],[callback] ) :载入远程 HTML 文件代码并插入至 DOM中。 url(String) : 请求的HTML页的URL地址。 data(Map) : (可选参数) 发送至服务器的 key/value 数据。 callback(Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。 这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如"url #some > selector"。 这个方法可以很方便的动态加载一些HTML文件,例如表单。 示例代码: $(".ajax.load").load("http://www.cnblogs.com/yeer/archive/2009/06/10/1500682.html.post", function (responseText,XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态:success,error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。
注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。
2. jQuery.get( url,[callback] ):使用GET方式来进行异步请求 参数: url(String) : 发送请求的URL地址. data(Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。 callback(Function): (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 这是一个简单的 GET 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码: $.get("./Ajax.aspx",{Action:"get",Name:"lulu"},function (data,textStatus){ //返回的 data 可以是 xmlDoc,jsonObj,html,text,等等. this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图 alert(data); //alert(textStatus);//请求状态:success,error等等。 当然这里捕捉不到error,因为error的时候根本不会运行该回调函数 //alert(this); }); 点击发送请求: jQuery.get()回调函数里面的 this ,指向的是Ajax请求的选项配置信息:
3. jQuery.post( url,[callback],[type] ) :使用POST方式来进行异步请求 参数: url(String) : 发送请求的URL地址. data(Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。 callback(Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 type(String): (可选)官方的说明是:Typeof data to be sent。其实应该为客户端请求的类型(JSON,XML,等等) 这是一个简单的 POST 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码: Ajax.aspx: Response.ContentType = "application/json"; Response.Write("{result: '" + Request["Name"] + ",你好!(这消息来自服务器)'}"); jQuery 代码: $.post("Ajax.aspx",{ Action: "post",Name: "lulu" }, function (data,textStatus){ // data 可以是 xmlDoc,等等. //this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this alert(data.result); },"json"); 点击提交: 这里设置了请求的格式为"json": 如果你设置了请求的格式为"json",此时你没有设置Response回来的ContentType为:Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。 注意一下,alert(data.result); 由于设置了Accept报头为“json”,这里返回的data就是一个对象,并不需要用eval()来转换为对象。
4. jQuery.getScript( url,[callback] ) : 通过 GET 方式请求载入并执行一个JavaScript 文件。 参数 url(String) : 待载入 JS 文件地址。 callback(Function): (可选) 成功载入后回调函数。 jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。 这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码: 加载并执行 test.js。 jQuery 代码: $.getScript("test.js"); 加载并执行 AjaxEvent.js ,成功后显示信息。 jQuery 代码: $.getScript("AjaxEvent.js",function(){ alert("AjaxEvent.js加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同?"); });
加载完后请重新点击一下上面的 Load 请求看看有什么不同。 jQuery Ajax 事件 Ajax请求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件:局部事件和全局事件。 局部事件就是在每次的Ajax请求时在方法内定义的,例如: $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ... }); 全局事件是每次的Ajax请求都会触发的,它会向DOM中的所有元素广播,在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义: $("#loading").bind("ajaxSend",function(){ $(this).show(); }).bind("ajaxComplete",function(){ $(this).hide(); }); 或者: $("#loading").ajaxStart(function(){ $(this).show(); }); 我们可以在特定的请求将全局事件禁用,只要设置下 global 选项就可以了: $.ajax({ url: "test.html", global: false,// 禁用全局Ajax事件. // ... }); 下面是jQuery官方给出的完整的Ajax事件列表: · ajaxStart(Global Event) ·beforeSend(LocalEvent) ·ajaxSend(GlobalEvent) ·success(LocalEvent) ·ajaxSuccess(GlobalEvent) ·error(LocalEvent) ·ajaxError(GlobalEvent) ·complete(LocalEvent) ·ajaxComplete(GlobalEvent) · ajaxStop(Global Event) 具体的全局事件请参考API文档。
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层AJAX 实现。简单易用的高层实现见 $.get,$.post 等。 $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。 注意:如果你指定了 dataType 选项,请确保服务器返回正确的MIME 信息,(如 xml返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见Specifying the Data Type for AJAXRequests。 $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。 jQuery 1.2 中,您可以跨域加载JSON 数据,使用时需将数据类型设置为JSONP。使用JSONP形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。(这个我不是很懂) 参数列表:
这里有几个Ajax事件参数:beforeSend,success,complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的this都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。 示例代码,获取博客园首页的文章题目: $.ajax({ type: "get", url: "http://www.cnblogs.com/rss", beforeSend: function(XMLHttpRequest){ //ShowLoading(); }, success: function(data,textStatus){ $(".ajax.ajaxResult").html(""); $("item",data).each(function(i,domEle){ $(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>"); }); }, complete: function(XMLHttpRequest,textStatus){ //HideLoading(); }, error: function(){ //请求出错处理 } }); 这里将显示首页文章列表。
其他 jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。 设置 AJAX 请求默认地址为"/xmlhttp/",禁止触发全局AJAX 事件,用 POST 代替默认 GET方法。其后的 AJAX 请求不再设置任何选项参数。 jQuery 代码: $.ajaxSetup({ url: "/xmlhttp/", type: "POST" }); $.ajax({ data: myData });
serialize() 与 serializeArray() serialize() : 序列表表格内容为字符串。 serializeArray() : 序列化表格元素 (类似'.serialize()' 方法) 返回JSON 数据结构数据。 示例: HTML代码: <pid="results"><b>Results:</b></p> <form> <selectname="single"> <option>Single</option> <option>Single2</option> </select> <selectname="multiple"multiple="multiple"> <optionselected="selected">Multiple</option> <option>Multiple2</option> <optionselected="selected">Multiple3</option> </select><br/> <inputtype="checkbox"name="check"value="check1"/> check1 <inputtype="checkbox"name="check"value="check2"
checked="checked"/> check2 <inputtype="radio"name="radio"value="radio1"
checked="checked"/> radio1 <inputtype="radio"name="radio"value="radio2"/> radio2
</form> · serializeArray() 结果为: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |