- XmlHttp是什麼？
最通用的定義爲：XmlHttp是一套可以在Javascript、VbScript、Jscript等腳本語言中通過http協議傳送或從接收XML及其他數據的一套API。XmlHttp最大的用處是可以更新網頁的部分內容而不需要刷新整個頁面。
來自MSDN的解釋：XmlHttp提供客戶端同http服務器通訊的協議。客戶端可以通過XmlHttp對象(MSXML2.XMLHTTP.3.0)向http服務器發送請求並使用微軟XML文檔對象模型Microsoft® XML Document Object Model (DOM)處理迴應。
現在的絕對多數瀏覽器都增加了對XmlHttp的支持，IE中使用ActiveXObject方式創建XmlHttp對象，其他瀏覽器如：Firefox、Opera等通過window.XMLHttpRequest來創建xmlhttp對象。
- AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。
- AJAX 是一種用於創建快速動態網頁的技術。
- 作用：通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
- ajax對象參考：
屬性：
onreadystatechange* 指定當readyState屬性改變時的事件處理句柄。只寫
readyState 返回當前請求的狀態，只讀.
responseBody 將回應信息正文以unsigned byte數組形式返回.只讀
responseStream 以Ado Stream對象的形式返回響應信息。只讀
responseText 將響應信息作爲字符串返回.只讀
responseXML 將響應信息格式化爲Xml Document對象並返回，只讀
status 返回當前請求的http狀態碼.只讀
statusText 返回當前請求的響應行狀態，只讀
方法：
abort 取消當前請求
getAllResponseHeaders 獲取響應的所有http頭
getResponseHeader 從響應信息中獲取指定的http頭
open 創建一個新的http請求，並指定此請求的方法、URL以及驗證信息(用戶名/密碼)
send 發送請求到http服務器並接收回應
setRequestHeader 單獨指定請求的某個http頭 - 兩個重要類狀態信息：
readyState
變量，此屬性只讀，狀態用長度爲4的整型表示.定義如下：
0 (未初始化) 對象已建立，但是尚未初始化（尚未調用open方法）
1 (初始化) 對象已建立，尚未調用send方法
2 (發送數據) send方法已調用，但是當前的狀態及http頭未知
3 (數據傳送中) 已接收部分數據，因爲響應及http頭不全，這時通過responseBody和responseText獲取部分數據會出現錯誤，
4 (完成) 數據接收完畢,此時可以通過通過responseBody和responseText獲取完整的迴應數據
status
長整形標準http狀態碼，定義如下： Number Description
100 Continue
101 Switching protocols
200 OK
201 Created
202 Accepted
203 Non-Authoritative Information
204 No Content
205 Reset Content
206 Partial Content
300 Multiple Choices
301 Moved Permanently
302 Found
303 See Other
304 Not Modified
305 Use Proxy
307 Temporary Redirect
400 Bad Request
401 Unauthorized
402 Payment Required
403 Forbidden
404 Not Found
405 Method Not Allowed
406 Not Acceptable
407 Proxy Authentication Required
408 Request Timeout
409 Conflic
410 Gone
411 Length Required
412 Precondition Failed
413 Request Entity Too Large
414 Request-URI Too Long
415 Unsupported Media Type
416 Requested Range Not Suitable
417 Expectation Failed
500 Internal Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported
- 使用步驟：
1創建一個ajax對象(XMLHttpResquest)
2設置通訊方式和地址(open)
3設置訪問成功後的 js對象(回調函數)(onreadystatechange)
4發送（post.get）(send)下面是詳細代碼演示：
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>演示Ajax技術</title>
<script type="text/javascript">
function check1(obj){
//先進行數據格式檢驗--這裏省了
var name=obj.value;
//1創建一個ajax對象//xmlHttp.
//IE中使用ActiveXObject方式創建XmlHttp對象，其他瀏覽器如：Firefox、Opera等通過window.XMLHttpRequest來創建xmlhttp對象。
var xhr=null;
if(window.XMLHttpRequest){//ie7 Firefox、Opera等通過window.XMLHttpRequest來創建xmlhttp對象。
xhr=new XMLHttpRequest();
}else{//老版本
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
var url="<c:url value='/OneServlet?name="+name+"'/>";
//2 設置通訊方式和地址
xhr.open("GET", url, true);//false異步--多線程
//xhr.open("GET", url, false);//false同步--單線程
//3 設置訪問成功後的 js對象(回調函數)
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var text=xhr.responseText;
alert("服務器返回"+text);
succ1(text);
}else{
alert("服務器響應出錯信息,錯誤代碼:"+xhr.status);
}
}
};
//4發送---Get方式，沒有參數(請求體) ---數據在請求地址中
xhr.send(null);
alert("OKOK");//同步時，必須等到ajax回來之後纔會執行。異步時不用等
}
function succ1(obj){
div1.innerHTML=obj;
}
function check2(obj){
var name=obj.value;
//1創建一個ajax對象//xmlHttp.
var xhr=null;
if(window.XMLHttpRequest){//ie7 Firefox、Opera等通過window.XMLHttpRequest來創建xmlhttp對象。
xhr=new XMLHttpRequest();
}else{//老版本
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
//2 設置通訊方式和地址
var url="<c:url value='/OneServlet' />";
xhr.open("POST", url, true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var text=xhr.responseText;
alert("服務器返回"+text);
succ2(text);
}else{
alert("服務器響應出錯信息,錯誤代碼:"+xhr.status);
}
}
};
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//POST要設置響應頭,而且要放在響應之後
//4發送---Post方式，有參數(請求體) <---數據 ※
xhr.send("name="+name);
alert("OKOK");//同步時，必須等到ajax回來之後纔會執行。異步時不用等
}
function succ2(obj){
div2.innerHTML=obj;
}
</script>
</head>
<body>
<h3>演示Ajax技術</h3>
<pre>
Ajax技術介紹:
全稱: Asynchronized(異步) Javascript And Xml
技術組成: Javascript、DOM、CSS 和 XMLHttpRequest (ActiveXObject)
readyState
0 (未初始化) 對象已建立，但是尚未初始化（尚未調用open方法）
1 (初始化) 對象已建立，尚未調用send方法
2 (發送數據) send方法已調用，但是當前的狀態及http頭未知
3 (數據傳送中) 已接收部分數據，因爲響應及http頭不全，這時通過responseBody和responseText獲取部分數據會出現錯誤，
4 (完成) 數據接收完畢,此時可以通過通過responseBody和responseText獲取完整的迴應數據
</pre>
<form action="">
GET姓名1:<input type="text" name="name" onblur="check1(this)"><br/>
<div id="div1"></div><br/>
POST姓名2:<input type="text" name="name" onblur="check2(this)"><br/>
<div id="div2"></div><br/>
</form>
</body>
</html>
OneServlet.java
package cn.hncu.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class OneServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String name=request.getParameter("name");
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
out.println(name+"你好，來訪時間是:"+sdf.format(new Date()) );
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
// out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String name=request.getParameter("name");
int i=100/0;//故意讓後臺響應500的錯誤信息
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
out.println(name+"你好，來訪時間是:"+sdf.format(new Date()) );
}
}
封裝的ajax工具
function Ajax(){
this.get=function(url,succ1,failure){
var http=this.getHttp();
http.open("GET",url,true);
http.onreadystatechange=function(){
if(http.readyState==4){
if(http.status==200){
var text=http.responseText;
alert(text);
succ1(text);
}else{
if(failure){
failure(http.status);
}
}
}
};
http.send(null);
};
this.post=function(url,param,succ2,failure){
var http=this.getHttp();
http.open("post",url,true);
http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http.onreadystatechange=function(){
if(http.readyState==4){
if(http.status==200){
var text=http.responseText;
alert(text);
succ1(text);
}else{
if(failure){
failure(http.status);
}
}
}
};
http.send(param);
};
this.getHttp=function(){//生成ajax對象
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
return new ActiveXObject("Microsoft.XMLHttp");
}
};
};
