JS--AJAX获取JSON数据、获取头部信息

- 日理万妓 2021-08-13 21:05 493阅读 0赞

#### 获取HTML文本 ####

通过XMLHttpRequest对象的responseText属性获取返回的JSON数据字符串，然后可以使用evaluate()方法将其解析为本地JavaScript对象，从该对象中再读取任何想要的信息。

示例：将JSON对象字符串转换为本地对象

<%--
      Created by IntelliJ IDEA.
      User: 19798
      Date: 2019/9/28
      Time: 9:39
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <script>
            function createXMLHTTPObject() { 
                var XMLHttpFactories = [//兼容不同浏览器和版本的创建函数数组
                    function () { return new XMLHttpRequest()},
                    function () { return new ActiveXObject("Msxml2.XMLHTTP")},
                    function () { return new ActiveXObject("Msxml3.XMLHTTP")},
                    function () { return new ActiveXObject("Microsoft.XMLHTTP")}
                 ];
                var xmlhttp = false;
                for(var i = 0; i < XMLHttpFactories.length; i++){ 
                    //尝试调用匿名函数，如果成功则返回XMLHttpRequest对象，否则继续调用下一个
                    try{ 
                        xmlhttp = XMLHttpFactories[i]();
                    }catch (e) { 
                        continue;
                    }
                    break;
                }
                return xmlhttp;
            }
        </script>
    </head>
    <body>
        <h1>AJAX测试</h1>
        <button id="btn" value="btn" onclick="f()">按钮</button>
        <script>
            function f() { 
                var ajax = createXMLHTTPObject();
                ajax.onreadystatechange = function(){ 
                    if(ajax.readyState == 4 && ajax.status == 200){ 
                        var info = ajax.responseText;
                        var o = eval("(" + info + ")");
                        alert(info);
                    }
                }
                ajax.open("get", "response.jsp",true);
                ajax.send();
            }
        </script>
    </body>
    </html>

response.jsp:

<%
        response.getWriter().write("{" +
                "name:'shangsan',age:'18'" +
                "}");
    %>

点击测试按钮，弹出信息：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]  
注意：eval()方法在解析字符串时存在安全隐患。如果JSON字符串中含有恶意代码，在调用回调函数时可能被执行。

解决方法：使用一种能够识别有效JSON语法的解析程序，当解析程序一旦匹配到JSON字符串中包含不规范的对象，会直接中断或者不执行其中的恶意代码。

#### 头部信息 ####

每个HTTO请求和响应的头部都包含一组消息，对于开发人员来说，获取这些信息具有重要的参考价值。XMLHttpRequest对象提供了两个方法用于设置或获取头部信息。

*  getAllResponseHeaders()：获取响应的所有HTTP头信息
 *  getResponseHeader()：从响应信息中获取指定的HTTP头信息

示例：获取所有HTTP响应头信息：

<h1>AJAX测试</h1>
     <button id="btn" value="btn" onclick="f()">按钮</button>
     <script>
         function f() { 
             var ajax = createXMLHTTPObject();
             ajax.onreadystatechange = function(){ 
                 if(ajax.readyState == 4 && ajax.status == 200){ 
                     alert(ajax.getAllResponseHeaders());
                 }
             }
             ajax.open("get", "response.jsp",true);
             ajax.send();
         }
     </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]  
示例2：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/e2885229055f48e69aba859f05fdbe4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]: /images/20210813/a2e74eabe1cd4a859e5a19fedf6a5945.png