论：Ajax

1.何为Ajax？

答：就是Javascript语言和服务端交互的一种手段，即浏览器发送请求访问服务器的一种方式：可以实现局部刷新页面，实现了在当前网页中显示新的响应内容（不会覆盖掉原有内容）

特点：

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

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

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

4. 简单易用

 

1.目前浏览器和服务器交互的请求发送方式

浏览器和服务器进行数据交互的基本流程为： http://localhost:8080/Ajax_war_exploded/PathServlet

1. 浏览器发起http请求

2. 服务器收到请求，对请求进行解析，创建请求和响应对象

3. 服务器根据请求解析结果调用对应的资源处理请求

4. 服务器将处理结果响应给浏览器

5. 浏览器收到响应结果，对结果数据进行解析

6. 浏览器将解析后的数据展示在页面

目前我们了解的可以让浏览器发送请求的方式有哪些？

1. 在浏览器地址栏输入url地址后回车

2. 使用超链接

3. 使用form表单

4. 在js代码中使用window.location.href

5. 在js代码中使用windows.open()

2. 目前的浏览器发送请求访问服务器方式存在的问题

问题： 浏览器发送请求访问服务器后，服务器收到请求调用对应的Servlet进行处理，然后使用resp.getWriter().print()方法的响应结果数据给浏览器，浏览器解析数据，将浏览器页面的内容覆盖掉后，展示解析出的数据！ 但是在实际应用中，有时候我们希望新的响应结果是在原有界面内容的基础上继续进行显示，而不是新的响应结果直接覆盖了之前的内容，即Ajax技术。

2.同步与异步请求

同步请求：

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

  • 浏览器直接发起

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

    2. 使用超链接，发起请求

    3. 使用form表单，发起请求

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

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

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

异步请求：

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

  1. ajax发起异步请求

3. Ajax的同步和异步设置

Ajax执行步骤：

1. 创建Ajax请求对象

2. 建立连接

3. 发送连接

4. 监听状态变化及结果处理

设置ajax的同步异步：

通过设置Ajax请求对象open方法的async参数的值：

true：表示异步，默认值

false：表示同步

4.Ajax具体的执行流程

•     首先通过Servlet将数据库中的数据取出
•     取出后转成json格式的字符串，后利用ajax把字符串返还给前台
•     再利用json.parse解析通过循环添加到页面上
•     那么反之，前端的数据可以利用ajax提交到后台
•     但是后台是没有办法直接把这些数据插入到数据库中，所以要先提交到Servlet上
•     最后再由Servlet将数据插入到数据库中

问题：目前我们编写的Ajax代码访问服务器及对响应结果的处理流程如下：

1. 在页面编写Ajax相关代码
   1. 创建xhr对象
   2. 开启连接
   3. 发起请求
   4. 监听准备状态的变化

2. 用户通过浏览器访问页面
3. 用户在浏览器中触发事件，发起ajax请求
4. 服务器收到请求进行处理，处理完后按照json格式的字符串响应给浏览器
5. 浏览器收到响应

 

5.Ajax的具体使用

 要点提炼：

• 在 js 中有内置的构造函数来创建 ajax 对象
• 创建 ajax 对象以后，我们就使⽤ ajax 对象的⽅法去发送请求和接受响应
• Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。

1.创建⼀个 ajax 对象

// IE9及以上
const xhr = new XMLHttpRequest()

2.开启连接（配置链接信息）

// xhr 对象中的 open ⽅法是来配置请求信息的
// 第⼀个参数是本次请求的请求⽅式 get / post / put / ...
// 第⼆个参数是本次请求的 url
// 第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步
// xhr.open('请求⽅式', '请求地址', 是否异步)
xhr.open('get', 'XXXServlet')

   两种请求方式的参数传递方式：

//1.Ajax的get请求的请求参数是直接写在请求路径后面


<script>
    function f() {
      var xhr = new XMLHttpRequest();
      xhr.open("get","HelloServlet?name=lucy&age=18");
      xhr.send();
      xhr.onreadystatechange = function (ev) {
        if(xhr.readyState==4 && xhr.status==200){}
      };
  	}
</script>


//2.Ajax设置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>

 

3.发送请求

// 使⽤ xhr 对象中的 send ⽅法来发送请求
//若是post请求，send()可携带请求参数，需要设置请求头

xhr.send()

4.监听状态变化及结果处理

xhr.onreadystatechange = function (ev) {
                if(xhr.readyState==4 && xhr.status==200){
                    //响应类容XXX
                    alert(xhr.responseText);
                }
            };

•  readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行
•  readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后(调用send之前)
•  readyState === 2 : 表示 send 方法已经执行完成
•  readyState === 3 : 表示正在解析响应内容，响应中有数据可用但是服务器还没有完全响应完
•  readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了

但是不是任何响应结果我们都要处理，因为服务器的响应也有状态码，比如：200、404、500等等。 200才是我们需要的