AJAX学习笔记

概念

Asynchronous Javascript And XML：异步 JavaScript 和 XML

异步和同步：在客户端和服务器端在相互通信的基础上，同步时，客户端必须等待服务器的响应，在服务器响应期间，客户端不能进行其他操作；异步时，客户端不需要等待服务端的响应，客户端可以进行其他操作。

AJAX是在无需加载整个页面的情况下，能够更新部分网页的技术。通过后台与服务器进行少量数据的交换，使网页实现异步更新。例如，点击搜索页面的搜索框，会自动弹出推荐词条。

总之，AJAX的作用是提升用户的体验，让用户的操作更加连贯，更加流畅。

实现方式

原生JS实现方式，基本不用，了解

JQuery实现方式

//首先新建一个servlet作为案例

@WebServlet(urlPatterns = "/ajaxServlet")
public class ajaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 获取请求参数
        String username = request.getParameter("username");

        //模拟处理业务逻辑，耗时5秒
        try {
            Thread.sleep(5000);
        }catch (InterruptedException e){
            e.printStackTrace();
        }
        
        //2.打印username
        System.out.println(username);

        //3.响应
        response.getWriter().write("hello:" + username);
    }
}

三种实现方式

$.ajax()

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/js/jquery-3.2.1.min.js"></script>
    <script>

        //定义方法
        function fun() {
            //使用$.ajax()方式
            $.ajax({
               url:"ajaxServlet",	//请求路径
               type:"POST",	//请求方式
               data:{"username":"tom","pwd":"123"},	//请求参数
               success:function (data) {	//data:接收服务器返回响应结果的值
                    alert(data)
               },	//响应成功后的回调函数
                error:function () {
                    alert("出错了")
                },	//如果请求响应出现错误，执行该函数（比如访问路径写错了）
                dataType:"text"	//设置接收的响应数据的格式
            });
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input>
</body>

$.get()

语法：$.get(url,[data],[callback],[type])

参数：
- url：请求路径
- data：请求参数（多个参数逗号隔开）
- callback：回调函数
- type：响应结果的类型
```
$.get("ajaxServlet",{username:"tom"},
    function(data){
        alert(data);
    },
"text");
```

$.post()

$.post("ajaxServlet",{username:"tom"},
    function(data){
        alert(data);
    },
"text");