AJAX

内容摘自链接
Ajax 的全称是Asynchronous JavaScript and XML（异步的JavaScript 和 XML），其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。

一、关于同步和异步

异步传输是面向字符的传输，它的单位是字符；
而同步传输是面向比特的传输，它的单位是帧，它传输的时候要求接收方和发送方之间的时钟是一致的。
同步的话，必须这个操作完了才会执行下一步，在等待期间浏览器会挂起不执行下面的js代码；异步则是【告诉】浏览器去做，【告诉】是一瞬间的事情，然后继续执行下一步，等到结果返回之后，浏览器会通知js执行相应的回调。

二、ajax包含的技术

1、使用css和xhtml来表示
2、使用Dom模型来交互和动态显示；
3、使用XNLHttpRequest来和服务器进行异步通信（最重要）
4、使用javascript来绑定和调用。

三、ajax原理和XmlHttpRequest对象

Ajax相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给Ajax引擎自己做，只有确定需要服务器读取数据时再由Ajax引擎代向服务器提交请求。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
增强B/S的体验性
产品链：H5+网页+客户端+手机端（IOS，Android）+小程序
Ajax的核心是XMLHttpRequest对象（XHR）。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据
使用JQuery需要先导入jQuery的js文件；

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
首先，需要先了解XMLHttpRequest这个对象的属性和方法：
在这里插入图片描述

@RestController
public class AjaxController {
    
    
 //第一种方式，服务器要返回一个字符串，直接使用response
    @RequestMapping("/a1")
    public void ajax1(String name, HttpServletResponse response) throws IOException, IOException {
    
    
        if ("admin".equals(name)) {
    
    
            response.getWriter().print("true");
        } else {
    
    
            response.getWriter().print("false");
        }
    }

    @RequestMapping("/a2")
    public List<User> ajax2() {
    
    
        List<User> list = new ArrayList<User>();
        list.add(new User("秦疆1号", 3, "男"));
        list.add(new User("秦疆2号", 3, "男"));
        list.add(new User("秦疆3号", 3, "男"));
        return list; //由于@RestController注解，将list转成json格式返回
    }

Ajax写法

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
    <script>
        function a1() {
      
      
            $.post({
      
      
                url: "${pageContext.request.contextPath}/a1",
                data: {
      
      'name': $("#txtName").val()},
                success: function (data, status) {
      
      
                    alert(data);
                    alert(status);
                }
            });
        }
    </script>
</head>
<body>

<%--onblur：失去焦点触发事件--%>
用户名:<input type="text" id="txtName" onblur="a1()"/>

</body>
</html>

<script>
    $(function(){
    
    
    	$("#btn").click(function(){
    
    
            $.post("${pageContest.request.contextPath}/ajax/a2",function(data){
    
    
                console.log(data);
                var html="";
                for(var i=0;i<data.length;i++){
    
    
                    html+="<tr>"+
                        "<td>"+data[i].name+"</td>"+
                        "<td>"+data[i].age+"</td>"+
                        "<td>"+data[i].sex+"</td>"+
                        "</tr>"
                }
                $("#content").html(html);
            })
        })
})
</script>

    @RequestMapping("/a3")
    public String ajax3(String name, String pwd) {
    
    
        String msg = "";
        //模拟数据库中存在数据
        if (name != null) {
    
    
            if ("admin".equals(name)) {
    
    
                msg = "OK";
            } else {
    
    
                msg = "用户名输入错误";
            }
        }
        if (pwd != null) {
    
    
            if ("123456".equals(pwd)) {
    
    
                msg = "OK";
            } else {
    
    
                msg = "密码输入有误";
            }
        }
        return msg; //由于@RestController注解，将msg转成json格式返回
    }

第三种ajax

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
    <script>
        function a1(){
      
      
            $.post({
      
      
                url:"${pageContext.request.contextPath}/a3",
                data:{
      
      "name":$("#name").val()},
                success:function(data){
      
      
                    if(data.toString()=='ok'){
      
      
                        //信息核对成功
                        $('#userInfo').css("color","green");
                    }else{
      
      
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            })
        }
        function a2(){
      
      
            $.post("${pageContext.request.contextPath}/a3",{
      
      "pwd":$("pwd").val()},function(data){
      
      
                if(data.toString()=='ok'){
      
      //信息核对成功
                    $('#pwdInfo').css("color","green");
                }else{
      
      
                    $('#pwdInfo').css("color","red");
                }
                $("#pwdInfo").html(data);
            })
        }

    </script>
</head>
<body>
<p>
    用户名:<input type="text" id="name" onblur="a1()"/>
    <span id="userInfo"></span>
</p>
<p>
    密码:<input type="text" id="pwd" onblur="a2()"/>
    <span id="pwdInfo"></span>
</p>
</body>
</html>

四、三部曲

编写对应处理的Controller，返回消息或者字符串或者json格式的数据
编写ajax请求
1、url：Controller请求
2、data:键值对
3、success:回调函数
给Ajax绑定事件，点击click、失去焦点onblur，键盘弹起keyup

五、ajax的优点

1、无刷新更新数据

AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。
2、步与服务器通信。
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
3、前端和后端负载平衡
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。

六、ajax的缺点

一、AJAX的安全问题
Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
二、对搜索引擎支持较弱
对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

Ajax笔记(狂神说java)