Ajax

2021/4/19 10:56:51

本文主要是介绍Ajax,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

前文

我是学Java后端的但是最近面试了很多后端岗位,面试官问我会不会HTML,会不会CSS,会不会JS,会不会Ajax,我当时心里就一句nmd,所以就强忍心中的愤怒,学习了一些Ajax

Ajax

  1. 什么是Ajax

    Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
    通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    划重点1Ajax的主要目的是为了,在不需要重新加载整个网页的前提下,使网页的一部分更新

    划重点2为了实现部分更新,就需要前端和后台之间的少量数据交换,包括前端向后台提交数据和前端从后台读取数据

    划重点3异步和同步:客户端和服务器端相互通信的基础上
    (同步)客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作
    (异步)客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作

    划重点4用途:提升用户体验

    划重点5传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面

  2. 实现方式

    1. 原生的JS实现方式(基础)

      1. 创建核心对象

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5iCP6Tm5-1618798816505)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210419090336428.png)]

      2. 建立连接

        1. 向服务器发送请求

          如需将请求发送到服务器,我们使用XMLHttpRequest对象的 open() 和 send() 方法

          xmlhttp.open("GET","test1.txt",true);
          xmlhttp.send();
          

          [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O3tGj5OB-1618798816508)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210419090848759.png)]

          GET和POST选哪个:一般情况下是通用的

          但是下面的需要POST请求

          1. 无法使用缓存文件(更新服务器上的文件或数据库)
          2. 向服务器发送大量数据(POST 没有数据量限制)
          3. 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

          区别

          1. get方式,请求参数在url后面拼接,send方法参数为空[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sZdvRLdZ-1618798816511)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210419091407437.png)]
          2. post方式,请求参数在send方法中定义[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-InRocyFN-1618798816514)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210419091534271.png)]
        2. 接受服务器响应,处理数据

          如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iVKFxJhd-1618798816515)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210419091911927.png)]

          1. 如果来自服务器的响应并非 XML,请使用 responseText 属性,responseText 属性返回字符串形式的响应

            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            

            例子:在这里插入图片描述

            在这里插入图片描述

          2. 如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用responseXML 属性:请求 books.xml文件,并解析响应

            xmlDoc=xmlhttp.responseXML;
            txt="";
            x=xmlDoc.getElementsByTagName("ARTIST");
            for (i=0;i<x.length;i++)
              {
              txt=txt + x[i].childNodes[0].nodeValue + "<br />";
              }
            document.getElementById("myDiv").innerHTML=txt;
            
      3. JS实现

        //1.创建核心对象
                var xmlhttp;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
        <--------------------------------------------------------------------->
                //2. 建立连接
                /*
                    参数:
                        1. 请求方式:GET、POST
                            * get方式,请求参数在URL后边拼接。send方法为空参
                            * post方式,请求参数在send方法中定义
                        2. 请求的URL:
                        3. 同步或异步请求:true(异步)或 false(同步)
        
                 */
                xmlhttp.open("GET","ajaxServlet?username=tom",true);
        <--------------------------------------------------------------------->
                //3.发送请求
                xmlhttp.send();
        <--------------------------------------------------------------------->
                //4.接受并处理来自服务器的响应结果
                //获取方式 :xmlhttp.responseText
                //什么时候获取?当服务器响应成功后再获取
        
                //当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。
                xmlhttp.onreadystatechange=function()
                {
                    //判断readyState就绪状态是否为4,判断status响应状态码是否为200
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                       //获取服务器的响应结果
                        var responseText = xmlhttp.responseText;
                        alert(responseText);
                    }
                }
        
        
    2. jQuery实现方式(简洁)

      1. $.ajax()
        * 语法:$.ajax({键值对});
        //使用$.ajax()发送异步请求
                  $.ajax({
                      url:"ajaxServlet1111" , // 请求路径
                      type:"POST" , //请求方式
                      //data: "username=jack&age=23",//请求参数
                      data:{"username":"jack","age":23},
                      success:function (data) {
                          alert(data);
                      },//响应成功后的回调函数
                      error:function () {
                          alert("出错啦...")
                      },//表示如果请求响应出现错误,会执行的回调函数
        
                      dataType:"text"//设置接受到的响应数据的格式
                  });
        
      2. $.get():发送get请求
        * 语法:$.get(url, [data], [callback], [type])
        		* 参数:
        			* url:请求路径
        			* data:请求参数
        			* callback:回调函数
        			* type:响应结果的类型
        <--------------------------------------------------------------------->
        			<script src="js/jquery-3.3.1.min.js"></script>
        			</head>
        			<script>
        			    function fun() {
        			        $.get(
        			        	//url:请求路径
        			            url ="/test/jqueryServlet",
        			            //data:请求参数
        			            {"username":"jack"},
        			            //callback:回调函数
        			            function (data) {
        			                alert(data)
        			            },
        			            //type:响应结果的类型
        			            type="text"
        			        )
        			    }
        			</script>
        			<body>
        			<input type="button" value="点击" onclick=fun();>
        			<input type="text">
        			</body>
        
      3. $.post():发送post请求
        * 语法:$.post(url, [data], [callback], [type])
        					* 参数:
        						* url:请求路径
        						* data:请求参数
        						* callback:回调函数
        						* type:响应结果的类型
            		    <script src="js/jquery-3.3.1.min.js"></script>
        				</head>
        				<script>
        				  function fun() {
        				      $.post(
        				          url ="/test/jqueryServlet",
        				          {"username":"jack"},
        				          function (data) {
        				              alert(data)
        				          },
        				          type="text"
        				      )
        				  }
        				</script>
        				<body>
        				<input type="button" value="点击" onclick=fun();>
        				<input type="text">
        				</body>
        

JSON

  1. 概念:JavaScript Object Notation JavaScript对象表示法

  2. 特点:

    1. json现在多用于存储和交换文本信息的语法
    2. 进行数据的传输
    3. JSON 比 XML 更小、更快,更易解析
  3. 语法:

    1. 基本规则:

      1. json数据是由键值对构成的

        键值

      2. 键用引号(单双都行)引起来,也可以不使用引号

      3. 值得取值类型

        1. 数字(整数或浮点数)

        2. 字符串(在双引号中

        3. 逻辑值(true 或 false)

        4. 数组(在方括号中) {“persons”:[{},{}]}

          数组

        5. 对象(在花括号中) {“address”:{“province”:“陕西”…}}

          对象

      4. 数据由逗号分隔

      5. 花括号保存对象

      6. 方括号保存数组

    2. 获取数据

      1. json对象.键名
      2. json对象[“键名”]
      3. 数组对象[索引]
      4. 遍历
      //1.定义基本格式
             var person = {"name": "张三", age: 23, 'gender': true};
      <--------------------------------------------------------------------->
              var ps = [{"name": "张三", "age": 23, "gender": true},
                  {"name": "李四", "age": 24, "gender": true},
                  {"name": "王五", "age": 25, "gender": false}];
      <--------------------------------------------------------------------->
              //获取person对象中所有的键和值
              //for in 循环
              for(var key in person){
                  //这样的方式获取不行。因为相当于  person."name"
                  //alert(key + ":" + person.key);
                  alert(key+":"+person[key]);
              }
      <--------------------------------------------------------------------->
             //获取ps中的所有值
              for (var i = 0; i < ps.length; i++) {
                  var p = ps[i];
                  for(var key in p){
                      alert(key+":"+p[key]);
                  }
              }
      	
      
      

JSON转为Java对象

JSON解析器(常见):Jsonlib,Gson,fastjson,jackson

  1. JSON转为Java对象

    1. 导jackson包

      在这里插入图片描述

    2. 创建jsckson核心对ObjectMapper

      //创建ObjectMapper对象
              ObjectMapper o = new ObjectMapper();
              //自动将双引号转义了
              String json = "{\"name\":\"张三\",\"age\":20,\"gander\":\"男\",\"birthday\":\"2020-04-02\"}";
      
    3. 调用ObjectMapper的相关方法进行转换

      //调用readerValue(String,Class<Object> class)进行转义
      Person person = objectMapper.readValue(json, Person.class);
      //打印结果,后面没有输入所以自动给个日期
              //Person{name='张三', age=20, gander='男', birthday=Thu Apr 02 08:00:00 CST 2020}
              System.out.println(person);
      
  2. Java对象转换为JSON

    1. 导入jackson的相关jar包

    2. 创建Jackson核心对象 ObjectMapper

    3. 调用ObjectMapper的相关方法进行转换

    4. 转换方法:

      writeValue(参数1,obj)

      参数1:

      ​ File:将obj对象转换为JSON字符串,并保存到指定的文件中
      ​ Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中
      ​ OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中

    • writeValueAsString(obj):将对象转为json字符串

      @Test
          public void test2() throws Exception {
              Person p = new Person("张三", 20, "男",new Date());
              ObjectMapper objectMapper = new ObjectMapper();
              String string = objectMapper.writeValueAsString(p);
              System.out.println(string);
          }
      
    • 注解:

      • @JsonIgnore:排除属性

      • @JsonFormat:属性值得格式化@JsonFormat(pattern = “yyyy-MM-dd”)

         	private String name;
            private int age;
            private String gander;
            @JsonFormat(pattern = "yyyy-MM-dd")
            //@JsonIgnore
            private Date birthday;
        
    • 复杂java对象转换

      //Lsit:数组
      @Test
      //java List转Json
          //list 存储对象的方式
          public void test3() throws Exception {
              Person p = new Person("张三", 20, "男",new Date());
              Person w = new Person("张三", 20, "男",new Date());
              Person e = new Person("张三", 20, "男",new Date());
              List<Person> list = new ArrayList<Person>();
              list.add(p);
              list.add(w);
              list.add(e);
              //创建jackSon核心对象ObjectMapper
              ObjectMapper objectMapper = new ObjectMapper();
              //将java转化为jackSon对象
              String string = objectMapper.writeValueAsString(list);
              /*
              生成的结果:
               [{"name":"张三","age":20,"gander":"男","birthday":"2020-04-02"},
               {"name":"张三","age":20,"gander":"男","birthday":"2020-04-02"},
               {"name":"张三","age":20,"gander":"男","birthday":"2020-04-02"}]
               */
              System.out.println(string);
          }
      
      //Map:对象格式一致
      @Test
          //java List转Json
          //map的键值对方式
          public void test4() throws Exception {
              Map<String,Object> map = new LinkedHashMap<>();
              map.put("name","张三");
              map.put("age",20);
              map.put("address","仙桃");
              ObjectMapper objectMapper = new ObjectMapper();
              String string = objectMapper.writeValueAsString(map);
              //{"name":"张三","age":20,"address":"仙桃"}
              System.out.println(string);
          }
      
    • 例子:

      校验用户名是否存在
      服务器响应的数据,在客户端使用时,要想当做json数据格式使用。有两种解决方案:

      1. $.get(type):将最后一个参数type指定为"json"然后在服务器端,写上response.setContentType(“text/html;charset=utf-8”);
      2. 在服务器端设置MIME类型()
        response.setContentType(“application/json;charset=utf-8”);

      在这里插入图片描述

      代码:

      package com.xiaoge.servlet;
      
      import com.fasterxml.jackson.databind.ObjectMapper;
      
      import javax.servlet.ServletException;
      import javax.servlet.annotation.WebServlet;
      import javax.servlet.http.HttpServlet;
      import javax.servlet.http.HttpServletRequest;
      import javax.servlet.http.HttpServletResponse;
      import java.io.IOException;
      import java.util.HashMap;
      import java.util.Map;
      
      /**
       * Created by Administrator on 2020/4/4 11:10
       * @author Administrator
       */
      @WebServlet("/findUsernameServlet")
      public class FindUsernameServlet extends HttpServlet {
          @Override
          protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      <---------------------------------------------------------------------->
              //1.获取用户名
              String username = request.getParameter("username");
      <---------------------------------------------------------------------->
              //2.调用service层判断用户名是否存在
      
              //期望服务器响应回的数据格式:{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
              //                          {"userExsit":false,"msg":"用户名可用"}
              //
              //response.setContentType("text/html;charset=utf-8");
              response.setContentType("application/json;charset=utf-8");
              Map<String,Object> map = new HashMap<>();
      <----------------------------------------------------------------------> 
              //2.调用service层判断用户是否存在
              if ("tom".equals(username)){
                  //存在
                  map.put("userExsit",true);
                  map.put("msg","此用户太受欢迎,请换一个");
              }else {
                  //不存在
                  map.put("userExsit",false);
                  map.put("msg","此用户可以使用");
              }
              //将map转化为json,并传递给客户端
              //将map转化为json
      <---------------------------------------------------------------------->
              ObjectMapper mapper = new ObjectMapper();
              //mapper.writeValue(response.getWriter(),map);
              String string = mapper.writeValueAsString(map);
              System.out.println(string);
              response.getWriter().write(string);
          }
      
          @Override
          protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
              this.doPost(request, response);
          }
      }
      
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>注册页面</title>
          <script src="js/jquery-3.3.1.min.js"></script>
      <---------------------------------------------------------------------->
          <script>
              //在页面加载完成后
              $(function () {
                  //给username绑定blur事件
                  $("#username").blur(function () {
                      //获取username文本输入框的值
                      var username = $(this).val();
                      //发送ajax请求
                      //期望服务器响应回的数据格式:{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
                      //                         {"userExsit":false,"msg":"用户名可用"}
                      $.get("/test/findUsernameServlet",{username:username},function (data) {
                          //判断userExsit键的值是否是true
      
                          // alert(data);
                          var span = $("#s_username");
                          if(data.userExsit){
                              //用户名存在
                              span.css("color","red");
                              span.html(data.msg);
                          }else{
                              //用户名不存在
                              span.css("color","green");
                              span.html(data.msg);
                          }
                      });
                  });
              });
      
          </script>
      </head>
      <body>
      <---------------------------------------------------------------------->
      <form>
          <input type="text" id="username" name="username" placeholder="请输入用户名">
          <span id="s_username"></span>
          <br>
          <input type="password" name="password" placeholder="请输入密码"><br>
          <input type="submit" value="注册"><br>
      </form>
      
      </body>
      </html>
      


这篇关于Ajax的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程