學習總結之 Ajax 2

 如何得到一個XmlHttpRequest對象? 

function getXmlHttpRequest(){
var xhr=null;
if(window.XMLHttpRequest){
//非ie
xhr=new XMLHttpRequest();
}else{
//從這裏也能夠看出微軟的囂張跋扈
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}

function getXmlHttpRequest(){
		 var xhr=null;
		 if(window.XMLHttpRequest){
		 	//非ie
		 	xhr=new XMLHttpRequest();
		 }else{
		     //從這裏也能夠看出微軟的囂張跋扈
		 	xhr=new ActiveXObject("Microsoft.XMLHTTP");
		 }
		 return xhr;
}

一個簡單的Ajax用法示例:檢查用戶名惟一性

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

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代碼

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

<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代碼

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

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,但做爲一個學習者,仍是有必要了解這種原始的方法的.