亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

jQuery中的AJAX(基礎(chǔ)篇)

??? 2016-11-12 11:49:53 328
????:前端對(duì)于頁面的一些特效、驗(yàn)證、交互等等,都是通過Javascript語言進(jìn)行完成的,是前臺(tái)最基礎(chǔ)的語言,而JQuery則是對(duì)js代碼的封裝,方便我們前臺(tái)代碼的編寫,而且它還有一個(gè)非常大的優(yōu)勢(shì)就是解決了瀏覽器的兼容問題,這也是我們使用它非常重要的原因之一,關(guān)于JQuery的優(yōu)點(diǎn)寫半天不一定能寫完,在這里就不一一贅述了?! 《F(xiàn)在為了滿足用戶的需求,AJAX(Asynchronous Javascri

前端對(duì)于頁面的一些特效、驗(yàn)證、交互等等,都是通過Javascript語言進(jìn)行完成的,是前臺(tái)最基礎(chǔ)的語言,而JQuery則是對(duì)js代碼的封裝,方便我們前臺(tái)代碼的編寫,而且它還有一個(gè)非常大的優(yōu)勢(shì)就是解決了瀏覽器的兼容問題,這也是我們使用它非常重要的原因之一,關(guān)于JQuery的優(yōu)點(diǎn)寫半天不一定能寫完,在這里就不一一贅述了。

  而現(xiàn)在為了滿足用戶的需求,AJAX(Asynchronous Javascript + XML)異步刷新起到了無可比擬的作用。當(dāng)然AJAX的作用不僅僅只是刷新頁面那么單一。這里只是拿異步刷新頁面來說一說。其中AJAX實(shí)現(xiàn)異步刷新頁面的基礎(chǔ)原理就是在內(nèi)部調(diào)用了JS的 XMLHttpRequest 對(duì)象,然后發(fā)送了HTTP請(qǐng)求,從而拿到后臺(tái)的數(shù)據(jù),更新頁面。

  JQuery也對(duì)AJAX異步操作進(jìn)行了封裝,這里看一下幾種常用的方式: $.ajax、$.post、$.get、$.getJSON。下面來看一下他們的使用方法,其實(shí)很簡單的。我這里只是簡單的列舉了一下,非常的基礎(chǔ),如果有對(duì)AJAX感興趣的園友,那就再好好的查下資料研究一下。

一、$.ajax

  這個(gè)是JQuery對(duì)AJAX封裝的最基礎(chǔ)步驟,通過使用這個(gè)函數(shù)可以完成異步通訊的所有功能。也就是說什么情況下我們都可以通過此方法進(jìn)行異步刷新的操作。但是它的參數(shù)較多,有的時(shí)候可能會(huì)麻煩一些??匆幌鲁S玫膮?shù):      

var Obj = {
       method   //數(shù)據(jù)的提交方式:get和post 默認(rèn)的是get
       url   //數(shù)據(jù)請(qǐng)求的路徑
       async   //是否支持異步刷新,默認(rèn)是true
       data    //需要提交的數(shù)據(jù)參數(shù),是一個(gè)對(duì)象
       dataType   //服務(wù)器返回?cái)?shù)據(jù)的類型,一般采用json格式,可以設(shè)置為“json”
       success    //請(qǐng)求成功后的回調(diào)函數(shù),傳入返回后的數(shù)據(jù),以及包含成功代碼的字符串
       error   //請(qǐng)求失敗后的回調(diào)函數(shù)
    }
$.ajax(Obj);//通過$.ajax函數(shù)進(jìn)行調(diào)用。

 好,看一個(gè)實(shí)際的例子吧,看一個(gè)進(jìn)行異步刪除的例子:    

$.ajax({  
      type : "POST",  //提交方式  
      url : "xxxxxxxxx",//路徑  
     data : {  
      "id" : "xxx"  
    },//數(shù)據(jù),這里使用的是Json格式進(jìn)行傳輸  
      success : function(result) {//返回?cái)?shù)據(jù)根據(jù)結(jié)果進(jìn)行相應(yīng)的處理  
            if ( result.success ) {  
                $("xxxx).text("刪除數(shù)據(jù)成功");  
                tree.deleteItem("xxx", true);  
          } else {  
              $("xxxx").text("刪除數(shù)據(jù)失敗");  
          }  
     }  
  });

二、$.post

  這個(gè)函數(shù)其實(shí)就是對(duì)$.ajax進(jìn)行了更進(jìn)一步的封裝,減少了參數(shù),簡化了操作,但是運(yùn)用的范圍更小了。$.post簡化了數(shù)據(jù)提交方式,只能采用POST方式提交。只能是異步訪問服務(wù)器,不能同步訪問,不能進(jìn)行錯(cuò)誤處理。在滿足這些情況下,我們可以使用這個(gè)函數(shù)來方便我們的編程,它的主要幾個(gè)參數(shù),像method,async等進(jìn)行了默認(rèn)設(shè)置,我們不可以改變的。例子不再介紹。

      url:發(fā)送請(qǐng)求地址。

      data:待發(fā)送 Key/value 參數(shù)。

      callback:發(fā)送成功時(shí)回調(diào)函數(shù)。

      type:返回內(nèi)容格式:xml、html、 script、 json、 text等。

三、$.get

  $.get和$.post一樣,這個(gè)函數(shù)是對(duì)get方法的提交數(shù)據(jù)進(jìn)行封裝,只能使用在get提交數(shù)據(jù)解決異步刷新的方式上,使用方式和上邊的也差不多。這里不再演示。

四、$.getJSON

  這個(gè)是進(jìn)一步的封裝,也就是對(duì)返回?cái)?shù)據(jù)類型為Json進(jìn)行操作。里邊就三個(gè)參數(shù)需要我們?cè)O(shè)置也非常簡單:url、data、callback。

  其實(shí)會(huì)了$.ajax方法,其它的就都會(huì)使用了,其實(shí)非常簡單。學(xué)習(xí)編程,其實(shí)就是學(xué)習(xí)對(duì)數(shù)據(jù)的流轉(zhuǎn)處理,如何從后臺(tái)獲取,服務(wù)器進(jìn)行相應(yīng)的處理然后返回,瀏覽器在進(jìn)行解析及渲染出來,在通過其它的技術(shù),將客戶的需求完美呈現(xiàn),給用戶更好的體驗(yàn),就完成了網(wǎng)頁的開發(fā),感覺還是非常有意思的。


??? ??

?? ??