定義與用法
ajax() 方法透過 HTTP 請求載入遠端資料。
此方法是 jQuery 底層 AJAX 實作。簡單易用的高層實作請見 $.get, $.post 等。 $.ajax() 傳回其建立的 XMLHttpRequest 物件。大多數情況下你無需直接操作該函數,除非你需要操作不常用的選項,以獲得更多的彈性。
最簡單的情況下,$.ajax() 可以不帶任何參數直接使用。
注意:所有的選項都可以透過 $.ajaxSetup() 函數來全域設定。
jQuery Ajax在web應用程式開發中很常用,它主要包括有ajax,get,post,load,getscript等等這幾種常用無刷新操作方法,下面我來給各位同學介紹介紹。
我們先從最簡單的方法看起,處理複雜的ajax請求時,jQuery使用jQuery.ajax()方法進行處理。在jQuery中有一些簡單的方法,它對jQuery.ajax()方法進行了封裝,使得我們在處理一些簡單的Ajax事件時,不需要使用jQuery.ajax()方法,其中有些方法在之前的文章中已經出現過了,相信大家很快就能掌握。當然,本篇後半部會對jQuery.ajax()方法做非常具體的說明,因為它是本篇的重中之重。
以下5個方法執行一般Ajax請求的簡短形式,在處理複雜的Ajax請求時應該使用jQuery.ajax().
1.load(url,[data],[callback])
載入遠端HTML檔案程式碼並插入至DOM中,預設使用GET方式,傳遞參數時自動轉換為POST方式。
◦url:要載入的遠端url位址
◦data:傳送至伺服器的key/value 資料
◦callback:載入成功時的回呼函數
範例程式碼如下:
//无参数、无回调函数 $("#showload").load("load.htm"); //无回调函数 $("#showload").load("load.htm", { "para": "para-value" }); $("#showload").load("load.htm", { "para": "para-value" }, function() { //处理 })
這裡將顯示已載入的檔案的內容Load
2.jQuery.get(url, [data], [callback])
使用get方式從伺服器端取得資料。
◦發送請求的URL位址
◦要傳送給伺服器的資料
◦載入成功時回呼函數
範例程式碼如下:
$.get("jqueryget.htm", { "id": this.id }, function(req) { //成功时的回调方法 $("#showget").html(req); }); })
使用$.get()方法,透過傳遞id來取得不同的logo。值得一提的是,此時是透過get方法獲得請求,所以在取得參數值時要使用Request.QueryString,可以看看Request Request.QueryString的差異
百度logo谷歌logo
這裡將顯示logo3.jQuery.post(url, [data], [callback])
使用POST方式來進行非同步請求。同jQuery.get()相比,差別在於請求的方式,所以這裡不做特別的說明了,使用方法同jQuery.get()相似。
4.jQuery.getScript(url,[callback])
透過 GET 方式請求載入並執行一個JavaScript檔案。這個技術在前邊文章中已經提到過,也是jQuery.ajax的一種簡單的使用方法,可以看看ajax載入js,所以這裡也不做特別的說明了。
5.jQuery.getJSON(url,[data],[callback])
透過get方式取得json格式的資料。
範例程式碼如下:
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(req) { $.each(req.items, function(i, item) { if (i == vnum) { $("<img src="" + item.media.m + "" title="" + item.title + "" />").appendTo("#showjson"); } }); });
一樣的,這也是jQuery.ajax()方法的一種簡寫方法,類似如下方法:
參數列表:
參數名稱 | 類型 | 描述 |
url | String | (預設: 目前頁位址) 發送請求的位址。 |
type | String | (預設: "GET") 要求方式 ("POST" 或 "GET"), 預設為 "GET"。注意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支援。 |
timeout | Number | 設定請求超時時間(毫秒)。此設定將覆蓋全域設定。 |
async | Boolean | (預設: true) 預設值下,所有請求均為非同步請求。如果需要傳送同步請求,請將此選項設為 false。注意,同步請求將鎖住瀏覽器,使用者其它操作必須等待請求完成才可以執行。 |
beforeSend | Function | 傳送請求前可修改 XMLHttpRequest 物件的函數,例如新增自訂 HTTP 頭。 XMLHttpRequest 物件是唯一的參數。 <span style="color: rgb(0,0,255)">function (XMLHttpRequest) { <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax <a target="_blank" style="color: rgb(51,153,255); text-decoration: none" href="http://www.php100.com/tags.php/request/">request</a>}</span></span></span> |
cache | Boolean | (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。 |
complete | Function | 请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。<span style="color: rgb(0,0,255)">function (XMLHttpRequest, textStatus) { <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span> |
contentType | String | (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 |
data | Object, String |
發 送到伺服器的資料。將自動轉換為請求字串格式。 GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組,jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。 |
dataType | String |
預期伺服器傳回的資料類型。如果不指定,jQuery 將自動根據 HTTP 套件 MIME 資訊傳回 responseXML 或 responseText,並作為回呼函數參數傳遞,可用值: "xml": 傳回 XML 文檔,可用 jQuery 處理。 "html": 傳回純文字 HTML 資訊;包含 script 元素。 "script": 傳回純文字 JavaScript 程式碼。不會自動快取結果。 "json": 傳回 JSON 資料 。 "jsonp": JSONP 格式。使用 JSONP 形式呼叫函數時,如 "myurl?callback=?" jQuery 會自動取代 ? 為正確的函式名,以執行回呼函數。
|
error | Function | (預設: 自動判斷 (xml 或 html)) 請求失敗時將呼叫此方法。這個方法有三個參數:XMLHttpRequest 對象,錯誤訊息,(可能)捕獲的錯誤對象。 <span style="color: rgb(0,0,255)">function (XMLHttpRequest, textStatus, errorThrown) { <span style="color: rgb(0,128,0)">// 通常情况下textStatus和errorThown只有其中一个有值 <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span></span> |
global | Boolean | (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件 |
ifModified | Boolean | (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。 |
processData | Boolean | (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。 |
success | Function | 请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态<span style="color: rgb(0,0,255)">function (data, textStatus) { <span style="color: rgb(0,128,0)">// data could be xmlDoc, jsonObj, html, text, etc... <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span></span> |
这里有几个Ajax事件参数:beforeSend ,success ,complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
代码如下
$.ajax({ url: url, dataType: 'json', data: data, success: callback });
可能你还没有使用过json数据,我的小站中已经好几次提到了json的使用,如果你还不熟悉json格式,可以看看jquery移动listbox的值、jQuery下json的使用实例
获得json数据
这 里将随机显示一条json数据到目前为止我们总结了jQuery.ajax的五种简写方法,接下来让我们集中精神,看看jQuery.ajax()方法, 在使用中,笔者也是经常使用的jQuery.ajax(),因为大多数情况,我们需要对ajax请求出错的情况进行捕捉并处理。
6.jQuery.ajax()
使用jQuery.ajax()方法获取数据,下边给个常用写法,并做了相应的注释。
代码如下
$.ajax({ url: "http://www.hzhuti.com", //请求的url地址 dataType: "json", //返回格式为json async: true, //请求是否异步,默认为异步,这也是ajax重要特性 data: { "id": "value" }, //参数值 type: "GET", //请求方式 beforeSend: function() { //请求前的处理 }, success: function(req) { //请求成功时处理 }, complete: function() { //请求完成的处理 }, error: function() { //请求出错处理 } });
使用jQuery.ajax()
这里将显示数据
$.ajax我的实际应用例子
//1.$.ajax带json数据的异步请求 var aj = $.ajax( { url:'productManager_reverseUpdate',// 跳转到 action data:{ selRollBack : selRollBack, selOperatorsCode : selOperatorsCode, PROVINCECODE : PROVINCECODE, pass2 : pass2 }, type:'post', cache:false, dataType:'json', success:function(data) { if(data.msg =="true" ){ // view("修改成功!"); alert("修改成功!"); window.location.reload(); }else{ view(data.msg); } }, error : function() { // view("异常!"); alert("异常!"); } });
//2.$.ajax序列化表格内容为字符串的异步请求 function noTips(){ var formParam = $("#form1").serialize();//序列化表格内容为字符串 $.ajax({ type:'post', url:'Notice_noTipsNotice', data:formParam, cache:false, dataType:'json', success:function(data){ } }); } //3.$.ajax拼接url的异步请求 var yz=$.ajax({ type:'post', url:'validatePwd2_checkPwd2?password2='+password2, data:{}, cache:false, dataType:'json', success:function(data){ if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间 { textPassword2.html("<font color='red'>业务密码不正确!</font>"); $("#validatePassword2").val("pwd2Error"); checkPassword2 = false; return; } }, error:function(){} }); //4.$.ajax拼接data的异步请求 $.ajax({ url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action', type:'post', data:'merName='+values, async : false, //默认为true 异步 error:function(){ alert('error'); }, success:function(data){ $("#"+divs).html(data); } });
本篇的jQuery ajax使用就总结到这里,当然还有一些方法并未能全部的总结。如ajaxStart()、ajaxStop()等,在以后使用中,我会把它们也总结下来。