ajax處理伺服器返回的三種資料類型方法_AJAX相關

其原理很簡單，結構上基本不變，只是改變處理返回資料的方式.

1.Text/HTML格式
這種傳回型別處理很簡單，直接就當作字串用就行了.為了方便使用，封裝成如下函數:

/** * @function 利用ajax動態交換資料(Text/HTML格式) * @param url  要提交請求的頁面 * @param jsonData 要提交的資料,利用Json傳遞 * @param getMsg 這個函數可以擷取到處理後的資料 */function ajaxText(url,jsonData,getMsg){  //建立Ajax對象,ActiveXObject相容IE5,6  var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");  //開啟請求  oAjax.open('POST',url,true);//方法,URL,非同步傳輸  //發送請求  var data = '';  for(var d in jsonData)  //拼裝資料    data += (d + '=' +jsonData[d]+'&');  oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");  oAjax.send(data);  //接收返回,當伺服器有東西返回時觸發  oAjax.onreadystatechange = function ()  {    if(oAjax.readyState == 4 && oAjax.status == 200)    {      if(getMsg) getMsg(oAjax.responseText);    }  }}

伺服器端返回資料格式如下:
例如:

//返回的是xml格式//header("Content-Type:text/xml;charset=utf-8");//返回的是text或Json格式header("Content-Type:text/html;charset=utf-8");//禁用緩衝,是為了資料一樣的前提下還能正常提交，而不是快取資料header("Cache-Control:no-cache");$username = $_POST['username']; //擷取使用者名稱if(empty($username))  echo '請輸入使用者名稱';else if($username == 'acme')  echo '使用者名稱已被註冊';else  echo '使用者名稱可用';

調用格式如下:

url = 'abc.php';var jsonData={username:'acme',passw:'acme'};ajaxText(url,jsonData,getMsg);function getMsg(msg){ //do something}

2.XML格式

返回的是一個XML DOM對象，解析其中的資料就類似於HTML DOM 編程. 比如通過name擷取標籤對象(數組形式)，再從該數組中擷取需要的標籤對象，再從標籤對象中擷取文本值.
函數如下:

/** * @function 利用ajax動態交換資料(XML格式) * @param url  要提交請求的頁面 * @param jsonData 要提交的資料,利用Json傳遞 * @param tagName 要擷取值的標籤名 * @param getMsg 這個函數可以擷取到處理後的資料 */function ajaxXML(url,jsonData,tagName,getMsg){  //建立Ajax對象,ActiveXObject相容IE5,6  var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");  //開啟請求  oAjax.open('POST',url,true);//方法,URL,非同步傳輸  //發送請求  var data = '';  for(var d in jsonData)  //拼裝資料    data += (d + '=' +jsonData[d] + '&');  oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");  oAjax.send(data);  //接收返回,當伺服器有東西返回時觸發  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);    }  }}

伺服器端返回資料格式如下:
例如:

//返回的是xml格式header("Content-Type:text/xml;charset=utf-8");//返回的是text或Json格式//header("Content-Type:text/html;charset=utf-8");//禁用緩衝,是為了資料一樣的前提下還能正常提交，而不是快取資料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>';

調用格式如下:

var url = 'abc.php';var jsonData = {username:'acme'};ajaxXML(url,jsonData,'mes',getMsg);function getMsg(msg) {   //do something }

3.返回json

函數如下：

/** * @function 利用ajax動態交換資料(Text/HTML格式)，但是返回的是Json類型的文本資料 * @param url  要提交請求的頁面 * @param jsonData 要提交的資料,利用Json傳遞 * @param getMsg 這個函數可以擷取到處理後的資料 */function ajaxJson(url,jsonData,getMsg){  //建立Ajax對象,ActiveXObject相容IE5,6  var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");  //開啟請求  oAjax.open('POST',url,true);//方法,URL,非同步傳輸  //發送請求  var data = '';  for(var d in jsonData)  //拼裝資料    data += (d + '=' +jsonData[d] + '&');  oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");  oAjax.send(data);  //接收返回,當伺服器有東西返回時觸發  oAjax.onreadystatechange = function ()  {    if(oAjax.readyState == 4 && oAjax.status == 200)    {      var json = eval('('+oAjax.responseText+')');//把傳回來的字串解析成json對象      if(getMsg)getMsg(json);    }  }}

伺服器端返回資料格式如下:

例如:

//返回的是xml格式//header("Content-Type:text/xml;charset=utf-8");//返回的是text或Json格式header("Content-Type:text/html;charset=utf-8");//禁用緩衝,是為了資料一樣的前提下還能正常提交，而不是快取資料header("Cache-Control:no-cache");$username = $_POST['username']; //擷取使用者名稱if(empty($username))  echo '{"mes":"請輸入使用者名稱"}';else if($username == 'acme')  echo '{"mes":"使用者名稱已被註冊"}';else  echo '{"mes":"使用者名稱可用"}';

調用格式如下:

url = 'abc.php';var jsonData={username:'acme',passw:'acme'};ajaxText(url,jsonData,getMsg);function getMsg(msg){ //do something}

為了方便使用，可以把三個函數合并.合并後的函數如下:

/** * @function 利用ajax動態交換資料 * @param url  要提交請求的頁面 * @param jsonData 要提交的資料,利用Json傳遞 * @param getMsg 這個函數可以擷取到處理後的資料 * @param type  接受的資料類型,text/xml/json * @param tagName type = xml 的時候這個參數設定為要擷取的文本的標籤名 * @return 無 */function ajax(url,jsonData,getMsg,type,tagName){  //建立Ajax對象,ActiveXObject相容IE5,6  var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");  //開啟請求  oAjax.open('POST',url,true);//方法,URL,非同步傳輸  //發送請求  var data = '';  for(var d in jsonData)  //拼裝資料    data += (d + '=' +jsonData[d]+'&');  oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");  oAjax.send(data);  //接收返回,當伺服器有東西返回時觸發  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);      }    }  }}

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。