Ajax
同步的概念
客户端向服务器发送请求，服务器端处理和响应请求，客户端这段时间会被阻塞等待，不能进行其他操作，服务器端响应后需要重新载入整个页面。
异步
客户端向服务器端发送请求，服务器端处理响应时，客户端无需等待，还可以进行其他操作，服务器端响应之后，页面载入通过JavaScript DOM进行页面的局部刷新，不需要重新载入整个页面。
XMLHttpRequest ：通过这个对象可以实现后台和服务器的数据交换，实现网页的部分更新。
一个完整的Http请求的过程
1. 建立TCP连接
2. Web浏览器向Web服务器发送请求命令。
3. Web浏览器发送请求头信息。
4. Web服务器应答
5. Web服务器发送应答头信息。
6. Web服务器向浏览器发送数据。
7. Web服务器关闭TCP连接。
一个Http请求一般由四部分组成
| Http请求的方法，get或者post | 请求的URL，也就是请求的地址 | 请求头，包含一些客户端环境信息，身份验证信息。 | 请求体，包含客户端提交的查询字符串信息，表单信息。 |
一个Http请求一般由三部分组成
| 一个数字和文字组成的状态吗，用来显示请求是成功还是失败。 | 响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型、长度。 | 响应体，响应正文。 |
Http状态码由3位数字构成，其中首位数字定义了状态码的类型。
| 1XX ： 信息类，表示收到Web浏览器的请求，正在进一步处理中。 |
| 2XX : 成功，表示用户请求被正确接收，处理。如200 |
| 3XX：重定向，表示请求没有成功，客户必须采取进一步的动作。 |
| 4XX： 客户端错误，表示客户端提交的请求有错误，例如：404 Not Found |
| 5XX：服务器错误，表示服务器不能完成对请求的处理： 如500 |
通过XMLHttpRequest发送请求
方法介绍
| open(method,url,async); method: 请求的方法，使用get还是post请求。 url：请求的地址。 async：是否发送异步请求，默认为true。 |
| send(string); 发送的内容。 |
request.open(“POST”,”create.jsp”,true);
request.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
request.send(“name=a&sex=man”);
通过XMLHttpRequest取得响应
| responseText: 获取字符串形式的响应数据。 responseXML: 获得XML形式的响应数据。 status和statusText: 以数字和文本形式返回HTTP状态码。 getAllResponseHeader(): 获取所有的响应报头。 getResponseHeader(); 查询响应中的某个字段的值。 |
| readyState属性 服务器响应成功时得到通知。 0： 请求还未初始化，open还没有调用。 1： 服务器连接已建立，open已经调用。 2： 请求已接收，也就是收到头信息。 3: 请求处理中，也就是接收到响应主体。 4：请求已完成，且响应已就绪。 |
如何监听服务器响应的状态，通过onreadystatechange方法
var request = new XMLHttpRequest();
request.open(“GET”,”get.jsp”,true);
request.send();
request.onreadstatechange=function(){
if(request.readyState ===4 && request.status === 200){
//响应成功后做一些事情
}
}
简单示例：例子参考http://blog.youkuaiyun.com/sdandan/article/details/4914597
AjaxServlet.javapackage com.meng.ajax;
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 AjaxServlet extends HttpServlet {
private static final String CONTENT_TYPE = "text/xml; charset=gb2312";
public void init() throws ServletException {
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
//添加一个睡眠时间，模拟耗时操作
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
response.setContentType(CONTENT_TYPE);
PrintWriter out = response.getWriter();
String action = request.getParameter("action");
if (("send").equals(action)) {
StringBuffer sb = new StringBuffer("<type>");
sb.append("<type_name>AA</type_name>");
sb.append("<type_name>BB</type_name>");
sb.append("<type_name>CC</type_name>");
sb.append("<type_name>DD</type_name>");
sb.append("</type>");
out.write(sb.toString());
out.close();
}
}
}
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'Ajax.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<script type="text/javascript">
/*通过异步传输XMLHTTP发送参数到ajaxServlet，返回符合条件的XML文档*/
function getResult(){
var url = "/AjaxDemo/Ajax?action=send";
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
req.open("GET",url, true);
req.onreadystatechange = complete;
req.send(null);
}
}
/*分析返回的XML文档*/
function complete(){ if (req.readyState == 4){
if (req.status == 200) {
var type = req.responseXML.getElementsByTagName("type_name");
var str=new Array();
for(var i=0;i< type.length;i++){
str[i]=type[i].firstChild.data;
document.all['td'].innerHTML+=str[i]+"";
}
} }}
</script>
<body>
<table width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="td"> </td>
</tr>
</table>
<br/><input type="button" οnclick="getResult()" value="get"/><br/>
<input type="text"/>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>AjaxDemo</display-name>
<servlet>
<servlet-name>Ajax</servlet-name>
<servlet-class>com.meng.ajax.AjaxServlet</servlet-class>
</servlet>
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>GetJsp</servlet-name>
<servlet-class>com.meng.ajax.GetJsp</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Ajax</servlet-name>
<url-pattern>/Ajax</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>GetJsp</servlet-name>
<url-pattern>/servlet/GetJsp</url-pattern>
</servlet-mapping>
</web-app>
public class GetJsp extends HttpServlet {
public GetJsp() {
super();
}
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.getRequestDispatcher("/WEB-INF/Ajax.jsp").forward(request, response);
}
public void init() throws ServletException {
// Put your code here
}
}
从访问结果可以看出，如果我们设置为异步访问，则可以继续进行客户端操作，如果设置为同步访问，则客户端会等待，被阻塞，通过改变open("GET",url, true);第三个参数，可以看到使用Ajax的好处，拥有更好的交互体验。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
