Ajax响应数据解析_data.responsetext-CSDN博客

本文链接：https://blog.csdn.net/SUNBOYmxbsH/article/details/119985312

Ajax响应数据主要有responseText和responseXML两种，解析主要分为这两种格式的解析，其中最常用的是responseText，并将其转为JSON进行解析。

1、解析responseText

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON数据解析</title>
    <script type="text/javascript">
      /**
       *  js对象和json数据的区别：
       *  1、json数据没有变量；
       *  2、json心事的数据结尾没有分号；
       *  3、json数据中的键必须用双引号；
       */
      //  js对象
      var jsObj = {
        name: "小明",
        age: 30,
        lover: ["swimming", "sing", "dancing"],
        socre: {
          chinese: 80,
          math: 95,
          english: 88
        }
      };

      //  json对象
      var jsonObj = {
        "name": "小明",
        "age": 30,
        "lover": ["swimming", "sing", "dancing"],
        "socre": {
          "chinese": 80,
          "math": 95,
          "english": 88
        }
      };

      /**
       * 使用Ajax发送请求的步骤：
       */
      //1、创建XMLHttpRequest对象
      // var xhr = new XMLHttpRequest();// IE6不支持

      // 兼容性处理方法
      var xhr = null;
      if (window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
      } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }

      //  另一种方法
      // try {
      //   xhr = new XMLHttpRequest();
      // } catch (e){
      //   xhr = new ActiveXObject("Microsoft.XMLHTTP");
      // }

      /**
       * readyState=0 表示XMLHttpRequest对象准备完毕
       */
      // console.log(xhr.readyState + "==========1==========");

      //  2、准备发送
      // xhr.open(method, url, async);
      /**
       * method 请求方式
       * url 请求路径
       * async  是否异步
       */
      xhr.open("post", "07 data.json", true);
      //    3、执行发送
      //    需要设置请求头
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send(null);//post请求参数，不需要转码
      //    4、指定回调函数
      /**
       * readyState=1 表示已经发送了请求
       */
      // console.log(xhr.readyState + "==========2==========");
      xhr.onreadystatechange = function (){
        // console.log(xhr.readyState + "==========3==========");
        /**
         * readyState=2 表示浏览器已经收到了服务器的响应数据
         * readyState=3 表示正在解析数据
         * readyState=4 表示数据已经解析完成，可以使用了，但是返回的数据不一定是正常的
         */
        if (xhr.readyState == 4){

          /**
           * 200 表示响应成功
           * 404 表示资源未找到
           * 500 表示服务器错误
           */
          if (xhr.status == 200){
            var data = xhr.responseText;
            console.log(data);
            var jsonObj = JSON.parse(data);//将JSON格式的数据转换为JSON对象
            // var str = JSON.stringify(jsonObj);//  将JSON对象转换为JSON格式的字符串
            // var temp = eval("(" + data + ")");// eval将字符串解析为js代码，并执行，不安全
            console.log(jsonObj);
            console.log("name:" + jsonObj.name);
            console.log("name:" + jsonObj.age);
            console.log("name:" + jsonObj.lover);
            console.log("name:" + jsonObj.score.chinese);
            console.log("name:" + jsonObj.score.math);
            console.log("name:" + jsonObj.score.english);

          }
        }
      };

    </script>
</head>
<body>

</body>
</html>

2、解析responseXML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>XML数据解析</title>
        <script type="text/javascript">
            /**
             * 使用Ajax发送请求的步骤：
             */
                //1、创建XMLHttpRequest对象
                // var xhr = new XMLHttpRequest();// IE6不支持
    
                // 兼容性处理方法
            var xhr = null;
            if (window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
    
            //  另一种方法
            // try {
            //   xhr = new XMLHttpRequest();
            // } catch (e){
            //   xhr = new ActiveXObject("Microsoft.XMLHTTP");
            // }
    
            /**
             * readyState=0 表示XMLHttpRequest对象准备完毕
             */
            console.log(xhr.readyState + "==========1==========");
    
            //  2、准备发送
            // xhr.open(method, url, async);
            /**
             * method 请求方式
             * url 请求路径
             * async  是否异步
             */
            xhr.open("post", "06 data.xml", true);
            //    3、执行发送
            //    需要设置请求头
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(null);//post请求参数，不需要转码
            //    4、指定回调函数
            /**
             * readyState=1 表示已经发送了请求
             */
            console.log(xhr.readyState + "==========2==========");
            xhr.onreadystatechange = function (){
                console.log(xhr.readyState + "==========3==========");
                /**
                 * readyState=2 表示浏览器已经收到了服务器的响应数据
                 * readyState=3 表示正在解析数据
                 * readyState=4 表示数据已经解析完成，可以使用了，但是返回的数据不一定是正常的
                 */
                if (xhr.readyState == 4){
    
                    /**
                     * 200 表示响应成功
                     * 404 表示资源未找到
                     * 500 表示服务器错误
                     */
                    if (xhr.status == 200){
                        var data = xhr.responseXML;
                        // console.log(data);
    
                        //  解析xml内容
                    var books = data.getElementsByTagName("books");
                    var bookChildrenList = books[0].children;
                    for (var index=0; index<bookChildrenList.length; index++) {
                        var item = bookChildrenList[index];
                        // console.log(item);
                        var tempChild = item.children;
                        for (var i = 0; i < tempChild.length; i++) {
                            console.log(tempChild[i].innerHTML);
                        }
                    }
                }
            }
        };
    </script>
</head>
<body>

</body>
</html>