一、Ajax是什么？
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX应用于搜索时的词汇联想，校验用户名是否被注册等！
它能使用js访问服务器，而且是异步访问！
服务器给客户端的响应一般是整个页面，一个html完整页面！但在ajax中因为是局部刷新，那么服务器就不用再响应整个页面！而只是数据！
- text：纯文本
- xml
- json：它是js提供的数据交互格式，它在ajax中最受欢迎！
二、异步交互和同步交互
同步交互：发一个请求，就要等待服务器的响应结束，然后才能发第二个请求！中间这段时间就是一个字“卡”。并且刷新的是整个页面！
异步请求：发一个请求后，无需等待服务器的响应，然后就可以发第二个请求！可以使用js接收服务器的响应，然后使用js来局部刷新！
三、ajax发送异步请求（四步操作）
第一步、得到XMLHttpRequest
var xmlHttp = new XMLHttpRequest( );
XMLHttpRequest 是 AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
第二步、打开与服务器的连接
xmlHttp.open( method, url, async );用来打开与服务器的连接，它需要三个参数：
- method : 请求方式，可以是GET或POST。
- url : 指定服务器端资源，例如；/day23_1/AServlet。
- async( Asynchronous的缩写 ) : 请求是否为异步：如果为true表示发送异步请求，false则表示同步请求！
举例：xmlHttp.open("GET", "/day23_1/AServlet", true);
第三步、发送请求
xmlHttp.send( ) :
POST方式 : xmlHttp.send("username=" + userEle.value);
GET方式：xmlHttp.send( null ); null表示没有参数，因为参数已经通过“GET" 方式，放在url里了。
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 向服务器发送大量数据（POST 没有数据量限制）
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlHttp.open("POST", "${pageContext.request.contextPath}/ValidateUsernameServlet", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("username=" + userEle.value);第四步、onreadystatechange监听器与处理响应结果
XMLHttpRequest 对象的三个重要的属性：
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 0 1 2 3 4 |
| status | 200: "OK" 404: 未找到页面 |
在xmlHttp对象的一个事件上注册监听器：onreadystatechange。每当 readyState 属性改变时，就会调用该函数。
onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。
所以xmlHttp对象的readyState一共有5个状态：
- 0状态：请求未初始化，还没有调用open()方法。
- 1状态 : 服务器连接已建立，请求开始：调用了open()方法，但还没有调用send()方法。
- 2状态：请求已接收，调用完了send()方法了。
- 3状态：请求处理中，服务器已经开始响应，但不表示响应结束了！
- 4状态：服务器响应结束！请求已完成，且响应已就绪。（通常我们只关心这个状态！！！
- xmlhttp.readyState == 4 (表示请求已完成) && xmlhttp.status == 200 (表示响应成功)
- xmlhttp.responseText 用于获取服务端传回来的文本
- document.getElementById("errorSpan").innerHTML 设置span的内容为服务端传递回来的文本
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var text = xmlHttp.responseText;
var span = document.getElementById("errorSpan");
if(text == "1") {
span.innerHTML = "用户名已被注册!";
} else {
span.innerHTML = "用户名可以使用!";
}
}
}四、Ajax实用场景
4.1、查看用户名是否被注册( jsp与jsp )
regist.jsp :
</head>
<script type="text/javascript">
var xmlHttp;
function check() {
var name = document.getElementById("name").value;
var url = "${pageContext.request.contextPath}/how2j/checkName.jsp?name=" + name;
xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = checkResult;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function checkResult() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("checkResult").innerHTML = xmlHttp.responseText;
}
}
</script>
<body>
<span>输入账号:</span>
<input id="name" οnkeyup="check()" type="text">
<span id="checkResult"></span>
</body>
</html>checkName.jsp :
</head>
<%
String name = request.getParameter("name");
if("YTY".equalsIgnoreCase(name)) {
out.print("<font color='blue'>已经存在</font>");
} else {
out.print("<font color='purple'>可以使用</font>");
}
%>
<body>
</body>
</html>
4.2、查看用户名是否被注册( jsp与Servlet )
ajax3.jsp :
</head>
<script type="text/javascript">
var xmlHttp;
window.onload = function() {
var userEle = document.getElementById("usernameEle");
userEle.onblur = function() {
xmlHttp = new XMLHttpRequest();
xmlHttp.open("POST", "${pageContext.request.contextPath}/ValidateUsernameServlet", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("username=" + userEle.value);
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var text = xmlHttp.responseText;
var span = document.getElementById("errorSpan");
if(text == "1") {
span.innerHTML = "用户名已被注册!";
} else {
span.innerHTML = "用户名可以使用!";
}
}
}
}
}
</script>
<body>
<h1>演示用户名是否被注册</h1>
<form action="" method="post">
用户名:<input type="text" name="username" id="usernameEle"><span id="errorSpan"></span><br>
密 码:<input type="password" name="password"><br>
<input type="submit" value="注册">
</form>
</body>
</html>
ValidateUsernameServlet.java :
package waf.yty.web.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ValidateUsernameServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
if (username.equalsIgnoreCase("YYRY")) {
response.getWriter().print("1");
} else {
response.getWriter().print("0");
}
}
}
