ajax的應用實戰解析

這次帶給大家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);

###相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########AjaxToolKit怎麼使用Rating控制項###############Ajax中readyState與status應該如何使用#### #####

以上是ajax的應用實戰解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！