学习总结之 Ajax 2

 如何获得一个XmlHttpRequest对象? 

Javascript代码

1. function getXmlHttpRequest(){
2. var xhr=null;
3. if(window.XMLHttpRequest){
4. //非ie
5. xhr=new XMLHttpRequest();
6. }else{
7. //从这里也可以看出微软的嚣张跋扈
8. xhr=new ActiveXObject("Microsoft.XMLHTTP");
9. }
10. return xhr;
11. }

function getXmlHttpRequest(){
		 var xhr=null;
		 if(window.XMLHttpRequest){
		 	//非ie
		 	xhr=new XMLHttpRequest();
		 }else{
		     //从这里也可以看出微软的嚣张跋扈
		 	xhr=new ActiveXObject("Microsoft.XMLHTTP");
		 }
		 return xhr;
}

一个简单的Ajax用法示例:检查用户名唯一性

Javascript代码

1. function checkUsername() {
2.  
3. //创建checkname.do request
4. var xhr=getXmlHttpRequest();
5.  
6. var username=document.getElementById("username").value;
7. var url="checkusername?username="+username;
8. xhr.open("get",url,true);//true,为异步,可以在响应回来之前进行其它操作;默认为true
9.  
10. //注册响应函数
11. xhr.onreadystatechange=function(){
12. //请求处理完毕后执行以下代码
13. //xhr有5种状态,0到4,分别代表(0)请求未初始化,(1)请求已初始化但未发送,(2)请求已发送,(3)请求处理中,(4)请求处理完毕
14. if(xhr.readyState==4){
15. //响应处理, 获取服务器返回的Text
16. var text=xhr.responseText;
17. document.getElementById("name_msg").innerHTML=text;
18. }
19. }
20.  
21. //发送请求
22. xhr.send(null);
23. }

function checkUsername() {

	//创建checkname.do request
	var xhr=getXmlHttpRequest();
				
	var username=document.getElementById("username").value;
	var url="checkusername?username="+username;
	xhr.open("get",url,true);//true,为异步,可以在响应回来之前进行其它操作;默认为true
				 
	//注册响应函数
	xhr.onreadystatechange=function(){
	//请求处理完毕后执行以下代码
	//xhr有5种状态,0到4,分别代表(0)请求未初始化,(1)请求已初始化但未发送,(2)请求已发送,(3)请求处理中,(4)请求处理完毕
	 if(xhr.readyState==4){
			//响应处理, 获取服务器返回的Text
			var text=xhr.responseText;
			document.getElementById("name_msg").innerHTML=text;
		 }
	 }
				 
	//发送请求			
	 xhr.send(null);
}

对应的html代码

Jsp代码

1. <form method="post" action="checkusername">
2. username:
3. <input name="username" id="username" onblur="checkusername()" />
4. <span id="name_msg" style="color:red"></span>
5. <br />
6. <input type="submit" value="OK" />
7. </form>

<form method="post" action="checkusername">
	username:
	<input name="username" id="username" onblur="checkusername()" />
	<span id="name_msg" style="color:red"></span>
	<br />
	<input type="submit" value="OK" />
</form>

对应的servlet代码

Java代码

1. import java.io.IOException;
2. import java.io.PrintWriter;
3.  
4. import javax.servlet.ServletException;
5. import javax.servlet.http.HttpServlet;
6. import javax.servlet.http.HttpServletRequest;
7. import javax.servlet.http.HttpServletResponse;
8.  
9. public class CheckUserNameServlet extends HttpServlet {
10.  
11. public void service(HttpServletRequest request, HttpServletResponse response)
12. throws ServletException, IOException {
13. response.setContentType("text/plain;charset=utf-8");//text/plain 很重要
14. request.setCharacterEncoding("utf-8");
15. PrintWriter out=response.getWriter();
16. String username = request.getParameter("username");
17. System.out.println(username);
18.  
19. if ("tom".equals(username)) {//为方便起见,直接给了一个
20. out.print("此用户名已被占用");
21. } else {
22. out.print("可以使用");
23. }
24. out.flush();
25. out.close();
26. }
27. }

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 CheckUserNameServlet extends HttpServlet {

	public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/plain;charset=utf-8");//text/plain 很重要
		request.setCharacterEncoding("utf-8");
		PrintWriter out=response.getWriter();
		String username = request.getParameter("username");
		System.out.println(username);
		
		if ("tom".equals(username)) {//为方便起见,直接给了一个
			out.print("此用户名已被占用");
		} else {
			out.print("可以使用");
		}
		out.flush();
		out.close();
	}
}

结果:
输入tom,提交:提示"此用户名已被占用"

这种使用Ajax的方法很繁琐,且容易出错,一一般都用jquery发送Ajax,但作为一个学习者,还是有必要了解这种原始的方法的.