Ajax——同步请求与异步请求
浏览器和服务器之间数据传输方式
同步方式
异步方式
两种方式有什么不同？
同步请求，服务器响应时，页面整体刷新
异步请求，服务器响应时，页面局部刷新
异步请求有什么优点？
异步请求可以提高用户的体验性
异步请求应用场景有哪些？
a:用户名检测
b:搜索的自动补全
c:页面的局部刷新
原生的ajax编程
什么是Ajax
Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax有什么用？
ajax专门用于浏览器和服务器之间的异步请求机制
Ajax编程
原生的ajax编程(了解)
使用jquery框架进行编程(重点)
(1)传统的程序运行原理
用户发送请求，服务器接受请求，处理后返回数据，浏览器接受响应数据，进行显示数据，这个时间就会有处理和接受之间的空闲，导致用户的等待时间
(2) Aajx的程序运行原理是：用户发送请求，到Ajax引擎处理后，发送给服务器接受请求，处理后返回数据Ajax，浏览器接受响应数据，进行显示数据，在者期间浏览器可以一直和Ajax进行交流，减少处理时间
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UV95p88C-1600397507993)(C:\Users\Carlos\AppData\Roaming\Typora\typora-user-images\image-103752418.png)]
##原生Ajax代码案例如下：
ajax_Test.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.3.1.js"></script><script type="application/javascript">// 原生的ajax开发:// 1）创建Ajax引擎对象// 2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）// 3）绑定提交地址// 4）发送请求// 5）接受响应数据//function clickFn() {//1）创建Ajax引擎对象var xmlHttp = new XMLHttpRequest();//2)为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）xmlHttp.onreadystatechange = function (ev) {//如果state值是4，说明收到响应数据//如果状态码是200.说明服务器正常响应if(xmlHttp.readyState == 4 && xmlHttp.status == 200){// 5）接受响应数据//获取响应数据alert(xmlHttp.responseText); //response.getWriter().write("hello")}}//3）绑定提交地址//参1：表示请求方式// 参2：表示服务器的资源访问路径，不用加项目名,// 参3：表示是否异步，true是异步xmlHttp.open("get","s1",true);//4)发送请求xmlHttp.send();}</script></head><body><!--设计一个按钮，一点击这个按钮，就向服务器发出异步请求--><input type="button" value="点我，发出异步请求" onclick="clickFn()"/></body></html>
AjaxServlet:
package com.lbl.servlet;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@WebServlet("/s1")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 {System.out.println("收到了异步请求");response.getWriter().write("helloworld");}}
运行效果：
原生Ajax编程已经不用了，代码量大，使用不方便，封装成函数，直接调用
