Ajax和Json基础

逃离我推掉我的手 2024-04-18 15:44 178阅读 0赞

我的网站：欢迎大家访问奥
在这里插入图片描述

Ajax&Json

Ajax

概念

AJAX即Asynchronous Javascript And XML（异步JavaScript和XML），是改善用户体验的网页开发技术

作用

提高传输效率，提升用户体验

减少服务器与浏览器之间的数据传输

实质

通过浏览器的Ajax对象发送异步请求

获取Ajax对象，Ajax没有标准化，需要区分浏览器

同步和异步交互方式

同步

同步，可以理解为在执行完一个函数或方法之后，一直等待系统返回值或消息，这时程序是出于阻塞的，只有接收到返回的值或消息后才往下执行其他的命令

相当于浏览器给服务器发送一个请求，然后进行等待，一直到请求响应后再执行操作

异步

异步请求，发送请求的同事还可以继续操作页面。页面不销毁；

返回部分数据，减少不必要的数据承传输，介绍网络资源。页面不刷新，而是更新页面部分数据

相当于浏览器给服务器发送请求，但是同时还可以继续执行后面的操作，不会等待

直观一点

同步：你先做完我再做，后一步的操作必须要等待前一步操作的结果

异步：各做各的相互不干扰（效率高）

获取Ajax对象

  1. function getXhr(){
  3. var xhr = null;
  4. if(window.XMLHttpRequest){
  5.     //针对其他浏览器
  6. xhr = new XMLHttpRequest();
  7. }else{
  8.     //针对低版本的ie浏览器
  9. xhr = new ActiveXObject('Microsoft.XMLHTTP');
  10. }
  11. return xhr;
  12. }

Ajax发送请求

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <body>
  8.     <form enctype="application/x-www-form-urlencoded">
  9.         <input /> <input /> <input type="submit" />
  10.         <br/>
  11.         <input type="button" onclick="randomData()" value="获取随机数"/>
  12.     </form>
  13.     <script type="text/javascript">
  14.      function getXhr(){
  16.         var xhr = null;
  17.         if(window.XMLHttpRequest){
  19.             xhr = new XMLHttpRequest;
  20.         }else{
  22.             xhr = new ActiveXObject('Microsoft.XMLHTTP');
  23.         }
  24.         return xhr;
  25.      } 
  27.          //get方式请求
  28.         /* var xhr = getXhr();//获取ajax对象
  29.         xhr.open("get","ajaxGet?name=fueen");
  30.         xhr.send(null);
  31.         xhr.onreadystatechange = function(){
  32.             if(xhr.readyState==4 && xhr.status==200){//200表示请求成功
  33.                 var json = JSON.parse(xhr.responseText);//解析接收到的Json对象
  34.                 alert(json.inputdate);//打印inputdate值
  35.                 //alert(xhr.responseText);
  36.             }
  37.         }  */
  40.         //post方式请求
  42.         function randomData(){
  44.             var xhr = getXhr();//获取Ajax对象
  45.             var name="冲冲冲";
  46.             xhr.open("post","ajaxPost");//设置请求方式和请求地址
  47.             xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
  48.             xhr.send("username="+name);
  49.             xhr.onreadystatechange = function(){
  51.                 if(xhr.readyState==4 && xhr.status==200){
  53.                     alert(xhr.responseText);
  54.                 }
  55.             }
  57.         }
  62.     </script>
  63. </body>
  65. </html>

Json

简介

JSON：JavaScript 对象表示法（JavaScript Object Notation）

JSON 是存储和交换文本信息的语法。类似 XML

JSON 比 XML 更小、更快，更易解析

Java对象转换为Json对象

  1. @Controller
  2. public class JsonController {
  4.     @ResponseBody    //加入注解将返回值类型转为json
  5.     @RequestMapping("/json")
  6.     public List<User> json(Model model) {
  8.         System.out.println("json来咯");
  9.         User user1 = new User("曾经沧海难为水","乌斯怀亚的灯塔");
  10.         User user2 = new User("布宜诺斯艾利斯的海岸","伊瓜苏瀑布");
  11.         List<User> list = new ArrayList<User>();
  12.         list.add(user1);
  13.         list.add(user2);
  14.         return list;
  15.         //model.addAttribute("json", list);
  16.         //return "jsp/json";
  17.     }
  18. }

解析Json对象

JS原生的方法进行转换

  1. var json = JSON.parse(xhr.responseText);//解析接收到的Json对象
  2.                 alert(json.inputdate);//打印Json中inputdate的值

发表评论

表情：
评论列表 （有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读