jquery ajax入門執行個體詳解($.ajax $.get $.post $.getJSON $.getScript)

什麼是 AJAX？

AJAX = Asynchronous JavaScript and XML.

AJAX 是一種建立快速動態網頁的技術。
AJAX 通過在後台與伺服器交換少量資料的方式，允許網頁進行非同步更新。這意味著有可能在不重載整個頁面的情況下，對網頁的一部分進行更新。

AJAX 和 jQuery
jQuery 提供了用於 AJAX 開發的豐富函數（方法）庫。
通過 jQuery AJAX，使用 HTTP Get 和 HTTP Post，您都可以從遠程伺服器請求 TXT、HTML、XML 或 JSON。
而且您可以直接把遠端資料載入網頁的被選 HTML 元素中！
寫的更少，做的更多
jQuery 的 load 函數是一種簡單的（但很強大的）AJAX 函數。它的文法如下：

    $(selector).load(url,data,callback)

請使用 selector 來定義要改變的 HTML 元素，使用 url 參數來指定資料的 網址。
親自試一試
只有當您希望向伺服器發送資料時，才需要使用 data 參數。只有當您需要在執行完畢之後觸發一個函數時，您才需要使用 callback 參數。
Low Level AJAX
$.ajax(options) 是低層級 AJAX 函數的文法。
$.ajax 提供了比高層級函數更多的功能，但是同時也更難使用。
option 參數設定的是 name|value 對，定義 url 資料、密碼、資料類型、過濾器、字元集、逾時以及錯誤函數。
jQuery AJAX 請求

請求 描述

    $(selector).load(url,data,callback) 把遠端資料載入到被選的元素中
    $.ajax(options) 把遠端資料載入到 XMLHttpRequest 對象中
    $.get(url,data,callback,type) 使用 HTTP GET 來載入遠端資料
    $.post(url,data,callback,type) 使用 HTTP POST 來載入遠端資料
    $.getJSON(url,data,callback) 使用 HTTP GET 來載入遠程 JSON 資料
    $.getScript(url,callback) 載入並執行遠端 JavaScript 檔案
    (url) 被載入的資料的 URL（地址）
    (data) 發送到伺服器的資料的鍵/值對象
    (callback) 當資料被載入時，所執行的函數
    (type) 被返回的資料的類型 (html,xml,json,jasonp,script,text)
    (options) 完整 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.get執行個體

jquery.get( url, [ data ], [ callback(data, textstatus, xmlhttprequest) ], [ datatype ] )

returns: xmlhttprequest

url 字串，其中包含的url的請求被發送。

data 地圖或字串發送到與請求的伺服器。

callback(data, textstatus, xmlhttprequest)，如果請求成功執行。

datatypethe 類型的資料預計從伺服器。

這是一個縮寫的ajax功能，這相當於：

代碼如下	複製代碼
$.ajax({   url: url,   data: data,   success: success,   datatype: datatype });

調函數成功返回的資料傳遞，這將是一個xml根項目，文本字串，網頁特效檔案，或根據響應的mime類型的json對象。它也通過了響應文本狀態。

在jquery 1.4，成功回呼函數也是通過xmlhttprequest對象。

大多數實現將指定一個成功的處理常式：

代碼如下	複製代碼
$.get('ajax/test.html', function(data) {   $('.result').html(data);   alert('load was performed.'); });

jQuery.post執行個體

jQuery.post( url, [data], [callback], [type] ) ：
使用POST方式來進行非同步請求

參數：

url (String) : 發送請求的URL地址.

data (Map) : (可選) 要發送給伺服器的資料，以 Key/value 的索引值對形式表示。

callback (Function) : (可選) 載入成功時回呼函數(只有當Response的返回狀態是success才是調用該方法)。

type (String) : (可選)官方的說明是：Type of data to be sent。其實應該為用戶端請求的類型(JSON,XML,等等)
1.html頁面（index.html）

代碼如下

複製代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> <script type="text/javascript" src='#'" /jquery-1.3.2.js"></script> <script language="javascript"> function checkemail(){     if($('#email').val() == ""){     $('#msg').html("please enter the email!");     $('#email').focus;     return false;   }   if($('#address').val() == ""){     $('#msg').html("please enter the address!");     $('#address').focus;     return false;   }   ajax_post(); } function ajax_post(){   $.post("action.php",{email:$('#email').val(),address:$('#address').val()},   function(data){     //$('#msg').html("please enter the email!");     //alert(data);     $('#msg').html(data);   },   "text");//這裡返回的類型有：json,html,xml,text } </script> </head> <body> <form id="ajaxform" name="ajaxform" method="post" action="action.php">     <p>     email<input type="text" name="email" id="email"/>         </p>     <p>     address<input type="text" name="address" id="address"/>     </p>     <p id="msg"></p>     <p>            <input name="Submit" type="button" value="submit" onclick="return checkemail()"/>     </p> </form> </body> </html>

2.php頁面(action.php)

代碼如下	複製代碼
<?php $email = $_POST["email"]; $address = $_POST["address"]; //echo $email; //echo $address; echo "success"; ?>

jquery.getjson執行個體

jquery.getjson( url, [ data ], [ callback(data, textstatus) ] )
url 一個字串，其中包含的url，該請求被發送。

data 地圖或字串，發送到與請求的伺服器

callback(data, textstatus) 回呼函數是執行，如果請求成功。

看一個簡單的執行個體

代碼如下	複製代碼
$.ajax({   url: url,   datatype: 'json',   data: data,   success: callback });

回調是通過返回的資料，這將是一個網頁特效對象或數組的定義和解析json結構使用$。parsejson（）方法。

大多數實現將指定一個成功的處理常式：

代碼如下	複製代碼
$.getjson('ajax/test.json', function(data) {   $('.result').html('<p>' + data.foo + '</p>'     + '<p>' + data.baz[1] + '</p>'); });

這個例子，當然，依賴於json檔案結構：

{
  "foo": "the quick brown fox jumps教程 over the lazy dog.",
  "bar": "abcdefg",
  "baz": [52, 97]
}

代碼如下

複製代碼

<!doctype html> <html> <head>   <style>img{ height: 100px; float: left; }</style>   <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body>   <div id="images"> </div> <script>$.getjson("/?tags=cat&tagmode=any&format=json&jsoncallback=?",         function(data){           $.each(data.items, function(i,item){             $("<img/>").attr("src", item.media.m).appendto("#images");             if ( i == 3 ) return false;           });         });</script> </body> </html>>

jquery $.getScript執行個體

 該函數是簡寫的 Ajax 函數，等價於：

代碼如下	複製代碼
$.ajax({   url: url,   dataType: "script",   success: success });

這裡的回呼函數會傳入返回的 JavaScript 檔案。這通常不怎麼有用，因為那時指令碼已經運行了。

載入的指令碼在全域環境中執行，因此能夠引用其他變數，並使用 jQuery 函數。

比如載入一個 test.js 檔案，裡邊包含下面這段代碼：

代碼如下	複製代碼
$(".result").html("<p>Lorem ipsum dolor sit amet.</p>");

通過引用該檔案名稱，就可以載入並運行這段指令碼：

代碼如下	複製代碼
$.getScript("ajax/test.js", function() {   alert("Load was performed."); });