AJAX使用前端的window对象或JSON对象解析后端回传的JSON格式字符串获取信息------AJAX

旧约Alatus

已于 2023-11-14 22:16:34 修改

阅读量197

点赞数 5

分类专栏： AJAX 前端文章标签： javascript 前端 json js ajax vue.js react.js

于 2023-11-14 14:53:59 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134399089

版权

前端同时被 2 个专栏收录

329 篇文章 2 订阅

订阅专栏

AJAX

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax Get</title>
</head>
<body>
<script type="text/javascript">
  window.onload = function ()
  {
    document.getElementById("AJAX").onclick = function ()
    {
      //发送ajax请求
      console.log("发送请求");
      //4步发送AJAX请求
      //第一步创建ajax核心对象XMLHttpRequest
      var obj = new XMLHttpRequest();
      //第二步注册回调函数
      //当我们的readystate值发生改变我们就执行一次回调函数
      obj.onreadystatechange = function ()
      {
        //这里的内容会被调用多次
        //0到1到2到3到4(AJAX请求有四步)
        console.log(obj.readyState);
        //但这个值等于4的时候,就是响应结束了
        //响应结束之后一般会有一个Http的状态码
        //200成功,404丢失,500错误服务器
        if(obj.readyState === 4)
        {
          console.log(obj.status);
          if(obj.status === 200)
          {
              //通过XMLHttpRequest对象获取相应的信息,通过这个对象的responseText属性来取值
              console.log(obj.responseText);
              //通过innerHtml渲染显示到盒子里面
              document.getElementById("myDiv").innerHTML = obj.responseText;
          }
        }
      }
      //第三步开启通道
      //open函数方法的值都是啥
      //第一个method,请求方法,可以是get可以是post或者其他请求
      //url就是请求路径
      //async只能是true或者false,true表示支持异步请求,false表示不支持(同步请求)
      //一般都是支持异步的,这样用户体验更好,极少数情况是不支持的同步
      //username和password就是用户名和密码,有部分特殊资源是需要口令的,用户名和密码是用来对此做限制的
      //需要的较少,这个是身份认证用的
      obj.open("GET","/ajax/ajaxRequest1",true);
      //open只是打开通道,并不是执行,只是浏览器和服务器建立链接
      //第四步发送请求
      obj.send();
      // 这才是真正发送请求
    }
    document.getElementById("jsonTest").onclick = function ()
    {
        var address = { "city" : "北京","street" : "大兴区","zipCode" : "123456"};
        var json =
            {
                "username" : "zhangsan",
                "userCode" : 111,
                "sex" : true,
                "age" : 20,
                "aihaos" : ["喝酒","抽烟","烫头"],
                "address" : address
            };
        console.log(json.username);
        console.log(json.userCode);
        console.log(json.age);
        console.log(json.sex ? "男" : "女");
        console.log(json.address.city);
        console.log(json.address.street);
        console.log(json.address.zipCode)
        for (var i = 0; i < json.aihaos.length; i++) {
            console.log(json.aihaos[i]);
        }
    }
    document.getElementById("jsonTest1").onclick = function ()
    {
        var fromJava = "{\"userCode\" : 111,\"age\" : 20}";
        //用window对象调用eval函数解析即可
        window.eval("var json = " + fromJava);
        console.log(json);
        //使用JSON内置对象的parse方法来转换
        var jsonObj = JSON.parse(fromJava);
        console.log(jsonObj);
    }
  }
</script>
<!--  给一个按钮,用来发送ajax请求-->
  <input type="button" id="AJAX" value="AJAX请求发送"/>
<!--给一个DIV盒子用来显示ajax回传的数据信息-->
  <div id="myDiv"></div>
    <input type="button" id="jsonTest" value="jsonTest">
<input type="button" id="jsonTest1" value="jsonTest1">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax Get</title>
</head>
<body>
<script type="text/javascript">
  window.onload = function ()
  {
    document.getElementById("AJAX").onclick = function ()
    {
      //发送ajax请求
      console.log("发送请求");
      //4步发送AJAX请求
      //第一步创建ajax核心对象XMLHttpRequest
      var obj = new XMLHttpRequest();
      //第二步注册回调函数
      //当我们的readystate值发生改变我们就执行一次回调函数
      obj.onreadystatechange = function ()
      {
        //这里的内容会被调用多次
        //0到1到2到3到4(AJAX请求有四步)
        console.log(obj.readyState);
        //但这个值等于4的时候,就是响应结束了
        //响应结束之后一般会有一个Http的状态码
        //200成功,404丢失,500错误服务器
        if(obj.readyState === 4)
        {
          console.log(obj.status);
          if(obj.status === 200)
          {
              //通过XMLHttpRequest对象获取相应的信息,通过这个对象的responseText属性来取值
              console.log(obj.responseText);
              //通过innerHtml渲染显示到盒子里面
              document.getElementById("myDiv").innerHTML = obj.responseText;
          }
        }
      }
      //第三步开启通道
      //open函数方法的值都是啥
      //第一个method,请求方法,可以是get可以是post或者其他请求
      //url就是请求路径
      //async只能是true或者false,true表示支持异步请求,false表示不支持(同步请求)
      //一般都是支持异步的,这样用户体验更好,极少数情况是不支持的同步
      //username和password就是用户名和密码,有部分特殊资源是需要口令的,用户名和密码是用来对此做限制的
      //需要的较少,这个是身份认证用的
      obj.open("GET","/ajax/ajaxRequest1",true);
      //open只是打开通道,并不是执行,只是浏览器和服务器建立链接
      //第四步发送请求
      obj.send();
      // 这才是真正发送请求
    }
    document.getElementById("jsonTest").onclick = function ()
    {
        var address = { "city" : "北京","street" : "大兴区","zipCode" : "123456"};
        var json =
            {
                "username" : "zhangsan",
                "userCode" : 111,
                "sex" : true,
                "age" : 20,
                "aihaos" : ["喝酒","抽烟","烫头"],
                "address" : address
            };
        console.log(json.username);
        console.log(json.userCode);
        console.log(json.age);
        console.log(json.sex ? "男" : "女");
        console.log(json.address.city);
        console.log(json.address.street);
        console.log(json.address.zipCode)
        for (var i = 0; i < json.aihaos.length; i++) {
            console.log(json.aihaos[i]);
        }
    }
    document.getElementById("jsonTest1").onclick = function ()
    {
        var fromJava = "{\"userCode\" : 111,\"age\" : 20}";
        //用window对象调用eval函数解析即可
        window.eval("var json = " + fromJava);
        console.log(json);
        //使用JSON内置对象的parse方法来转换
        var jsonObj = JSON.parse(fromJava);
        console.log(jsonObj);
    }
  }
</script>
<!--  给一个按钮,用来发送ajax请求-->
  <input type="button" id="AJAX" value="AJAX请求发送"/>
<!--给一个DIV盒子用来显示ajax回传的数据信息-->
  <div id="myDiv"></div>
    <input type="button" id="jsonTest" value="jsonTest">
<input type="button" id="jsonTest1" value="jsonTest1">
</body>
</html>