Wie Ajax mit dem vom Server zurückgegebenen Datentyp umgeht

Dieses Mal zeige ich Ihnen, wie Ajax mit dem vom Server zurückgegebenen Datentyp umgeht und welche Vorsichtsmaßnahmen für die Ajax-Verarbeitung des vom Server zurückgegebenen Datentyps gelten ist ein praktischer Fall, schauen wir uns das einmal an.

Das Prinzip ist sehr einfach, die Struktur bleibt grundsätzlich unverändert, nur die Art und Weise der Verarbeitung der zurückgegebenen Daten wird geändert.

1. Text-/HTML-FormatDieser Rückgabetyp Die Verarbeitung ist sehr einfach. Zur Vereinfachung der Verwendung ist sie in die folgende Funktion gekapselt:

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

Das serverseitige Rückgabedatenformat ist wie folgt:
Zum Beispiel :

//返回的是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 '用户名可用';

Das Aufrufformat ist wie folgt:

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

2. XML-Format

gibt ein XML-DOM-Objekt zurück und analysiert es Die Daten ähneln der HTML-DOM-Programmierung. Rufen Sie beispielsweise über den Namen das Beschriftungsobjekt (Array-Form) ab, rufen Sie dann das erforderliche Beschriftungsobjekt aus dem Array ab und rufen Sie dann den Textwert aus dem Beschriftungsobjekt ab wie folgt:

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

Das vom Server zurückgegebene Datenformat ist wie folgt:

Zum Beispiel:

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

Das Aufrufformat ist wie folgt:

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

3. Die Rückgabe-JSON-Funktion

lautet wie folgt:

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

Das serverseitige Rückgabedatenformat lautet wie folgt:

Zum Beispiel:

//返回的是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":"用户名可用"}';

Das Aufrufformat ist wie folgt:

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

Zur Vereinfachung der Verwendung können Sie die drei Funktionen zusammenführen. Die zusammengeführten Funktionen sind wie folgt :

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man mit Jquery+Ajax-Anforderungsdaten ohne Aktualisierung umgeht

Wie man AJAX zur Implementierung eines Wasserfalls verwendet fließen

Das obige ist der detaillierte Inhalt vonWie Ajax mit dem vom Server zurückgegebenen Datentyp umgeht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!