- 什么是同步和异步
-
- 同步:假如在两个线程中,一个线程的执行需要等另一个线程执行结束才能开启(即需要排队),这叫同步
-
- 异步:与同步相反,线程的执行不需要等待,各自执行不会相互影响(无需排队),这叫异步
- Ajax请求的特点
采用异步的方式,发送和接收请求,每次发送Ajax请求,页面不会全部刷新 - 服务器响应Ajax请求的内容有三种:
可能是普通文本,可能是XML字符串,可能是JSON字符串 - Ajax的核心对象XmlHttpRequest对象中的readystate属性记录XmlHttpRequest对象在请求发送和接收过程中的状态
0:请求未初始化
1:服务器连接建立
2:请求已收到
3:请求正在处理
4:请求已经响应且准备就绪 - 第一个Ajax GET请求步骤
1.获取XMLHttpRequest对象。
2.通过该对象开启事件onreadystatechange(该事件为XMLHttpRequest对象
的一个属性)。
在这事件中当readystate为4即请求响应成功且准备就绪,且状态码值为200时,可以获取服务器(后端程序)发送过来的数据了。
3.(注意:这里后端响应的信息会被XMLHttpRequest对象接收,通过该对象的responseText()方法就能获取);
4.通过该对象开启通道open(method, url, 是否异步)。
5.发送请求send()。 - Ajax
GET请求获取提交数据,在javascript程序中依旧可以通过获取标签的value值来获取,并输入到ajax的url地址中,在后端servlet程序中,依旧是通过请求request.getparameter()方法来获取。
前端代码
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>ajax 测试</title>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
document.getElementById("btn").onclick = function (){
// alert("hello ajax");
var xr = new XMLHttpRequest();
xr.onreadystatechange = function (){
if(xr.readyState == 4){
if(xr.status ==200){
// alert("响应成功!")
document.getElementById("msg").innerHTML = this.responseText;
}
}
}
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
xr.open("GET","/ajax/ajaxTest1?username="+username+"&password="+password,true);
xr.send();
}
}
</script>
<input type="button" value="hello ajax" id="btn">
<div id="msg"></div>
</body>
</html>
后端servlet
@WebServlet("/ajaxTest1")
public class ajaxTest extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("html/text;charset=utf-8");
PrintWriter out = resp.getWriter();
// out.println("<font color=red>hello ajax!!!! </font>");
String username = req.getParameter("username");
String password = req.getParameter("password");
out.println("username="+username+",password="+password);
}
}
![测试结果]