全面解析Ajax綜合應用

AJAX = 非同步 JavaScript 和 XML，AJAX 是一種用於建立快速動態網頁的技術。本文為大家帶來了全面解析Ajax綜合應用大全，非常不錯具有參考借鑒價值，有興趣的朋友一起看下吧

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

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

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);

##上面是我整理給大家的，希望未來對大家有幫助。

相關文章：

使用Nginx 反向代理來避免ajax 跨域請求的方法

深入淺析Nginx實作AJAX跨域請求問題

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

以上是全面解析Ajax綜合應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！