一、简介

Ajax(Asynchronous Javascript And XML)是由浏览器解析运行的基于JavaScript实现的网页局部刷新的技术。

实现了在当前网页中显示新的响应内容。（不会覆盖掉原有内容）

特点：

1. 一种新的让浏览器发起http请求的技术

2. 使用ajax发起的请求，响应结果不会自动的覆盖原有内容，而是可以在原有页面内容上继续显示

3. Ajax是一门基于JavaScript的技术，由浏览器解析运行，所以是一种前端（客户端）技术

4. 简单易用

二、使用

基本流程

//1.创建ajax请求对象，该对象可以向服务端发起请求
        var xhr = new XMLHttpRequest();
        //2.开启连接
        xhr.open("get", "testServlet");
        //3.发起请求
        xhr.send();
        //4.监听就绪状态的变化，就绪状态发生变化会被监听，自动调用指定的function
        xhr.onreadystatechange = function (ev) {
        //处理数据
    }        

1. Ajax的就绪状态（readState）

在ajax对象中提供了一个监听机制 “onreadystatechange”，用来监听ajax的属性readyState的改变情况，一旦该值改变，就会触发监听中的函数的执行。

 xhr.onreadystatechange = function (ev) {
      console.log(xhr.readState);    
    }

readyState的值表示的含义:

• 0：请求没有开启(在调用open()之前)

• 1：请求已经建立但是还没有发出(调用send()之前)

• 2：请求已经发出，服务器正在处理

• 3：请求已经处理，响应中有数据可用，但是服务器还没有完全响应完

• 4：响应已经完成，浏览器已经接收到全部的响应内容

2. Ajax请求的响应状态

处理响应结果要考虑服务器响应是否成功，即响应状态码为200时对响应数据进行处理

xhr.onreadystatechange = function (ev) {
          if(xhr.readyState==4 && xhr.status==200){
            //console.log(xhr);
            //获取响应的数据
            var responseText = xhr.responseText;
            console.log(responseText);
          }
        };

三、同步/异步 请求

同步请求：

• 发送请求后，一直等待服务端的响应，获取到服务端响应，再执行其他的逻辑代码。

  • 浏览器直接发起

    • 在浏览器地址栏输入url，发起请求

    • 使用超链接，发起请求

    • 使用form表单，发起请求

    • 在js代码中使用window.location.href，发起请求

  • ajax发起同步请求，有xhr对象发起请求

    • ajax与其他方式发送同步请求的区别: ajax可以局部刷新(由xhr对象发送请求)，其他的请求方式会刷新整张页面

异步请求：

• 发送请求后，不需要等待服务端的响应，继续按照顺序执行其他逻辑代码，监听到响应，自动调用指定的方法。

　　　　ajax发起异步请求

1. Ajax设置同步/异步

xhr对象的open()方法的第三个参数  async：是否为异步请求

true：异步

false：同步

四、Ajax请求携带参数

1. get请求

get请求可以直接在请求路径拼接参数

xhr.open("get","HelloServlet?name=lucy&age=18");

2. post请求

Ajax的post请求传递参数是需要单独写在send方法中，而且需要设置请求头，该请求头表示此次请求是以表单的方式提交

<script>
    function f() {
      var xhr = new XMLHttpRequest();
      xhr.open("get","HelloServlet");
      //请求方式是post请求，则需要设置请求头，这个请求头就表示是以表单方式提交数据
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send("name=lily&age=15");
      xhr.onreadystatechange = function (ev) {
        if(xhr.readyState==4 && xhr.status==200){}
      };
      }
</script>

五、Ajax请求响应的数据格式及处理

ajax可以接收requestText（文本类型）和Xml类型（不常用了）

如果需要接收对象或者一个集合就需要使用JSON数据格式

1. JSON

JSON是一种特殊格式的字符串

例：

普通Java对象的json字符串格式：

User user = new User(1, "张三丰", 18, "北京");

{"id":1, "name":"张三丰", "age": 18, "address":"北京"}

Map集合对应的json字符串格式：

Map<String, Object> map = new HashMap<>();
map.put("key1", "value1");
map.put("key2", "value2");

{"key1":"value1", "key2":"value2"}

List集合对应的json字符串格式：

List<User> list = new ArrayList<>();
list.add(new User(1, "赵敏", 18, "北京"));
list.add(new User(2, "周芷若", 28, "上海"));

   [
    {"id":1, "name":"赵敏", "age":18, "address":"北京"},
    {"id":2, "name":"周芷若", "age":28, "address":"上海"}
   ]

这种格式符合js对象的声明格式，通过JSON.parse(str)解析后就得到了js对象