ajax基础

Season_jy

浏览: 29284 次
性别:
来自: 广东

最近访客更多访客>>

w-四爷

ln_ydc

pjmike

skhlaila

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

一、ajax技术之传统的b/s结构

在我们刚刚开始web开发时，我们用的是b/s模型的，我们请求浏览器数据，然后服务器返回html页面，浏览器对页面进行渲染。比如我们在浏览器输入一个http://www.iteye.com/网页。返回的数据是：

然后浏览器根据html文档数据进行渲染，得到web页面。

再想想我们的应用程序，如qq、微信之类的，我们只看到数据的更新与发送，而不像web程序一样，返回整个页面，浏览器再对其处理然后显示其内容。

我们在浏览传统的web页面时，都会感觉到页面的刷新，特别是当页面内容比较多的时候，即使我们只更新一个值，最终都会这样处理。

这时，我们就会想，为什么我们只要一个数据的更新或查询的时候，其它没有变动的地方也要跟着这个数据重新更新一遍，这样数据的冗余比较大，这样服务器的压力也大。我们有没有一种方法只更新一部分的数据，而不要再更新其它不用更新的数据，就像桌面应用程序或app一样呢。既然有这个需求，就会用相应的技术应运而生，就是现在用的很普遍的ajax技术。

二、ajax技术简介

Ajax全称为异步javascript和xml技术。即通过javascript向服务器提交请求（即为http的请求，get、post等），并对返回的响应进行处理，比如向网页面写入数据，已达到更新数据的目的而不需要更新整个页面。Xml（可扩展标记语言）可以用来标记数据，定义数据类型，可用于数据的传输。即可以用xml的来对数据进行组织，用于ajax技术中的浏览器和服务器之间的数据传输。

而ajax的核心就是，通过对象XMLHTTPRequest与服务器进行交互。通过这个对象，浏览器可以在不更新整个页面下获取想要的数据。就如下图：

我们可以用过浏览器观察用了ajax技术的网站，我们进入iteye的注册页面，http://www.iteye.com/signup：

当我们输入一个已存在的用户名时，我们可以用浏览器来查看它的相应。

Xhr就是查看XMLHTTPRequest对象处理的请求，我们可以看到，它只返回一个用户已存在的信息，而没有整个页面的html文档。

二、ajax实例

接下来我们就是要实现上面的那个功能。

要想用到ajax技术，我们就必须获取XMLHTTPRequest对象，XMLHTTPRequest对象是浏览器内置的对象，如ie7+、Firefox、Chrome、Safari和Opera浏览器都有内建的XMLHTTPRequest对象。

Js只需通过一行代码就可以建立一个XMLHTTPRequest对象：

var request=new XMLHTTPRequest();

如果是老版本的ie浏览器，如ie6、5，则要使用ActiveX对象。

var requestnew ActiveXObject("Microsoft.XMLHTTP");

1）以下是建立一个XMLHTTPRequest对象的一个函数。

var request;
function getRequestObject(){
	if(window.ActiveXObject){
	//判断是否是ie浏览器，若是ie浏览器，因为只有ie浏览器才支持ActiveX对象
		request = new ActiveXObject("Microsoft.XMLHTTP");
	//若是支持，可以用这条语句创建一个XMLHttpRequest对象
	}else if(window.XMLHttpRequest){
	//若是其它的浏览器，判断是浏览器否有内建的XMLHttpRequest对象，
		request= new XMLHttpRequest();
	//若可以，则建立一个XMLHTTPRequest对象
	}else{
		window.alert("你的浏览器不支持XMLHttpRequest，无法使用AJAX！");
	}
}

由于ajax是后面才有的技术，一些老式的浏览器可能不支持，或者一些老式的ie浏览器支持的方式不一样。这样也是为了兼容各种浏览器的使用。这样，通过调用这个函数，我们的XMLHTTPRequest对象既可以创立。

2）下面是一个回调函数，即当通过XMLHTTPRequest对象我们发送一个请求之后，获得服务器的响应之后，立马执行这个函数，处理返回的响应。

function processResult(){
	//首先，我们判断是否一个成功的请求是否已成功的相应。
	if((request.readyState==4)&& (request.status==200)){
		//request对象（即XMLHttpRequest对象）的readyState属性若为4，则证明响应数据接受完成
		//request对象的status属性代表服务器返回的http状态码，200表示成功返回
		alert("服务器返回的消息是"+request.responseText);
		//alert方法向浏览器提示返回的数据
		document.getElementById("divName").innerHTML=request.responseText;
		//向相应的页面的更新返回的数据
	}
}

上面用到了几个XMLHTTPRequest的属性，下面我们来详细地看一看这些属性及其值代表的含义。

（1）readyState属性，表示XMLHTTPRequest对象的状态：

0：表示未初始化，即XMLHTTPRequest对象已创建，但是还未调用open方法（方法后面讲）；

1：open方法已经调用，但是send方法还没调用；

2：send方法已经调用，但是还没有接收数据；

3：正在接受数据，即http相应头已经接受，但尚未接收完成；

4：表示数据接收完成。（即为上面那个的方法判断，只有接收完成之后，服务器才能处理数据）

（2）Status，即为http服务器返回的状态码，200表示成功，404表示未找到，500表示服务器出现了错误。

if((request.readyState==4)&& (request.status==200))这里的if判断就是判断是否已经完成了一个http的请求并已成功返回。

（3）Onreadystatechange，请求的状态发生改变是的事件触发器，它就是要绑定一个回调函数，就是上面的那个processResult()函数，当请求的状态发生改变时就会执行这个函数。

（4）responseText，服务器返回的文本的内容，这个直接就是服务器返回的内容文本形式，通过这个属性可以直接获取文本内容。

（5）responseXML，若服务器相应的是xml内容，同时还会判断xml是否符规范，不符合则内容会出现问题。可以通过js解析出xml的内容。

（6）statusText，服务器返回状态的文本信息。

3）下面是一个使用XMLHTTPRequest的方法。

function sendRequest(i){
	alert(i);
	getRequestObject();
	//创建XMLHttpRequest对象
	request.onreadystatechange=processResult;
	//绑定回掉函数，前面的属性说明了设置onreadystatechange这个属性的作用
	request.open("POST","UserinfoAction.do?action=register",true);
	//指定与服务器的请求的方法，post或get等，还有请求的地址，url，还有是否异步，true为异步
	request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//设置请求头
	var userName = document.getElementById("textName").value;
	//获取id为textName的值
	request.send("userName="+userName);
	//向服务器发送请求，userName，即用户名
}

我们接下来介绍XMLHTTPRequest的方法：

（1）Open(string method,string url,boolean asynch,String username,string password)

Method设置与服务器的交互方法，有post、get等等方法，即向服务器请求的方法是用post方法还是get方法；

Url代表请求的地址；

Asynch是一个boolean数据格式，为true表示异步方法，为false表示同步方法；

Open方法就是设定这三个值，就是确定我们用什么方法请求服务器，请求地址，是否异步。

（2）Send(content)向服务器发送请求，若采用异步方式，则立即返回。Content为null时表示不发送数据，但发送请求。一般get方法用null，post方法content设置为post提交的数据。

（3）SetRequestHeader(String header,String Value)设置请求头，设置HTTP请求中的指定头部header的值为value，此方法需在open方法以后调用，一般在post方式中使用。

（4）getAllResponseHeaders()，返回包含Http的所有响应头信息，其中相应头包括Content-length,date,uri等内容。返回值是一个字符串，包含所有头信息，其中每个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔！

（5）getResponseHeader(String header)返回HTTP响应头中指定的键名header对应的值。

（6）Abort()停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。

4）sendRequest绑定一个事件，当事件触发后执行。

然后我们在页面中的表单的账号输入框的onblur事件处理方法。当我们输入一个用户名时，失去光标后，就会触发onblur事件，执行sendRequest方法，获得服务器反馈的信息，以检测该用户名是否已被注册。

账号：<input type="text" id="textName" name="textName"
		onblur="sendRequest(1);">
	<div id="divName" style="color: red"></div>
	<br> 
密码：<input type="password" name="textPassword" onblur="sendRequest(2);">
	 <input type="submit" value="注册">

5）下面是服务器端处理请求后返回数据的action，通过PrintWriter的对象执行输出数据返回给浏览器。PrintWriter对象在讲reponse已经说过其作用了。如果不是用过ajax技术接收，则直接在浏览器上显示返回的数据。若通过了ajax技术接收，则有XMLHTTPRequest对象处理，交给js来把数据更新到页面。

public class UserinfoAction implements Action {

	@Override
	public String execute(HttpServletRequest request, HttpServletResponse response) {
		String action = request.getParameter("action");
		String url = null;
		if (action.equals("login")) {
			url = login(request, response);
		} else if (action.equals("register")) {
			url = register(request, response);
		}
		return url;
	}

	public String login(HttpServletRequest request, HttpServletResponse response) {
		String name = request.getParameter("textName");
		String password = request.getParameter("textPassword");

		if (name.equals(password)) {
			HttpSession session = request.getSession();
			session.setAttribute("name", name);
			session.setAttribute("password", password);
			return "main.jsp";
		}
		return "error.jsp";
	}

	public String register(HttpServletRequest request, HttpServletResponse response) {

		try {
			request.setCharacterEncoding("utf-8");
			response.setCharacterEncoding("utf-8");
			String name = request.getParameter("userName");
			PrintWriter out = response.getWriter();

			if (name.equals("admin")) {
				out.println("该账号已被注册！！!");
			} else {
				out.println("该账号是可用账号！！!");
			}
			out.flush();
			out.close();

		} catch (UnsupportedEncodingException e1) {
			e1.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}

}