全面解析Ajax綜合應用(全)_AJAX相關

AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。

AJAX = 非同步 JavaScript和XML（標準通用標記語言 (SGML)的子集）。

AJAX 是一種用於建立快速動態網頁的技術。

通過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。

•"xml": 返回 XML 文檔，可用 jQuery 處理。

•"html": 返回純文字 HTML 資訊；包含的 script 標籤會在插入 dom 時執行。

•"script": 返回純文字 JavaScript 代碼。不會自動緩衝結果。除非設定了 "cache" 參數。注意：在遠程請求時(不在同一個域下)，所有 POST 請求都將轉為 GET 請求。（因為將使用 DOM 的 script標籤來載入）

•"json": 返回 JSON 資料 。

•"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回呼函數。

•"text": 返回純文字字串

一、前台傳遞字串變數，後台返回字串變數（非json格式）　

　　這裡，為瞭解決Ajax資料傳遞出現的漢字亂碼，在字串傳遞之前，使用javascript函數escape()對漢字字串進行了編碼，並且對返回

的字串使用unescape()函數進行解碼，使得漢字得以正常顯示。當然了，後台PHP代碼也添加了標頭檔，以保證漢字字串不會出現亂碼。各種後台代碼解決

漢字亂碼問題的方式如下：

PHP:header('Content-Type:text/html;charset=GB2312');

　Javascript代碼：

$(function(){var my_data="前台變數";my_data=escape(my_data)+"";//編碼，防止漢字亂碼$.ajax({url: "ajax_php.php",type: "POST",data:{trans_data:my_data},//dataType: "json",error: function(){alert('Error loading XML document');},success: function(data,status){//如果調用php成功alert(unescape(data));//解碼，顯示漢字}});});

　PHP代碼：

header('Content-Type:text/html; charset=gb2312');//使用gb2312編碼，使中文不會變成亂碼$backValue=$_POST['trans_data'];echo $backValue."+後台返回";

二、前台傳遞多個一維數組，後台返回字串變數（非json格式）

　　在非json格式下，後台只能返回字串，如果想後台返回數組，可以採用json格式，在本文的後面會詳細介紹。

Javascript代碼：

$(function(){var my_data=new Array();var my_data1=new Array();my_data[0]=0;my_data[1]=1;my_data[2]=2;my_data1[0]=10;my_data1[1]=11;my_data1[2]=12;$.ajax({url: "ajax_php.php",type: "POST",data:{trans_data:my_data,trans_data1:my_data1},//dataType: "json",error: function(){alert('Error loading XML document');},success: function(data,status){//如果調用php成功alert(data);}});});

PHP代碼：

//讀取第一個數組$backValue="trans_data:";$trans=$_POST['trans_data'];foreach($trans as $value){$backValue=$backValue." ".$value;}//讀取第二個數組$backValue=$backValue." , trans_data1:";$trans=$_POST['trans_data1'];foreach($trans as $value){$backValue=$backValue." ".$value;}echo $backValue;

三、前台傳遞多個一維數組，後台返回二維數組（json格式）

Javascript代碼：

$(function(){var my_data=new Array();var my_data1=new Array();my_data[0]=0;my_data[1]=1;my_data[2]=2;my_data1[0]=10;my_data1[1]=11;my_data1[2]=12;$.ajax({url: "ajax_php.php",type: "POST",data:{trans_data:my_data,trans_data1:my_data1},dataType: "json",error: function(){alert('Error loading XML document');},success: function(data){//如果調用php成功}alert(back);}});});

　PHP代碼：

header('Content-Type:text/html; charset=gb2312');//使用gb2312編碼，使中文不會變成亂碼$backValue=array();$backValue[0]=$_POST['trans_data'];$backValue[1]=$_POST['trans_data1'];echo json_encode($backValue);

四、前台傳遞一維數組和二維數組，後台返回二維數組（json格式）

Javascript代碼：

$(function(){var my_data=new Array();var my_data1=new Array();var my_data2=new Array();my_data[0]=0;my_data[1]=1;my_data[2]=2;my_data1[0]=10;my_data1[1]=11;my_data1[2]=12;my_data2[0]=my_data;my_data2[1]=my_data1;$.ajax({url: "ajax_php.php",type: "POST",data:{trans_data:my_data,trans_data1:my_data1,trans_data2:my_data2},dataType: "json",error: function(){alert('Error loading XML document');},success: function(data){//如果調用php成功}alert(back);}});});

PHP代碼：

header('Content-Type:text/html; charset=gb2312');//使用gb2312編碼，使中文不會變成亂碼$backValue=array();$backValue=$_POST['trans_data2'];$backValue[2]=$_POST['trans_data'];$backValue[3]=$_POST['trans_data1'];echo json_encode($backValue);

以上內容是小編給大家介紹的全面解析Ajax綜合應用大全，希望能夠協助到大家！