同步交互
- 发一个请求就要等待服务器的响应结束，然后才能发第二个请求。常见的情形就是有的网站你点击太快，它就卡住了。
- 每次请求都会刷新整个页面。
异步交互
- 发一个请求后，无需等待服务器的响应，就可以发送第二个请求。
-
可以使用Js接收服务器的响应，axaj其实就是使用了JS的局部刷新功能。
服务器给客户端的响应一般是整个页面，即一个完整的HMTL页面，但ajax是局部刷新，那么服务武器无需响应整个页面，只是数据刷新。
下面给一个ajax的简单示例：
Servlet:
import java.io.IOException;
import javax.servlet.servletexception;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class BServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req,HttpServletResponse resp) throws servletexception,IOException {
resp.getWriter().print("AJAX ！");
System.out.println("adax!");
}
@Override
protected void doPost(HttpServletRequest req,IOException {
req.setCharacterEncoding("utf-8");
// resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html; charset=utf-8");
String username = req.getParameter("username");
String pwd = req.getParameter("pwd");
resp.getWriter().print(username+pwd);
System.out.println(username+pwd);
}
}
JSP页面代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax</title>
<script type="text/javascript"> //创建XMLHttpRequest对象,下面的方法对不同版本浏览器实现了兼容。 function createXMLHttpRequest(){ try { return new XMLHttpRequest(); } catch (e) { try { return new ActiveXObject("MSXML2.XMLHTTP");//为了应对IE6 } catch (e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); //对于IE5.5版本一下 } catch (e) {//如果都到这了，估计是自己写的浏览器 alert("未知浏览器"); } } } } window.onload= function(){ //得到button var button = document.getElementById("button"); //对button添加点击事件 button.onclick=function(){ //创建XMLHttpRequest对象 var xmlHttp = new createXMLHttpRequest(); /* open规定请求的类型、URL 以及是否异步处理请求。 */ //xmlHttp.open("GET","BServlet",true); xmlHttp.open("POST","BServlet",true); //设置请求头的Content-Type,如果是GET方法不需要设置 xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //将请求发送到服务器。发送数据 xmlHttp.send("username=小明&pwd=xiaoming"); //这个函数监控响应状态的变化 xmlHttp.onreadystatechange=function(){ /* 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0：请求未初始化（还没有调用 open()）。 1：请求已经建立，但是还没有发送（还没有调用 send()）。 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。 4：响应已完成；您可以获取并使用服务器的响应了。 */ /* status 200: "OK" 404: 未找到页面 */ if(xmlHttp.readyState==4&&xmlHttp.status==200){ var h1 = document.getElementById("h1"); var text = xmlHttp.responseText; h1.innerHTML=text; } } } } </script>
</head>
<body>
<button id="button" >点击这里</button>
<h1 id="h1"></h1>
</body>
</html>
效果如下：
点击后：