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

最新推荐文章于 2023-03-10 19:47:05 发布

原创最新推荐文章于 2023-03-10 19:47:05 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Web #JavaScript #Ajax获取JSON数据 #Ajax获取头部信息

JavaScript 同时被 2 个专栏收录

47 篇文章

订阅专栏

web

41 篇文章

订阅专栏

获取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'" +
            "}");
%>

点击测试按钮，弹出信息：
在这里插入图片描述
注意：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>