Ajax traitant trois types de données renvoyées par le serveur-js tutoriel-php.cn

Ajax traitant trois types de données renvoyées par le serveur

韦小宝

Libérer： 2017-12-30 20:08:11

original

2871 Les gens l'ont consulté

Cet article présente principalement comment ajax gère les trois types de données renvoyés par le serveur. Il a certaines références et valeurs pour apprendre ajax. Les amis qui sont intéressés par ajax peuvent s'y référer

Le principe est très simple. , la structure est fondamentalement inchangée, mais la manière de traiter les données renvoyées est modifiée

1 Format Texte/HTML
Ce type de retour est très simple à gérer, il suffit de le traiter. comme caractère Utilisez-le simplement dans une chaîne Pour plus de commodité d'utilisation, il est encapsulé dans la fonction suivante :

/**
 * @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(&#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(getMsg) getMsg(oAjax.responseText);
    }
  }
}

Copier après la connexion

Le format des données renvoyées par le serveur est le suivant :
Par exemple :

//返回的是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;请输入用户名&#39;;
else if($username == &#39;acme&#39;)
  echo &#39;用户名已被注册&#39;;
else
  echo &#39;用户名可用&#39;;

Copier après la connexion

Le format d'appel est le suivant :

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

Copier après la connexion

2. Le format XML

renvoie un XML L'objet DOM et l'analyse des données sont similaires à la programmation HTML DOM. Par exemple, obtenez l'objet étiquette (sous forme de tableau) via le nom, puis obtenez l'objet étiquette requis du tableau, puis obtenez la valeur texte de l'objet étiquette.
la fonction est la suivante :

/**
 * @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(&#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 oXml = oAjax.responseXML; //返回的是一个XML DOM对象
      var oTag = oXml.getElementsByTagName(tagName);
      var tagValue = oTag[0].childNodes[0].nodeValue;
      if(getMsg)getMsg(tagValue);
    }
  }
}

Copier après la connexion

Le format de données renvoyé par le serveur est le suivant :
Pour exemple :

//返回的是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;<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;;

Copier après la connexion

Le format d'appel est le suivant :

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

Copier après la connexion

3. Renvoyer json

La fonction est la suivante :

/**
 * @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);
    }
  }
}

Copier après la connexion

Le format des données renvoyées par le serveur est le suivant :

Par exemple :

//返回的是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;;

Copier après la connexion

Le format d'appel est le suivant :

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

Copier après la connexion

Pour facilité d'utilisation, vous pouvez fusionner les trois fonctions. Les fonctions fusionnées sont les suivantes :

/**
 * @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);
      }

    }
  }
}

Copier après la connexion

Ce qui précède est l'intégralité. contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP en chinois.

Recommandations associées :

Exemple détaillé de jQuery Ajax utilisant un jeton pour vérifier l'identité

Interaction entre front- fin d'ajax et back-end Explication détaillée

Partage d'exemples de démonstration de flux de cascade ajax natif

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!