首頁 > web前端 > js教程 > 主體

全面解析$.Ajax()方法參數(圖文教學)

亚连
發布: 2018-05-23 16:56:46
原創
1869 人瀏覽過

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 += &#39;<p class="comment"><h6>&#39; + comment[&#39;username&#39;]
      + &#39;:</h6><p class="para"&#39; + comment[&#39;content&#39;]
      + &#39;</p></p>&#39;;
    });
    $(&#39;#resText&#39;).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(){
 $(&#39;#send&#39;).click(function(){
  $.ajax({
  type: "GET",
  url: "test.json",
  data: {username:$("#username").val(), content:$("#content").val()},
  dataType: "json",
  success: function(data){
    $(&#39;#resText&#39;).empty(); //清空resText里面的所有内容
    var html = &#39;&#39;; 
    $.each(data, function(commentIndex, comment){
    html += &#39;<p class="comment"><h6>&#39; + comment[&#39;username&#39;]
      + &#39;:</h6><p class="para"&#39; + comment[&#39;content&#39;]
      + &#39;</p></p>&#39;;
    });
    $(&#39;#resText&#39;).html(html);
   }
  });
 });
});
登入後複製

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

IE8下Ajax缓存问题及解决办法

IE8/IE9下Ajax缓存问题

IE8用ajax访问不能每次都刷新的问题

以上是全面解析$.Ajax()方法參數(圖文教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!