這次帶給大家$.Ajax()方法的參數如何使用,使用$.Ajax()方法的注意事項有哪些,下面就是實戰案例,一起來看一下。
先跟大家介紹下Ajax概念
AJAX即「Asynchronous Javascript And XML」(異步JavaScript和XML),是指一種創建互動式網頁應用的網頁開發技術。
AJAX = 非同步 JavaScript和XML(標準通用標記語言的子集)。
AJAX 是一種用於建立快速動態網頁的技術。
透過在後台與伺服器進行少量資料交換,AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某個部分進行更新。
傳統的網頁(不使用 AJAX)如果需要更新內容,必須重載整個網頁頁面。
ajax方法
$.ajax()方法是jQuery最底層的Ajax實作。它的結構為:
$.ajax(options)
#該方法只有一個參數,但是這個物件裡包含了$.ajax()方法所需的請求設定以及回呼函數等訊息,參數以key/value的形式存在,所有的參數都是可選的。常用參數請見下表:
1.url
#要求String類型的參數,(預設為目前位址)發送請求的頁面。
2.type
要求為String類型的參數,請求方式(post或get)預設為get。注意其他http請求方法,例如put和delete也可以使用,但僅有部分瀏覽器支援。
3.timeout
要求為Number類型的參數,設定請求逾時時間(毫秒)。此設定將覆蓋$.ajaxSetup()方法的全域設定。
4.async
要求為Boolean類型的參數,預設為true,所有請求均為非同步請求。如果需要同步請求,請將此選項設為false。注意,同步請求將鎖住瀏覽器,使用者其他操作必須等待請求完成才可執行。
5.cache
要求為Boolean類型的參數,預設為true(當dataType為Script時,預設為false),設定false將不會從瀏覽器快取中載入請求資訊。
6.data
要求為Object或String類型的參數,傳送到伺服器的資料。如果不是字串,將自動轉換為字串格式。 get請求中將附加在URL後。防止這種自動轉換,可以查看 processData選項。物件必須為key/value格式,例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組,JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。
7.dataType
要求為String類型的參數,預期伺服器傳回的資料類型。如果不指定,jQuery將自動根據HTTP包的mine資訊傳回responseXML或responseText,並作為回呼函數參數傳遞。可用的類型如下:
xml:返回XML文檔,可用jQuery處理。
html:傳回純文字HTML資訊;包含的script標籤會在插入DOM時執行。
script:傳回純文字javascript程式碼。不會自動快取結果,除非設定了cache參數。注意在遠端請求時(不在同一個網域下),所有post請求都會轉為get請求。
json:傳回JSON資料。
jsonp:JSON格式。使用JSONP形式呼叫函數時,例如myurl?callback=?,JQuery將自動替換後一個“?”為正確的函數名,以執行回調函數。
text:傳回純文字字串。
8.beforeSend
要求為Function類型的參數,傳送請求前可以修改XMLHttpRequest物件的函數,例如新增自訂HTTP頭。在beforeSend中如果回傳false可以取消本次ajax請求。 XMLHttpRequest物件是唯一的參數。
function(XMLHttpRequest){ this;//调用本次ajax请求时传递的options参数 }
9.complete
#要求為Function類型的參數,請求完成後呼叫的回呼函數(請求成功或失敗均呼叫) 。參數:XMLHttpRequest物件和一個描述成功請求類型的字串。
function(XMLHttpRequest,textStatus){ this; //调用本次ajax请求时传递的options参数 }
10.success
#要求為Function類型的參數,請求成功後呼叫的回呼函數,有兩個參數。
(1)由伺服器傳回,並根據dataType參數進行處理後的資料。
(2)描述狀態的字串。
function(data,textStatus){ //data可能是xmlDoc、jsonObj、html、text等 this; //调用本次ajax请求时传递的options参数 }
11.error
#要求為Function類型的參數,請求失敗時被呼叫的函數。此函數有3個參數,分別是XMLHttpRequest物件、錯誤訊息、捕獲的錯誤物件(可選)。 ajax事件函數如下:
function(XMLHttpRequest,textStatus,errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 }
12.contentType
#要求為String類型的參數,當傳送訊息至伺服器時。內容編碼類型預設為"application/x-www-form-urlencoded"。此預設值適合大多數應用場合。
13.dataFilter
要求為Function類型的參數,給Ajax傳回的原始資料進行預處理的函數。提供data和type兩個參數。 data是Ajax傳回的原始數據,type是呼叫jQuery.ajax時提供的dataTYpe參數。函數傳回的值將由jQuery進一步處理。
function(data,type){ //返回处理后的数据 return data; }
14.global
#要求為Boolean類型的參數,預設為true。表示是否觸發全域ajax事件。設定為false將不會觸發全域ajax事件,ajaxStart和ajaxStop可用於控制各種ajax事件。
15.ifModified
#要求為Boolean類型的參數,預設為false。僅在伺服器資料改變時取得新資料。伺服器資料改變判斷的依據是Last-Modified頭資訊。預設值是false,即忽略頭資訊。
16.jsonp
要求為String類型的參數,在一個jsonp請求中重寫回呼函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裡的"callback"部分,例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給伺服器。
17.username
要求為String類型的參數,用於回應HTTP存取認證請求的使用者。
18.password
要求為String類型的參數,用於回應HTTP存取認證請求的密碼。
19.processData
#要求為Boolean類型的參數,預設為true。預設情況下,發送的資料將被轉換為物件(從技術角度來講而非字串)以配合預設內容類型"application/x-www-form-urlencoded"。如果要傳送DOM樹資訊或其他不希望轉換的訊息,請設定為false。
20.scriptCharset
要求為String類型的參數,只有當請求時dataType為"jsonp"或"script",且type是GET時才會用於強制修改字元集(charset)。通常在本地和遠端的內容編碼不同時使用。
案例代碼:
$(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json", data: {username:$("#username").val(), content:$("#content").val()}, dataType: "json", success: function(data){ $('#resText').empty(); //清空resText里面的所有内容 var html = ''; $.each(data, function(commentIndex, comment){ html += '<p class="comment"><h6>' + comment['username'] + ':</h6><p class="para"' + comment['content'] + '</p></p>'; }); $('#resText').html(html); } }); }); });
知識連結:
1、$.each()函數:$.each( )函數不同於jQuery物件的each()方法,它是一個全域函數,不操作jQuery物件。此函數接收兩個參數,第1個參數是一個陣列或對象,第2個參數是一個回呼函數。回呼函數有兩個參數:第1個參數為陣列的索引或物件的成員,第2個參數為對應的變數或內容。
$.each(data,function(commentIndex,comment){ //doSomething; })
2、ajaxStart()与ajaxStop():当Ajax请求开始时,会触发ajaxStart()方法的回调函数。当Ajax请求结束时,会触发ajaxStop()方法的回调函数。这些方法都是全局的方法,因此无论创建它们的代码位于何处,只要有Ajax请求发生时,就会触发它们。
有时候页面需要加载一些图片,可能速度回比较慢,如果在加载过程中,不给用户提供一些提示和反馈信息,很容易让用户误认为按钮单击无用,使用户对网站失去信息。
此时,我们就需要为网页添加一个提示信息,常用的提示信息是“加载中...”,代码如下:
<p id="loading">加载中...</p>
当Ajax请求开始时,将此元素显示,用来提示用户Ajax请求正在进行;当Ajax请求结束后,将此元素隐藏。代码如下:
$("#loading").ajaxStart(function(){ $(this).show(); }).ajaxStop(function(){ $(this).hide(); })
好了,下面再给大家分享一个案例代码:
$(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json", data: {username:$("#username").val(), content:$("#content").val()}, dataType: "json", success: function(data){ $('#resText').empty(); //清空resText里面的所有内容 var html = ''; $.each(data, function(commentIndex, comment){ html += '<p class="comment"><h6>' + comment['username'] + ':</h6><p class="para"' + comment['content'] + '</p></p>'; }); $('#resText').html(html); } }); }); });
end,代码到此结束。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是$.Ajax()方法的參數如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!