1.什么是Ajax
1. AJAX 即 "Asynchronous Javascript And XML"( 异步 JavaScript 和 XML) 2. Ajax 是一种浏览器 异步发起请求 ( 指定发哪些数据 ) ， 局部更新页面 的技术
Ajax在线3文档 重点是XHR创建 XHR请求 XHR响应！等
1.1 一图胜千言
2.Ajax的通信原理
具体解释：如上图所示。
相对于传统的web应用。Ajax技术就是多了Ajax引擎也就是XMLHttpRequest对象。
当前端中的表单要发送数据给后端的时候，前端会首先创建一个XMLHttpRequest对象。
然后指定你要传送的数据，而非整个form表单。 通过Http请求将数据发送给后端。
只不过XMLHttpRequest对象发送数据的时候是异步的！
什么是异步：就是当前端发送数据给后端时，前端界面不需要对响应进行等待挂机状态，前端界面依然可以做自己的事，这是很重要的。
后端界面通过Http响应发送给前端的XMLHttpRequest对象，再通过事件绑定机制，局部刷新前端界面！
简而言之呢，就可以看出Ajax引擎对象，作为两者数据交换的中间人，帮我完成异步局部刷新，指定发送数据等等操作！
3.应用实例-验证用户名是否存在
1) 点击验证用户名 , 使用 ajax 方式， 服务端验证该用户名是否是king是的话就说名用户已经占用输出对应的json数据 3) 对页面进行局部刷新 , 显示返回信息 具体结果如图所示
前端代码 整个是在Tomcat中间键运行的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<script type="text/javascript">
window.onload = function ()
{
let checkButton = document.getElementById("checkButton");
checkButton.onclick = function(){
//先创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
//获取用户填写的用户名
let uname = document.getElementById("uname").value;
//准备发送指定的数据
xhr.open("GET","CheckUserServlet?username="+uname,true)
//在send函数调用前,要为Ajax引擎对象绑定事件
//改事件表示当数据发送变化时,会触发这个事件
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4)
{
//把返回的Json数据发送到div上
document.getElementById("div1").innerHTML = xhr.responseText;
//console.log(xhr.responseText);
// console.log("xhr=",xhr);
let responseText = xhr.responseText;
if(responseText != "")
{
document.getElementById("myres").value = "用户名不可用";
}else
{
document.getElementById("myres").value = "用户名可用";
}
}
}
//真正发送Ajax-Http请求
//如果是post请求，参数应该写在send(String)里面
xhr.send() //用于GET请求
}
}
</script>
</head>
<body>
<h1>用户注册</h1>
<form action="#" method="post">
用户名字:<input type="text" name="username" id="uname">
<input type="button" id = "checkButton" onclick="checkUser();" value="验证用户名">
<input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
用户密码:<input type="password" name="password"><br/><br/>
电子邮件:<input type="text" name="email"><br/><br/>
<input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>package com.sn.servlet;
import com.google.gson.Gson;
import com.sn.entity.User;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @author ygd
*/
public class CheckUserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username = req.getParameter("username");
System.out.println("username="+username);
resp.setContentType("text/html;charset=utf-8");
//验证用户名是否为king
if("king".equals(username)){
User king = new User(100, "king", "[email protected]");
//将king转换成字符串
String json = new Gson().toJson(king);
resp.getWriter().write(json);
}else{
//
resp.getWriter().write("");
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req, resp);
}
}
相应的具体文档信息：
后续更新Ajax中JQuery的运用！
本文章通过学习老韩视频的学习心得，如有版权问题，博主会及时删除。
欢迎小伙伴去看老师视频 老韩
标签：异步,用户名,XMLHttpRequest,king,--,xhr,Ajax,import From： https://blog.csdn.net/m0_74301606/article/details/140318223