异步请求 - Ajax

1.认识Ajax

AJAX 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML) ，猜测AJAX底层还是使用js与xml...

AJAX 是一种浏览器异步发起请求(指定发去xxx数据)，局部更新页面（按需取得数据局部刷新）技术。

Asynchronous：异步的（之前学多线同步机制提到过Synchronized，同步理解别人拿走锁，另外的线程就一直等到它释放资源锁在使用）

理解：前后端通讯的异步，ajax使得前端可以指定发去某一部分数据给后端，并且在等待后端的http响应的时候可以做自己其他的事情（异步暂时这样理解）

2.Ajax底层机制

"Asynchronous Javascript And XML"-在http请求和响应的过程中添了一步：

使用Ajax引擎对象（创建XmlHttpRequest对象），然后面向该对象编程实现功能：

1.发送指定数据（异步）

2 .局部刷新功能：指定函数接收处理http响应内容（绑定事件，然后dom操作实现）

总结：Ajax引擎对象用于和服务器交换数据

http请求对应的方法：

XmlHttpRequest对象.open（method，url，true）; true代表async异步, method指明post/get 

XmlHttpRequest对象.send();

说明：get请求，直接send（）；因为url中有具体信息了，post请求则在send（xx）xx填写具体信息。

http响应对应的方法：

 

 事件绑定，响应触发函数

3.Ajax实践案例

阶段性代码实操（2）- 项目前置准备 - ZitWang - 博客园 (cnblogs.com)

4.Ajax使用优化-使用jQuery！

在上述实例中，仍然提供直接new XmlHttpRequest一个xhr对象，掉用open，send方法，给xhr对象绑定事件 onreadystatechange()来使用Ajax，比较麻烦，还需要考虑浏览器的兼容问题，如何优化？

一般使用 JavaScript 的库(比如 Jquery)发送Ajax请求

 

 

 

 

 5.JQuery优化代码

.ajax函数,get和post只是再ajax上进行简化

type就不需要了，因为已经是get/post了 ；
不需要指定参数名：前面的url，data免去，但是要注意顺序了
get/post函数：url，data，success回调函数，dataType
getJson（）函数：请求是get，返回dataType是json，直接使用这个函数简化操作
getJson（）函数：url，data，success回调函数；

url: "/ajax/checkUserServlet02",
            type: "POST",
            data:{}，
....

  $.ajax({
            url: "/ajax/checkUserServlet02",
            type: "POST",
            data: {
                username: $("#uid").val(),
                data: new Date()
                //设置日期：为了防止浏览器缓存，不变的数据不再传
            },
            success: function (data,status,xhr) {
                console.log("成功！");
                console.log(data);
                console.log(status);
                console.log(xhr);
                // $("#div1").html(xhr.responseText);
                $("#div1").html(JSON.stringify(data));
                if(""==data.username){
                    $("#noUser").val("该用户名可用");
                }else
                {
                    $("#noUser").val("该用户名不可用！");
                }
            },
            error: function () {
                console.log("失败喽")
            },
            dataType:"json"
        })