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

柔光的暖阳◎ 2024-02-18 10:29 24阅读 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>
>     
>       <input type="button" id="AJAX" value="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>
>     
>       <input type="button" id="AJAX" value="AJAX请求发送"/>
>     
>       <div id="myDiv"></div>
>         <input type="button" id="jsonTest" value="jsonTest">
>     <input type="button" id="jsonTest1" value="jsonTest1">
>     </body>
>     </html>