Ajax和JQueryAjax
一、Ajax：
1、Ajax 即“Asynchronous Javascript And XML“（异步 JavaScript 和 XML）；
2、是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
3、通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
二、Ajax同步和异步（普遍）的区别：
1、 同步处理：通过实践触发 ajax，请求服务器，在这个期间等待服务器处理请求， 在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。
同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事。
2、异步处理：通过事件触发到 ajax，请求服务器，在这个期间无论服务器有没有响应，客户端的其他代码一样可以运行。
异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕同步需要等待返回结果才能继续，异步不必等待，一般需要监听异步的结果。
*ps：同步是在一条直线上的队列，异步不在一个队列上 各走各的
（判断用户名是否存在）
1、Servlet：
创建UserServlet：
package com.javaboy.ajax.servlet; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; public class UserServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String username=req.getParameter("username"); //省略从dao层查询username的过程,假定数据库中含有admin用户 PrintWriter out= resp.getWriter();//输出流 //信息不会直接打印在浏览器上,信息会被xmlHttpRequest抓取 //true:该用户已存在 //false:该用户可注册 if ("admin".equals(username)){ System.out.println("此用户已存在"); out.write("true"); }else{ System.out.println("此用户可注册"); out.write("false"); } } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req,resp); } }
2、Ajax的实例应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript ajax test</title>
</head>
<body>
用户名:<input type="text" name="username" value="" onblur="validateUsername()" id="username"><br/>
<script>
function validateUsername() {
var username=document.getElementById("username").value;
alert(username);
//ajax 纯javascript实现
//xmlHttpRequest 异步引擎
//1.创建xmlHttpRequst
var xmlHttpRequest=new XMLHttpRequest();
//2.建立连接 默认是异步
xmlHttpRequest.open("GET","userServlet?username="+username,true);
//3.发送请求
xmlHttpRequest.send();
//4.接受响应结果,并处理结果 该函数会自动触发
xmlHttpRequest.onreadystatechange=function () {
if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
var result=xmlHttpRequest.responseText;
alert("result:"+result);
if(result=="true"){
alert("该用户已存在,请重新录入");
}else{
alert("该用户可注册");
}
}
}
}
</script>
</body>
</html>
*ps： 1、"GET":为要使用的HTTP方法 POST PUT DELETE等…… 2、"true"：表示是否异步执行操作，默认为异步(true)； 3、XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 · 0: (请求未初始化) send方法还没有被调用 · 1: (服务器连接已建立,加载中) 已调用了send方法，请求还在处理 · 2: (请求已接收, 已加载) send方法已完成，整个应答已接收 · 3: (请求处理中, 交互中) 正在解析应答 · 4: (请求已完成，且响应已就绪) 应答已经解析，准备好进行下一步处理。 |
| status | 200: "OK" 404: 未找到页面 |
4、当 readyState 等于 4 且状态为 200 时，表示响应已就绪
3、JQueryAjax的实例应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript ajax test</title>
</head>
<body>
用户名:<input type="text" name="username" value="" onblur="validateUsername()" id="username"><span id="idSpan"></span><br/>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
function validateUsername() {
var username = $("#username").val();
$.ajax({
url: "userServlet",// 请求路径
type: "GET",//请求方式
dataType: "text",//设置接受到的响应数据的格式
data: "username=" + username,//请求参数 或{"username":"jack","age":23}
success: function (result) {
//alert("result:" + result);
if (result == "true") {
/* alert("该用户已存在,请重新录入");*/
$("#idSpan").html("该用户已存在,请重新录入").css("color","red");
} else {
// alert("该用户可注册");
$("#idSpan").html("该用户可注册").css("color","green");
}
},//响应成功后的回调函数
error: function () {
//500 404
alert("服务器内部错误!");
}//设置接受到的响应数据的格式
});
}
</script>
</body>
</html>
浙公网安备 33010602011771号