ajax處理服務(wù)器返回的三種數(shù)據(jù)類型方法
更新時間：2016年10月17日 15:49:09 作者：_acme_
這篇文章主要介紹了ajax如何處理服務(wù)器返回的三種數(shù)據(jù)類型,具有一定的參考價值，感興趣的小伙伴們可以參考一下
其原理很簡單，結(jié)構(gòu)上基本不變，只是改變處理返回數(shù)據(jù)的方式.
1.Text/HTML格式
這種返回類型處理很簡單，直接就當作字符串用就行了.為了方便使用，封裝成如下函數(shù):
/**
* @function 利用ajax動態(tài)交換數(shù)據(jù)(Text/HTML格式)
* @param url 要提交請求的頁面
* @param jsonData 要提交的數(shù)據(jù),利用Json傳遞
* @param getMsg 這個函數(shù)可以獲取到處理后的數(shù)據(jù)
*/
function ajaxText(url,jsonData,getMsg)
{
//創(chuàng)建Ajax對象,ActiveXObject兼容IE5,6
var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
//打開請求
oAjax.open('POST',url,true);//方法,URL,異步傳輸
//發(fā)送請求
var data = '';
for(var d in jsonData) //拼裝數(shù)據(jù)
data += (d + '=' +jsonData[d]+'&');
oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
oAjax.send(data);
//接收返回,當服務(wù)器有東西返回時觸發(fā)
oAjax.onreadystatechange = function ()
{
if(oAjax.readyState == 4 && oAjax.status == 200)
{
if(getMsg) getMsg(oAjax.responseText);
}
}
}
服務(wù)器端返回數(shù)據(jù)格式如下:
例如:
//返回的是xml格式
//header("Content-Type:text/xml;charset=utf-8");
//返回的是text或Json格式
header("Content-Type:text/html;charset=utf-8");
//禁用緩存,是為了數(shù)據(jù)一樣的前提下還能正常提交，而不是緩存數(shù)據(jù)
header("Cache-Control:no-cache");
$username = $_POST['username']; //獲取用戶名
if(empty($username))
echo '請輸入用戶名';
else if($username == 'acme')
echo '用戶名已被注冊';
else
echo '用戶名可用';
調(diào)用格式如下:
url = 'abc.php';
var jsonData={username:'acme',passw:'acme'};
ajaxText(url,jsonData,getMsg);
function getMsg(msg)
{
//do something
}
2.XML格式
返回的是一個XML DOM對象，解析其中的數(shù)據(jù)就類似于HTML DOM 編程. 比如通過name獲取標簽對象(數(shù)組形式)，再從該數(shù)組中獲取需要的標簽對象，再從標簽對象中獲取文本值.
函數(shù)如下:
/**
* @function 利用ajax動態(tài)交換數(shù)據(jù)(XML格式)
* @param url 要提交請求的頁面
* @param jsonData 要提交的數(shù)據(jù),利用Json傳遞
* @param tagName 要獲取值的標簽名
* @param getMsg 這個函數(shù)可以獲取到處理后的數(shù)據(jù)
*/
function ajaxXML(url,jsonData,tagName,getMsg)
{
//創(chuàng)建Ajax對象,ActiveXObject兼容IE5,6
var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
//打開請求
oAjax.open('POST',url,true);//方法,URL,異步傳輸
//發(fā)送請求
var data = '';
for(var d in jsonData) //拼裝數(shù)據(jù)
data += (d + '=' +jsonData[d] + '&');
oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
oAjax.send(data);
//接收返回,當服務(wù)器有東西返回時觸發(fā)
oAjax.onreadystatechange = function ()
{
if(oAjax.readyState == 4 && oAjax.status == 200)
{
var oXml = oAjax.responseXML; //返回的是一個XML DOM對象
var oTag = oXml.getElementsByTagName(tagName);
var tagValue = oTag[0].childNodes[0].nodeValue;
if(getMsg)getMsg(tagValue);
}
}
}
服務(wù)器端返回數(shù)據(jù)格式如下:
例如:
//返回的是xml格式
header("Content-Type:text/xml;charset=utf-8");
//返回的是text或Json格式
//header("Content-Type:text/html;charset=utf-8");
//禁用緩存,是為了數(shù)據(jù)一樣的前提下還能正常提交，而不是緩存數(shù)據(jù)
header("Cache-Control:no-cache");
$username = $_POST['username']; //獲取用戶名
if(empty($username))
echo '<user><mes>請輸入用戶名</mes></user>'; //這些標簽可以自定義
else if($username == 'acme')
echo '<user><mes>用戶名已被注冊</mes></user>';
else
echo '<user><mes>用戶名可用</mes></user>';
調(diào)用格式如下:
var url = 'abc.php';
var jsonData = {username:'acme'};
ajaxXML(url,jsonData,'mes',getMsg);
function getMsg(msg)
{
//do something
}
3.返回json
函數(shù)如下：
/**
* @function 利用ajax動態(tài)交換數(shù)據(jù)(Text/HTML格式)，但是返回的是Json類型的文本數(shù)據(jù)
* @param url 要提交請求的頁面
* @param jsonData 要提交的數(shù)據(jù),利用Json傳遞
* @param getMsg 這個函數(shù)可以獲取到處理后的數(shù)據(jù)
*/
function ajaxJson(url,jsonData,getMsg)
{
//創(chuàng)建Ajax對象,ActiveXObject兼容IE5,6
var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
//打開請求
oAjax.open('POST',url,true);//方法,URL,異步傳輸
//發(fā)送請求
var data = '';
for(var d in jsonData) //拼裝數(shù)據(jù)
data += (d + '=' +jsonData[d] + '&');
oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
oAjax.send(data);
//接收返回,當服務(wù)器有東西返回時觸發(fā)
oAjax.onreadystatechange = function ()
{
if(oAjax.readyState == 4 && oAjax.status == 200)
{
var json = eval('('+oAjax.responseText+')');//把傳回來的字符串解析成json對象
if(getMsg)getMsg(json);
}
}
}
服務(wù)器端返回數(shù)據(jù)格式如下:
例如:
//返回的是xml格式
//header("Content-Type:text/xml;charset=utf-8");
//返回的是text或Json格式
header("Content-Type:text/html;charset=utf-8");
//禁用緩存,是為了數(shù)據(jù)一樣的前提下還能正常提交，而不是緩存數(shù)據(jù)
header("Cache-Control:no-cache");
$username = $_POST['username']; //獲取用戶名
if(empty($username))
echo '{"mes":"請輸入用戶名"}';
else if($username == 'acme')
echo '{"mes":"用戶名已被注冊"}';
else
echo '{"mes":"用戶名可用"}';
調(diào)用格式如下:
url = 'abc.php';
var jsonData={username:'acme',passw:'acme'};
ajaxText(url,jsonData,getMsg);
function getMsg(msg)
{
//do something
}
為了方便使用，可以把三個函數(shù)合并.合并后的函數(shù)如下:
/**
* @function 利用ajax動態(tài)交換數(shù)據(jù)
* @param url 要提交請求的頁面
* @param jsonData 要提交的數(shù)據(jù),利用Json傳遞
* @param getMsg 這個函數(shù)可以獲取到處理后的數(shù)據(jù)
* @param type 接受的數(shù)據(jù)類型,text/xml/json
* @param tagName type = xml 的時候這個參數(shù)設(shè)置為要獲取的文本的標簽名
* @return 無
*/
function ajax(url,jsonData,getMsg,type,tagName)
{
//創(chuàng)建Ajax對象,ActiveXObject兼容IE5,6
var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
//打開請求
oAjax.open('POST',url,true);//方法,URL,異步傳輸
//發(fā)送請求
var data = '';
for(var d in jsonData) //拼裝數(shù)據(jù)
data += (d + '=' +jsonData[d]+'&');
oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
oAjax.send(data);
//接收返回,當服務(wù)器有東西返回時觸發(fā)
oAjax.onreadystatechange = function ()
{
if(oAjax.readyState == 4 && oAjax.status == 200)
{
if(type == 'text')
{
if(getMsg) getMsg(oAjax.responseText);
}
else if(type == 'json')
{
var json = eval('('+oAjax.responseText+')');//把傳回來的字符串解析成json對象
if(getMsg)getMsg(json);
}
else if(type == 'xml')
{
var oXml = oAjax.responseXML; //返回的是一個XML DOM對象
var oTag = oXml.getElementsByTagName(tagName);
var tagValue = oTag[0].childNodes[0].nodeValue;
if(getMsg)getMsg(tagValue);
}
}
}
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于Jquery 解決Ajax請求的頁面 瀏覽器后退前進功能，頁面刷新功能實效問題
- Js 代碼中,ajax請求地址后加隨機數(shù)防止瀏覽器緩存的原因
- AJAX 網(wǎng)頁保留瀏覽器前進后退等功能
- AJAX 常用函數(shù)創(chuàng)建XMLHTTP對象，區(qū)別IE，Mozilla瀏覽器
- JQuery的ajax獲取數(shù)據(jù)后的處理總結(jié)(html,xml,json)
- Jquery Ajax學習實例 向頁面發(fā)出請求，返回XML格式數(shù)據(jù)
- AJAX使用post發(fā)送數(shù)據(jù)xml格式接受數(shù)據(jù)
- jquery $.ajax()取xml數(shù)據(jù)的小問題解決方法
- 用Ajax讀取XML格式的數(shù)據(jù)
- 關(guān)于jquery ajax 調(diào)用帶參數(shù)的webservice返回XML數(shù)據(jù)一個小細節(jié)
相關(guān)文章
ajax實現(xiàn)session不過期(避免頁面過期的現(xiàn)象)
在寫博客時要寫好長時間但沒有出現(xiàn)這種情況并且有實時的自動保存；這就涉及到了session的過期時間問題，下面與大家分享下具體的實現(xiàn)方法2013-06-06
這篇文章主要介紹了Ajax跨域請求COOKIE無法帶上的解決辦法,需要的朋友可以參考下2017-04-04
瀏覽器跨域獲取Lrc歌詞數(shù)據(jù)的解決辦法...2007-03-03
ajax 清除緩存的兩種方法2007-10-10
ajax獲取json數(shù)據(jù)為undefined原因分析
Ajax 允許在不干擾 Web 應(yīng)用程序的顯示和行為的情況下在后臺進行數(shù)據(jù)檢索。這篇文章主要介紹了ajax獲取json數(shù)據(jù)為undefined--原因,需要的朋友可以參考下2017-11-11
本文主要給大家詳細講解了ajax的使用方法以及ajax案例分析，十分的使用，有需要的小伙伴可以參考下。2015-06-06
ajax與websocket的區(qū)別以及websocket常用使用方式 介紹
這篇文章主要介紹了ajax與websocket的區(qū)別以及websocket常用使用方式 介紹,需要的朋友可以參考下2018-06-06
ie發(fā)送ajax請求返回上一次結(jié)果的解決方法
這篇文章主要介紹了ie發(fā)送ajax請求返回上一次結(jié)果的解決方法,需要的朋友可以參考下2014-03-03![[asp]天楓AJAX百度音樂即時聽附下載](http://img.jbzj.com/images/xgimg/bcimg8.png)
[asp]天楓AJAX百度音樂即時聽附下載...2007-09-09
這篇文章主要介紹了雙層ajax嵌套（可多層）用法,實例分析了Ajax嵌套的相關(guān)使用技巧,可實現(xiàn)多層嵌套的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07