了解原生js的ajax
1. 什么是ajax
1.1 概念：Asynchronous JavaScript And XML 异步的JavaScript和XML
以前的数据提交方式是同步的，以前我们表单提交数据给服务器。串行操作方式，如果服务器没有响应回来，浏览器不能进行任何操作，只能等待。
AJAX使用异步的提交方式，后台进行数据的提交给服务器。
XML文件。用来接收服务器返回的数据。
1.2 同步方式与异步方式的区别
同步方式:由浏览器发送请求给服务器，它们之间是串行操作，如果服务器没有响应回来，我们不能进行下一步的操作，这期间浏览器只能等待。
异步方式:由JavaScrip
生成一个对象，这个对象XMLHttpRequest，由这个对象去发送请求给服务器，并且是后台发送的，不会影响用户操作体验。而且浏览器与服务器之间是并行操作的。
1.3 ajax使用的技术
JavaScript：后台发送请求和接收服务器的响应。
XML：因为服务器端的编程语言与浏览器端的编程语言不同，不同的语言之间进行数据交换，使用XML从服务器端返回的数据，在浏览器端再解析XML获取数据(即传输数据)。由于XML的生成和解析过于繁琐，目前很少使用，用JSON格式。
1.4 应用场景
1.检查用户名是否已经被注册
2.内容自动补全，如:百度的搜索框
3.下拉框联动
2. 原生的ajax
流程说明：
-
用户在浏览器上操作的时候，由JS后台创建XMLHttpRequest对象
-
设置请求对象的回调函数(事件处理函数)，准备状态发生变化时激活的函数
-
后台发送请求给服务器
-
在服务器进行数据的处理，这里和以前的处理方式是一样的。
-
服务器将处理结果以XML的方式发送给浏览器
-
数据发送回来会激活状态改变的事件(第2步的回调函数)
-
在回调函数中处理页面的更新，实现局部刷新。
-
用户就可以看到最新的处理结果
| 方法/事件/属性名 | 作用 |
| new XMLHttpRequest() | 通过构造方法创建对象 |
| onreadystatechange | 准备状态发生改变的事件 |
| readyState | |
| responseText | 获取服务器返回的文本 |
| open("GET","URL",true) | |
| send() |
//服务器端代码(不查数据库)
package com.yblue.servlet; import java.io.IOException; import java.io.PrintWriter; @javax.servlet.annotation.WebServlet(name = "Demo01Servlet", value = "/demo01") public class Demo01Servlet extends javax.servlet.http.HttpServlet { protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException { response.setContentType("text/plain;charset=utf-8"); PrintWriter out = response.getWriter(); String user = request.getParameter("user"); System.out.println(user); if ("yblue".equalsIgnoreCase(user)) { out.print(user + "已存在"); } else { out.print(user + "注册成功"); } } protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException { doPost(request, response); } }
//浏览器端代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> </head> <body> 用户名:<input type="text" id="user" name="user"><span id="info"></span> </body> <script type="text/javascript"> document.getElementById("user").onblur = function () { let value = this.value; alert(value); //1.创建XMLHttpRequest对象 let request = new XMLHttpRequest(); //2.设置这个对象准备状态改变事件 request.onreadystatechange = function () { //判断准备状态是否等于4：表示服务器已经响应回来了 //判断状态码是否是200，正确的响应 if (request.readyState == 4 && request.status == 200) { //获取服务器返回的数据,并将数据给<span>赋值 document.getElementById("info").innerText = request.responseText; } } //3.创建与服务器的连接，使用GET方法发送，数据在地址栏后传递 let url = "demo01?user=" + value; request.open("get", url, true); //4.发送数据 request.send(); }; </script> </html>
想看更多精彩内容，可以关注我的CSDN
