原始的ajax的实现

发表时间:2017-05-16 15:50:25 浏览量( 37 ) 留言数( 0 )

学习目标:

1、了解Java的历史

2、为什么要学习Java语言

3、端正学习态度


学习过程:

一、XMLHttpRequest对象介绍

XMLHttpRequest对象是AJAX技术的基础。虽然现在很多ajax框架都对XMLHttpRequest对象的使用进一步简化,但是,我们还是很有必要理解这个对象的详细工作机制。

1、XMLHttpRequest对象的属性

readyState属性

当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态:一直等待直到请求被处理;然后,它才接收一个响应。这样以来,脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性,如表格1所示。

ReadyState取值如下

0  描述一种"未初始化"状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化。 

1  描述一种"发送"状态;此时,代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。 

2  描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。 

3  描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。 

4 描述一种"已加载"状态;此时,响应已经被完全接收。 

onreadystatechange事件

  无论readyState值何时发生改变,XMLHttpRequest对象都会激发一个readystatechange事件。其中,onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变,该对象都将激活。

responseText属性

  这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时,responseText包含一个空字符串。当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时,该responseText包含完整的响应信息。

responseXML属性

  此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应;此时,Content-Type头部指定MIME(媒体)类型为text/xml,application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一,那么responseXML的值为null。无论何时,只要readyState值不为4,那么该responseXML的值也为null。

  其实,这个responseXML属性值是一个文档接口类型的对象,用来描述被分析的文档。如果文档不能被分析(例如,如果文档不是良构的或不支持文档相应的字符编码),那么responseXML的值将为null。

status属性

  这个status属性描述了HTTP状态代码,而且其类型为short。而且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。

statusText属性

这个statusText属性描述了HTTP状态代码文本;并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

2、XMLHttpRequest对象的方法

abort()方法

  你可以使用这个abort()方法来暂停与一个XMLHttpRequest对象相联系的HTTP请求,从而把该对象复位到未初始化状态。

open()方法

  你需要调用open(DOMString method,DOMString uri,boolean async,DOMString username,DOMString password)方法初始化一个XMLHttpRequest对象。其中,method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET,POST,PUT,DELETE或HEAD)。为了把数据发送到服务器,应该使用POST方法;为了从服务器端检索数据,应该使用GET方法。另外,uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。借助于window.document.baseURI属性,该uri被解析为一个绝对的URI-换句话说,你可以使用相对的URI-它将使用与浏览器解析相对的URI一样的方式被解析。async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求,需要把这个参数设置为false。对于要求认证的服务器,你可以提供可选的用户名和口令参数。在调用open()方法后,XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外,它还复位请求头部。注意,如果你调用open()方法并且此时readyState为4,则XMLHttpRequest对象将复位这些值。

send()方法

  在通过调用open()方法准备好一个请求之后,你需要把该请求发送到服务器。仅当readyState值为1时,你才可以调用send()方法;否则的话,XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true时,send()方法立即返回,从而允许其它客户端脚本处理继续。在调用send()方法后,XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应时,在接收消息体之前,如果存在任何消息体的话,XMLHttpRequest对象将把readyState设置为3(正在接收中)。当请求完成加载时,它把readyState设置为4(已加载)。对于一个HEAD类型的请求,它将在把readyState值设置为3后再立即把它设置为4。

  send()方法使用一个可选的参数-该参数可以包含可变类型的数据。典型地,你使用它并通过POST方法把数据发送到服务器。另外,你可以显式地使用null参数调用send()方法,这与不用参数调用它一样。对于大多数其它的数据类型,在调用send()方法之前,应该使用setRequestHeader()方法(见后面的解释)先设置Content-Type头部。如果在send(data)方法中的data参数的类型为DOMString,那么,数据将被编码为UTF-8。如果数据是Document类型,那么将使用由data.xmlEncoding指定的编码串行化该数据。

setRequestHeader()方法

  该setRequestHeader(DOMString header,DOMString value)方法用来设置请求的头部信息。当readyState值为1时,你可以在调用open()方法后调用这个方法;否则,你将得到一个异常。

getResponseHeader()方法

  getResponseHeader(DOMString header,value)方法用于检索响应的头部值。仅当readyState值是3或4(换句话说,在响应头部可用以后)时,才可以调用这个方法;否则,该方法返回一个空字符串。

getAllResponseHeaders()方法

  该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部(每一个头部占单独的一行)。如果readyState的值不是3或4,则该方法返回null。

二、示例代码

   本章节所使用的基础代码,你可以先下载了

后台servlet的实现,代码如下:

public class LoginServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		PrintWriter out = response.getWriter();
		String username = request.getParameter("username");
		String pass = request.getParameter("password");
		LoginBiz loginBiz = new LoginBiz();
		Login login = loginBiz.login(username, pass);
		if (login != null) {
			System.out.println("登录成功");
			out.print("1");
		} else {
			System.out.println("登录失败");
			out.print("0");
		}
		out.flush();
		out.close();

	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doGet(request, response);
	}
}


页面端的实现:

<%@page import="java.text.SimpleDateFormat"%>
<%@ 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 'ajax1.jsp' starting page</title>
<script type="text/javascript">
	//全局的XMLHttpRequest对象   
	var XMLHttpReq;

	//创建XMLHttpRequest对象       
	function createXMLHttpRequest() {
		if (window.XMLHttpRequest) { //Mozilla IE7浏览器
			XMLHttpReq = new XMLHttpRequest();
		} else {
			window.alert("IE6浏览器");
			if (window.ActiveXObject) { // IE6浏览器
				try {
					XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					try {
						XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
					} catch (e) {
					}
				}
			}
		}
	}

	//发送数据到服务器url  get
	function send(url) {
		//1、建立XMLHttpRequest对象   
		createXMLHttpRequest();
		//2、通过XMLHttpRequest对象的open方法
		XMLHttpReq.open("get", url, true);
		//3、通过onreadystatechange方法监听事件,设置回调方法。
		XMLHttpReq.onreadystatechange = callback;
		//4、发送到服务器
		XMLHttpReq.send(null);
	}

//服务器已经把信息发会给客户端,客户端处理数据
	function callback() {
		//响应已经被完全接收
		if (XMLHttpReq.readyState == 4) {
			//正确返回
			if (XMLHttpReq.status == 200) {
				//获得服务器的返回数据,根据返回数据修改页面
				var result = XMLHttpReq.responseText;

				if (result == "1") {
					//alert('登录成功');
					var username = document.getElementById("username").value;
					var from=document.getElementById("myform");
					from.style.display='none';
					
					var usermessage=document.getElementById("usermessage");
					usermessage.innerHTML="欢迎:"+username;
					
				} else {
					alert('登录失败');
				}

			}
		}
	}

	//登录方法
	function login() {
		//获得用户的输入
		var username = document.getElementById("username").value;
		var pass = document.getElementById("password").value;

		//异步的发送信息给服务器
		url='loginServlet?username='+username+'&password='+pass;
		//异步发送给服务器
		send(url);

	}
</script>

</head>

<body>

 
 <br/>
 
     <span id="usermessage"></span>
 
	<form id="myform" >
		用户名: <input name="username" id="username" /> <br /> 密 &nbsp;码:<input
			name="password" id="password" type="password" /> <br /> <input
			type="button" onclick="login()" value="提交">
	</form>
</body>
</html>

这样我们就实现了一个无刷新的登录功能。