首頁 > web前端 > js教程 > 主體

ajax處理伺服器傳回的三種資料型別方法

韦小宝
發布: 2017-12-30 20:08:11
原創
2859 人瀏覽過

這篇文章主要介紹了ajax如何處理伺服器返回的三種資料類型,具有一定的參考和學習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 &#39;<user><mes>请输入用户名</mes></user>&#39;; //这些标签可以自定义
else if($username == &#39;acme&#39;)
  echo &#39;<user><mes>用户名已被注册</mes></user>&#39;;
else
  echo &#39;<user><mes>用户名可用</mes></user>&#39;;
登入後複製


呼叫格式如下:

var url = &#39;abc.php&#39;;
var jsonData = {username:&#39;acme&#39;};
ajaxXML(url,jsonData,&#39;mes&#39;,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(&#39;POST&#39;,url,true);//方法,URL,异步传输
  //发送请求
  var data = &#39;&#39;;
  for(var d in jsonData)  //拼装数据
    data += (d + &#39;=&#39; +jsonData[d] + &#39;&&#39;);
  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(&#39;(&#39;+oAjax.responseText+&#39;)&#39;);//把传回来的字符串解析成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[&#39;username&#39;]; //获取用户名
if(empty($username))
  echo &#39;{"mes":"请输入用户名"}&#39;;
else if($username == &#39;acme&#39;)
  echo &#39;{"mes":"用户名已被注册"}&#39;;
else
  echo &#39;{"mes":"用户名可用"}&#39;;
登入後複製


呼叫格式如下:


url = &#39;abc.php&#39;;
var jsonData={username:&#39;acme&#39;,passw:&#39;acme&#39;};
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(&#39;POST&#39;,url,true);//方法,URL,异步传输
  //发送请求
  var data = &#39;&#39;;
  for(var d in jsonData)  //拼装数据
    data += (d + &#39;=&#39; +jsonData[d]+&#39;&&#39;);
  oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  oAjax.send(data);
  //接收返回,当服务器有东西返回时触发
  oAjax.onreadystatechange = function ()
  {
    if(oAjax.readyState == 4 && oAjax.status == 200)
    {
      if(type == &#39;text&#39;)
      {
        if(getMsg) getMsg(oAjax.responseText);
      }
      else if(type == &#39;json&#39;)
      {
        var json = eval(&#39;(&#39;+oAjax.responseText+&#39;)&#39;);//把传回来的字符串解析成json对象
        if(getMsg)getMsg(json);
      }
      else if(type == &#39;xml&#39;)
      {
        var oXml = oAjax.responseXML; //返回的是一个XML DOM对象
        var oTag = oXml.getElementsByTagName(tagName);
        var tagValue = oTag[0].childNodes[0].nodeValue;
        if(getMsg)getMsg(tagValue);
      }

    }
  }
}
登入後複製


#以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援PHP中文網。


相關推薦:

實例詳解jQuery Ajax使用Token驗證身分

##前端ajax與後端交互詳解

原生ajax瀑布流demo實例分享#

以上是ajax處理伺服器傳回的三種資料型別方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板