主頁 > 知識庫 > ajax處理服務(wù)器返回的三種數(shù)據(jù)類型方法

ajax處理服務(wù)器返回的三種數(shù)據(jù)類型方法

熱門標(biāo)簽:立陶宛地圖標(biāo)注 河間市地圖標(biāo)注app 中國地圖標(biāo)注不明確情況介紹表 大眾點評400電話怎么申請 電銷機(jī)器人 長春 地圖標(biāo)注推銷坑人 上海企業(yè)外呼系統(tǒng)價錢 東平縣地圖標(biāo)注app 怎樣在地圖標(biāo)注文字

其原理很簡單,結(jié)構(gòu)上基本不變,只是改變處理返回數(shù)據(jù)的方式.

1.Text/HTML格式
這種返回類型處理很簡單,直接就當(dāng)作字符串用就行了.為了方便使用,封裝成如下函數(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);
  //接收返回,當(dāng)服務(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獲取標(biāo)簽對象(數(shù)組形式),再從該數(shù)組中獲取需要的標(biāo)簽對象,再從標(biāo)簽對象中獲取文本值.
函數(shù)如下:

/**
 * @function 利用ajax動態(tài)交換數(shù)據(jù)(XML格式)
 * @param url  要提交請求的頁面
 * @param jsonData 要提交的數(shù)據(jù),利用Json傳遞
 * @param tagName 要獲取值的標(biāo)簽名
 * @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);
  //接收返回,當(dāng)服務(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>'; //這些標(biāo)簽可以自定義
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);
  //接收返回,當(dāng)服務(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è)置為要獲取的文本的標(biāo)簽名
 * @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);
  //接收返回,當(dāng)服務(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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

您可能感興趣的文章:
  • 基于Jquery 解決Ajax請求的頁面 瀏覽器后退前進(jìn)功能,頁面刷新功能實效問題
  • Js 代碼中,ajax請求地址后加隨機(jī)數(shù)防止瀏覽器緩存的原因
  • AJAX 網(wǎng)頁保留瀏覽器前進(jìn)后退等功能
  • AJAX 常用函數(shù)創(chuàng)建XMLHTTP對象,區(qū)別IE,Mozilla瀏覽器
  • JQuery的ajax獲取數(shù)據(jù)后的處理總結(jié)(html,xml,json)
  • Jquery Ajax學(xué)習(xí)實例 向頁面發(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ù)一個小細(xì)節(jié)

標(biāo)簽:益陽 營口 遼寧 本溪 內(nèi)江 四川 玉樹 銅川

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《ajax處理服務(wù)器返回的三種數(shù)據(jù)類型方法》,本文關(guān)鍵詞  ajax,處理,服務(wù)器,返回,的,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《ajax處理服務(wù)器返回的三種數(shù)據(jù)類型方法》相關(guān)的同類信息!
  • 本頁收集關(guān)于ajax處理服務(wù)器返回的三種數(shù)據(jù)類型方法的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章