一、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" onkeyup="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");
}
}
}