Ajax實現–javascript

最後更新：2018-12-05 來源：互聯網

上載者：User

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

Ajax技術的好處我想我們已經不需要再過多陳述了，ajax技術現在已經被廣泛運用在web應用中，比如google地圖，省市級聯等等

AJAX = Asynchronous JavaScript and XML.

AJAX 是一種建立快速動態網頁的技術。

AJAX 通過在後台與伺服器交換少量資料的方式，允許網頁進行非同步更新。這意味著有可能在不重載整個頁面的情況下，對網頁的一部分進行更新。

廢話不多說，現在先用純javascript來實現一下ajax技術

首先是jsp頁面：

<html>  <head>    <script type="text/javascript">        var xmlHttpRequest = null;        function ajaxRequest()    {        if(window.ActiveXObject) // IE瀏覽器        {            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");        }        else if(window.XMLHttpRequest) // 除IE以外的其他瀏覽器        {            xmlHttpRequest = new XMLHttpRequest();        }        if(null != xmlHttpRequest)        {            var v1 = document.getElementById("value1").value;            var v2 = document.getElementById("value2").value;                        // 準備向伺服器發出一個請求                        /*             * GET方式向伺服器發出一個請求             * xmlHttpRequest.open("GET", "AjaxServlet?v1=" + v1 + "&v2=" + v2, true);             */                          /*              * POST方式向伺服器發出一個請求              */            xmlHttpRequest.open("POST", "AjaxServlet", true);                         // 當發生狀態變化時就調用這個回呼函數            xmlHttpRequest.onreadystatechange = ajaxCallBack;                        // 使用post提交時必須加上下面這行代碼            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");                        // 向伺服器發出一個請求            xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);            }    }        function ajaxCallBack()    {        if(xmlHttpRequest.readyState == 4)        {            if(xmlHttpRequest.status == 200)            {                var content = xmlHttpRequest.responseText;                document.getElementById("div1").innerHTML = content;            }        }    }        </script>  </head>    <body>    <input type="button" value="get content from serve" onclick="ajaxRequest()"/><br>    <input type="text" id="value1"/><br>    <input type="text" id="value2"/>    <div id="div1"></div>    </body></html>

服務端的servlet非常簡單，就是響應給用戶端一段常值內容。

ajax技術的核心就是xmlHttpRequest，對於IE來說，因為其核心與其他瀏覽器不一樣(Firefox, Chrome)，所以首先要判斷一下使用的瀏覽器是否是IE

        if(window.ActiveXObject) // IE瀏覽器        {            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");        }        else if(window.XMLHttpRequest) // 除IE以外的其他瀏覽器        {            xmlHttpRequest = new XMLHttpRequest();        }

這樣得到xmlHttpRequest以後，接下來的操作在上面代碼裡都有體現，流程無非就是像servlet發送請求，然後根據響應狀態的轉變調用回呼函數，最後得到伺服器端響應回來的資料，響應過來的既可以是xml文本，還可以是json資料或者是普通文本，

本文章原先以中文撰寫並發佈於 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