AJAX初探,XMLHttpRequest介紹
AJAX
AJAX = Asynchronous JavaScript and XML. 異步的JavaScript和XML.
AJAX是一種在不需要重新加載整個頁面的情況下,與服務器交換數據並更新部分網頁的技術.
之前傳統的網頁如果需要更新內容,必須重新加載整個頁面.
AJAX基於已有標准,已被使用多年. 2005年的Google Suggest使其流行起來,當你輸入關鍵字時,會返回搜索建議的列表.
優點:更快,給用戶的體驗更好,減少了傳輸的流量.
舉例:
在百度,Google的搜索框輸入文字時,可以看到已經發送出請求,所以有搜索建議列表;
百度地圖,在拖動地圖的時候,也可以看到它在不斷地發出請求,頁面內容在發生改變,但是整個頁面並沒有被刷新.
AJAX中的重要對象:XMLHttpRequest
這個對象是微軟最先在ie里面提供的,使用的是ActiveX對象(IE5和IE6):
variable=new ActiveXObject("Microsoft.XMLHTTP");
現在,所有的現代瀏覽器(IE7+,Firefox,Chrome,Safari 以及 Opera)均內建XMLHttpRequest對象:
variable=new XMLHttpRequest();
為了應對所有的現代瀏覽器,包括 IE5 和 IE6,請檢查瀏覽器是否支持 XMLHttpRequest 對象.
如果支持,則創建 XMLHttpRequest 對象.如果不支持,則創建 ActiveXObject:
var xmlHttpRequest; if (window.XMLHttpRequest) {//in JavaScript, if it exists(not null and undifine), it is true. // code for IE7+, Firefox, Chrome, Opera, Safari xmlHttpRequest = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); }
也可以先判斷IE6,5的情況:
if (window.ActiveXObject) { //code for IE6, IE5 } else { //code for others }
使用AJAX跟服務器端通信
1.准備階段:
xmlHttpRequest.open("GET", "AjaxServlet", true);
open方法的原型是:XMLHttpRequest.prototype.open = function(method,url,async,user,password) {};
我們這里只指定了三個參數:方法,路徑和發送異步請求為true.
2.關聯好回調函數:
當狀態改變的時候,進入處理器,這里是一個回調方法:
xmlHttpRequest.onreadystatechange = ajaxCallback;
狀態分為多種,被數字標識.參見: http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp
readyState存有 XMLHttpRequest 的狀態,從 0 到 4 發生變化:
0: 請求未初始化 1: 服務器連接已建立 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
3.真正地向服務器端發送數據:
xmlHttpRequest.send();
這里使用GET方法,可以不傳入參數,或者寫send(null),發送POST請求時,需要在這里傳入參數.
4.處理回調:
function ajaxCallback() { //alert("test");//this alert will show several times when click the button. if (4 == xmlHttpRequest.readyState && 200 == xmlHttpRequest.status) { var responseText = xmlHttpRequest.responseText; document.getElementById("div1").innerHTML = responseText; } }
先判斷readyState再判斷響應的返回值為4,表示請求已完成,status返回200表示響應的返回值為200,即HTTP請求成功.
這里將服務器返回的內容設置入div節點,顯示出來.
完整代碼
服務器端程序:
package com.mengdd.servlets; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; public class HelloAjaxServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("doGet invoked!"); PrintWriter out = response.getWriter(); out.println("Hello World"); out.flush(); } }
index.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Hello Ajax</title>
<script type="text/javascript">
var xmlHttpRequest;
function ajaxSubmit() {
if (window.XMLHttpRequest) {//in JavaScript, if it exists(not null and undifine), it is true.
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// code for IE6, IE5
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} else {
//very rare browsers, can be ignored.
}
//also, we can handle IE5,6 first using:
/*
if (window.ActiveXObject) {
//code for IE6, IE5
}
else {
//code for others
}
*/
//send request
if (null != xmlHttpRequest) {
//1. prepare request
xmlHttpRequest.open("GET", "AjaxServlet", true);
// XMLHttpRequest.prototype.open = function(method,url,async,user,password) {};
//2. set callback function to handle events
xmlHttpRequest.onreadystatechange = ajaxCallback;
//3. do sending request action
xmlHttpRequest.send();//POST requset needs params here, for GET, just leave params empty or set it to null.
}
}
function ajaxCallback() {
//alert("test");//this alert will show several times when click the button.
if (4 == xmlHttpRequest.readyState && 200 == xmlHttpRequest.status) {
var responseText = xmlHttpRequest.responseText;
document.getElementById("div1").innerHTML = responseText;
}
}
</script>
</head>
<body>
<input type="button" value="get content from server" onclick="ajaxSubmit();">
<div id="div1"></div>
</body>
</html>
web.xml:
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> <servlet> <servlet-name>HelloAjaxServlet</servlet-name> <servlet-class>com.mengdd.servlets.HelloAjaxServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>HelloAjaxServlet</servlet-name> <url-pattern>/AjaxServlet</url-pattern> </servlet-mapping> </web-app>
參考資料:
w3school AJAX:
http://www.w3school.com.cn/ajax/index.asp
聖思園張龍老師JavaWeb視頻教程63: AJAX深度剖析,XMLHttpRequest對象大揭秘.