分享ajax的三种解析模式

站长资源 2024/11/24 佚名

2 0 1

一、Ajax中的JSON格式

html代码：

<html>
<body>
 <input type="button" value="Ajax" id="btn">
 <script>
  var btn = document.getElementById("btn");
  btn.onclick = function(){
    var xhr = getXhr();
    xhr.open("post","10.php");
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    /*
     * 在客户端如何构建JSON格式
     * * 构建符合JSON格式的字符串
     */
    var user = '{"name":"zhangwuji","pwd":"123456"}';
    xhr.send("user="+user);
    xhr.onreadystatechange = function(){
      if(xhr.readyState==4&&xhr.status==200){
        var data = xhr.responseText;
        /*
         * 使用eval()函数进行转换
         * * 使用"()"将其包裹,eval()函数强制将其转换为JSON格式(javascript代码)
         * * 不使用"()"将其包裹,eval()函数将其识别为一个空的代码块
         */
        var json = eval("("+data+")");
        console.log(json);
      }
    }
  }
  function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest();
    }else{
      xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
  }
 </script>
 </body>
</html>

PHP代码：

<"a":1,"b":2,"c":3,"d":4,"e":5}';
  //var_dump(json_decode($json));
  // 响应数据符合JSON格式的字符串
  // 1. 手工方式构建
  //echo '{"name":"zhouzhiruo","pwd":"123456"}';
  // 2. 使用json_encode()函数
  echo json_encode($json_user);
"color: #0000ff">二    Ajax中的XML格式


html页面：


<html>
   <body>
 <input type="button" value="Ajax" id="btn">
 <script>
  var btn = document.getElementById("btn");
  btn.onclick = function(){
    // 实现Ajax的异步交互
    var xhr = getXhr();
    xhr.open("post","07.php");
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    /*
     * 如何构建符合XML格式的请求数据
     * * 注意
     *  * 请求数据的格式 - key=value 不能改变的
     * * 将value值构建成符合XML格式的数据
     *  * 数据类型 - 字符串(string)
     *  * 格式符合XML的语法要求
     * * 编写注意
     *  * 定义变量 - 专门构建XML格式的数据
     *  * 在send()方法进行拼串
     */
    var user = "<user><name>zhangwuji</name><pwd>123456</pwd></user>";
    xhr.send("user="+user);
    xhr.onreadystatechange = function(){
      if(xhr.readyState==4&&xhr.status==200){
        // 接收服务器端的响应数据
        var xmlDoc = xhr.responseXML;
        var nameEle = xmlDoc.getElementsByTagName("name")[0];
        var txtEle = nameEle.childNodes[0];
        console.log(txtEle.nodeValue);
      }
    }
  }
  function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest();
    }else{
      xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
  }
 </script>
 </body>
</html> 


PHP页面代码：


<"text/xml"
  header('Content-Type:text/xml');
  echo $user;// 符合XML格式的string类型
  */
  header('Content-Type:application/xml');
  echo $doc->saveXML();
"color: #0000ff">三   Ajax中的HTML格式


HTML页面：


<html>
  <body>
 <select id="province">
  <option>请选择</option>
  <option>山东省</option>
  <option>辽宁省</option>
  <option>吉林省</option>
 </select>
 <select id="city">
  <option>请选择</option>
 </select>
 <script>
  /*
   * 需要思考哪些事情"province");
  provinceEle.onchange = function(){
    // 清空
    var city = document.getElementById("city");
    var opts = city.getElementsByTagName("option");
    for(var z=opts.length-1;z>0;z--){
      city.removeChild(opts[z]);
    }
    if(provinceEle.value != "请选择"){
      // 2. 执行Ajax异步请求
      var xhr = getXhr();
      xhr.open("post","06.php");
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      xhr.send("provcince="+provinceEle.value);
      xhr.onreadystatechange = function(){
        if(xhr.readyState==4&&xhr.status==200){
          // 接收服务器端的数据内容
          var data = xhr.responseText;
          // data是字符串,转换为数组
          var cities = data.split(",");
          for(var i=0;i<cities.length;i++){
            var option = document.createElement("option");
            var textNode = document.createTextNode(cities[i]);
            option.appendChild(textNode);
            city.appendChild(option);
          }
        }
      }
    }
  }
  // 定义创建XMLHttpRequest对象的函数
  function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest();
    }else{
      xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
  }
 </script>
 </body>
</html> 


php页面：




<?php
  // 用于处理客户端请求二级联动的数据
  // 1. 接收客户端发送的省份信息
  $province = $_POST['provcince'];
  // 2. 判断当前的省份信息,提供不同的城市信息
  switch ($province){
    case '山东省':
      echo '青岛市,济南市,威海市,日照市,德州市';
      break;
    case '辽宁省':
      echo '沈阳市,大连市,铁岭市,丹东市,锦州市';
      break;
    case '吉林省':
      echo '长春市,松原市,吉林市,通化市,四平市';
      break;
  }
  // 服务器端响应的是字符串
?>


以上内容是小编给大家分享ajax的三种解析模式，希望大家喜欢。

ajax解析模式,ajax_json解析,ajax解析xml

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“分享ajax的三种解析模式”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

分享ajax的三种解析模式

比较Ajax的三种实现及JSON解析

js与jQuery终止正在发送的ajax请求的方法

评论“分享ajax的三种解析模式”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接