ajax基础

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


ajax基础

 

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


ajax基础

 

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

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

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

二、ajax技术简介  

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

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


ajax基础

 


ajax基础

 

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


ajax基础
 
ajax基础

 

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;
	}

}

 

 

 

相关推荐