サーバーから返された 3 つのデータ型を Ajax で処理する

韦小宝
リリース: 2017-12-30 20:08:11
オリジナル
2832 人が閲覧しました

この記事は主に、ajax がサーバーから返される 3 つのデータ型をどのように処理するかを紹介します。ajax に興味のある友人は参考にしてください。原理は非常に単純で、構造は基本的に次のとおりです。変更は、返されたデータの処理方法を変更するだけです。

1. テキスト/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 '用户名可用';
ログイン後にコピー


呼び出し形式は次​​のとおりです:



2.X ML 形式

が返されます。これは XML DOM オブジェクトであり、その中のデータの解析は HTML DOM プログラミングと似ています。たとえば、名前を通じてタグ オブジェクトを (配列形式で) 取得し、その後、配列から必要なタグ オブジェクトを取得し、タグ オブジェクトからテキスト値を取得します。

関数は次のとおりです:


url = 'abc.php';
var jsonData={username:'acme',passw:'acme'};
ajaxText(url,jsonData,getMsg);
function getMsg(msg)
{
 //do something
}
ログイン後にコピー


サーバー側の戻りデータ形式は次のとおりです:

例:


/**
 * @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;;
ログイン後にコピー


3.Return json

関数は次のとおりです:


var url = &#39;abc.php&#39;;
var jsonData = {username:&#39;acme&#39;};
ajaxXML(url,jsonData,&#39;mes&#39;,getMsg);
function getMsg(msg)
 {
   //do something
 }
ログイン後にコピー


サーバー-側の戻りデータ形式は次のとおりです:


例:


/**
 * @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;;
ログイン後にコピー


これを使用すると、3 つの関数をマージできます統合された関数は次のとおりです:


url = &#39;abc.php&#39;;
var jsonData={username:&#39;acme&#39;,passw:&#39;acme&#39;};
ajaxText(url,jsonData,getMsg);
function getMsg(msg)
{
 //do something
}
ログイン後にコピー


以上がこの記事の全内容です。皆様の学習に役立つことを願っております。また、皆様も PHP 中国語 Web サイトをサポートしていただければ幸いです。

関連する推奨事項:

例の詳細な説明 jQuery Ajax はトークンを使用して ID を検証します

フロントエンド Ajax とバックエンド インタラクションの詳細な説明

ネイティブ Ajax ウォーターフォール フロー デモ例の共有

以上がサーバーから返された 3 つのデータ型を Ajax で処理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!