【Web】Ajax基本使用

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.csdn.net/sdandan/article/details/4914597

AjaxServlet.java

package 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("");
			sb.append("AA");
			sb.append("BB");
			sb.append("CC");
			sb.append("DD");
			sb.append("");
			out.write(sb.toString());
			out.close();
		}
	}
}

Ajax.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>















	


	

配置web.xml

  AjaxDemo
  
  	Ajax
  	com.meng.ajax.AjaxServlet
  
  
    This is the description of my J2EE component
    This is the display name of my J2EE component
    GetJsp
    com.meng.ajax.GetJsp
  
  
  	Ajax
  	/Ajax
  
  
    GetJsp
    /servlet/GetJsp
  

使用一个servlet来访问WEB-INF下的jsp页面。

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的好处，拥有更好的交互体验。