初識AJAX與XMLHttpRequest介紹

最後更新：2018-07-20 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More