Welche Datentypen kann Ajax mit der Rückgabe vom Server verarbeiten?-js-Tutorial-php.cn

Dieses Mal zeige ich Ihnen, welche Datentypen von Ajax verarbeitet und vom Server zurückgegeben werden können? , was sind die Vorsichtsmaßnahmen für den Ajax-Verarbeitungsserver-Rückgabedatentyp? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

1.Text/HTML-FormatDieser Rückgabetyp ist sehr einfach zu handhaben, verwenden Sie ihn einfach als String. Zur Vereinfachung der Verwendung ist er 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);
    }
  }
}

Nach dem Login kopieren

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 '请输入用户名';
else if($username == 'acme')
  echo '用户名已被注册';
else
  echo '用户名可用';

Nach dem Login kopieren

Das Aufrufformat ist wie folgt:

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

Nach dem Login kopieren

2.XML-Format

zurückgegeben Es handelt sich um ein XML-DOM-Objekt, und das Parsen der darin enthaltenen Daten ähnelt der HTML-DOM-Programmierung. Beispielsweise wird das Tag-Objekt (in Array-Form) über den Namen abgerufen und dann das erforderliche Tag-Objekt abgerufen aus dem Array und dann den Textwert aus dem Tag-Objekt abrufen:

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

Nach dem Login kopieren

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 '<user><mes>请输入用户名</mes></user>'; //这些标签可以自定义
else if($username == 'acme')
  echo '<user><mes>用户名已被注册</mes></user>';
else
  echo '<user><mes>用户名可用</mes></user>';

Nach dem Login kopieren

Das Aufrufformat ist wie folgt:

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

Nach dem Login kopieren

3. JSON zurückgeben

Die Funktion ist 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);
    }
  }
}

Nach dem Login kopieren

Der Server -seitiges 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 '{"mes":"请输入用户名"}';
else if($username == 'acme')
  echo '{"mes":"用户名已被注册"}';
else
  echo '{"mes":"用户名可用"}';

Nach dem Login kopieren

Das Aufrufformat ist wie folgt:

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

Nach dem Login kopieren

Zur Vereinfachung der Verwendung können Sie die drei Funktionen zusammenführen . Die zusammengeführte Funktion lautet 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);
      }
    }
  }
}

Nach dem Login kopieren

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:

Ajax-Asynchron-Download-Datei

So bedienen Sie Ajax, um den HTML-Tag-Stil zurückzugeben

So laden Sie Dateien und Bilder asynchron mit Ajax hoch

Das obige ist der detaillierte Inhalt vonWelche Datentypen kann Ajax mit der Rückgabe vom Server verarbeiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!