Ajax基礎（詳講+案例）

阿新 • • 發佈：2018-12-31

。（一）初步認識ajax：中文又稱作“啊甲思”，英語是：asynchronous javascript and xml （翻譯為 js跟xml的非同步），其實底層還是js。其中最大最大最大的特點就是頁面的不重新整理
1. AJAX=HMTL+CSS+JS+DOM+XHR 等多種技術的一個總和
2. 傳統的一個web是一個請求—>等待響應—>請求—->等待響應的過程。這叫做同步
3. 現代Web應用是以請求->請求->請求->響應->響應->響應->…,叫非同步請求/操作
可以列舉幾個ajax使用的例子加深印象：
1. 傳統的登錄檔單時，驗證使用者名稱是否唯一。需要點選註冊之後才會到資料庫驗證。而使用ajax時，可在文字框失去焦點的時候就去資料庫驗證。更符合現在web需求
2. 無重新整理的分頁。
3. 百度搜索框輸入文字時，未提交就有提示的效果。看下面插圖…..等等應用
總結來說：也就是，當你需要區域性請求伺服器而不是全域性請求伺服器的時候，就可以考慮一下ajax

（二）ajax的使用
這裡我特別個人推薦是：看手冊學習。截個圖
這裡寫圖片描述
1：建立ajax

//包括IE7以上版本的瀏覽器
var xhr = new XMLHttpRequest();
//IE(6/7/8)方式 ，這裡大小寫不敏感
var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);  //最原始方式
var xhr = new ActiveXObject(“Msxml2.XMLHTTP”);    //升級
var xhr = new ActiveXObject(“Msxml2.XMLHTTP.3.0”);  //升級
var xhr = new ActiveXObject(“Msxml2.XMLHTTP.5 
.0”);  //升級
var xhr = new ActiveXObject(“Msxml2.XMLHTTP.6.0”);  //最高版本方式

//因此個人是這樣建立的
    function createXHR(){
            var xhr = null;
            try{
                xhr = new ActiveXObject("microsoft.xmlhttp");
            }catch(e){
                try{
                    xhr = new XMLHttpRequest();
                }catch 
(e){
                    window.alert("你的瀏覽器太差");
                }
            }
            return xhr;
        }

2：開發步驟

建立一個 ajax物件。方法在上面

利用open方法準備傳送一個請求。xhr.open(“get/post(請求方式)”，”請求的網址路徑”，false/true同步或者非同步)

利用send方法確實傳送了這個請求。如果是get請求的話，那麼xhr.send(null),如果是post請求的話，xhr.send(“引數”)

接受返回的資訊。利用狀態監聽。雖然這裡是第四步驟，但是習慣把這個寫在第二布的位置

（三）直接上案例咯
1：動態返回時間 java程式碼哦

<body>
        <input type="button" value="ajax體驗，請點選我"/>  
    <hr/>
    <div>
        <!-- 顯示結果 -->
    </div>
    <script type="text/javascript">

        var inputElement = document.getElementsByTagName("input")[0];

        inputElement.onclick=function(){

            //建立AJAX引擎物件
            var xhr = createXHR();

            //為AJAX引擎物件設定狀態改變事件[0-4共5個]
            xhr.onreadystatechange = function(){

                //如果請求和響應已經完成
                if(xhr.readyState==4){

                    //響應是否正確
                    if(xhr.status==200){

                        //取得AJAX引擎的響應結果
                        var msg = xhr.responseText;

                        //查詢<div>標籤
                        var divElement = document.getElementsByTagName("div")[0];

                        //將內容寫入<div>標籤內
                        divElement.innerHTML = msg;

                    }

                }
            }
            //準備傳送非同步請求到服務端
            xhr.open("get","/ajax/AjaxServlet");

            //真正傳送非同步請求
            xhr.send(null);


        }
        //根據不同瀏覽器建立AJAX引擎物件
        function createXHR(){
            var xhr = null;
            //如果是IE
            if(window.ActiveXObject){
                xhr = new ActiveXObject("microsoft.xmlhttp");
            //如果非IE
            }else{
                xhr = new XMLHttpRequest();
            }
            return xhr;
        }
    </script>

AjaxServlet
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("AjaxServlet::doGet()");
        String msg = new Date().toLocaleString();
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write(msg);
    }

2://Get方式 + 動態檢查使用者名稱是否合法

Get方式說明：
①在url地址後邊以請求字串(傳遞的get引數資訊)形式傳遞資料。
② 對中文、=、&等特殊符號處理
=、&符號在瀏覽器裡邊會與請求字串的關鍵符號有混淆，避免歧義產生需要對其進行編碼.
在php裡邊可以函式函式 urlencode()/urldecode()對特殊符號進行編碼、反編碼處理
(url_encode()可以把中文轉變為瀏覽器可以識別的資訊。轉變之後的資訊具體為%號後接兩個十六進位制數)
在javascript裡邊可以通過encodeURIComponent ()對特殊符號等資訊進行編碼。

這裡寫圖片描述
特別注意一點是：這裡採用的以字串的形式接受返回的資料，說以msg = xhr.responseText。下面的post就是以xml的方式返回

<body>
    輸入使用者名稱：<input type="text"/>游標移出後，立即查檢結果
    <hr/>
    <div>
        <!-- 顯示結果 -->
    </div>
    <script type="text/javascript">
        document.getElementsByTagName("input")[0].onblur=function(){
            //取得使用者輸入的使用者名稱
            var username = this.value;
            //對中文編碼
            username = encodeURI(username);
            //建立AJAX引警物件
            var xhr = createXHR();
            //設定函式監聽
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var msg = xhr.responseText;
                        var divElement = document.getElementsByTagName("div")[0];
                        divElement.innerHTML = "<img src='"+msg+"'/>";
                    }
                }               
            }
            //準備以GET方式傳送請求
            xhr.open("get","/ajax/GetServlet?time="+new Date().getTime()+"&username="+username);
            //真正傳送請求
            xhr.send(null);     
        }
        function createXHR(){
            var xhr = null;
            try{
                xhr = new ActiveXObject("microsoft.xmlhttp");
            }catch(e){
                try{
                    xhr = new XMLHttpRequest();
                }catch(e){
                    window.alert("你的瀏覽器太差");
                }
            }
            return xhr;
        }
    </script>
  </body>

GetServlet、

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("GetServlet::doGet()");
        String username = request.getParameter("username");
        byte[] buf = username.getBytes("ISO8859-1");
        username = new String(buf,"UTF-8");
        String msg = null;
        if(username.equals("趙君")){
            //msg = "<font color='red'>該使用者已存在</font>";
            msg = "images/MsgError.gif";
        }else{
            //msg = "<font color='green'>可以註冊</font>";
            msg = "images/MsgSent.gif";
        }
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write(msg);
    }

3:Post方式 + 動態檢查使用者名稱是否合法

Post方式說明
① 給伺服器傳遞資料需要呼叫send(請求字串資料)方法
② 呼叫方法setRequestHeader()把傳遞的資料組織為xml格式(模仿form表單給伺服器傳遞資料)
③ 傳遞的中文資訊無需編碼，特殊符號像 &、=等需要編碼
④ 該方式請求的同時也可以傳遞get引數資訊，同樣使用$_GET接收該資訊
5.對於POST請求，一定要設定請求頭，程式碼如下：
xhr.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);
在open()之後，在send()之前這裡採用的以xml的形式接受返回的資料
特別注意一點是：，說以msg = xhr.responseXml。上面的get以text方式返回。也就是responseTest。。好好體會一下接下來接收資料的方式不一樣

<body>
    輸入使用者名稱：<input type="text"/>單擊檢查按鈕後，立即查檢結果
    <input type="button" value="檢查"/>
    <hr/>
    <div>
        <!-- 顯示結果 -->
    </div>
    <script type="text/javascript">
        document.getElementsByTagName("input")[1].onclick=function(){
            //取得使用者輸入的使用者名稱
            var username = document.getElementsByTagName("input")[0].value;
            //對中文編碼
            username = encodeURI(username);
            //建立AJAX引警物件
            var xhr = createXHR();
            //設定函式監聽
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        //以字串形式接收
                        //var msg = xhr.responseText;

                        //以XML形式接收
                        var xmlDocument = xhr.responseXML;
                        var resElement = xmlDocument.getElementsByTagName("res")[0];
                        var msg = resElement.firstChild.nodeValue;          
                        var divElement = document.getElementsByTagName("div")[0];
                        divElement.innerHTML = "<img src='"+msg+"'/>";
                    }
                }
            }

            //準備以POST方式傳送請求
            xhr.open("post","/ajax/PostServlet?time="+new Date().getTime());

            //設定請求頭，只有是POST方式下，才設定該請求頭
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

            //真正傳送請求
            xhr.send("username="+username);
        }
        function createXHR(){
            var xhr = null;
            try{
                xhr = new ActiveXObject("microsoft.xmlhttp");
            }catch(e){
                try{
                    xhr = new XMLHttpRequest();
                }catch(e){
                    window.alert("你的瀏覽器太差");
                }
            }
            return xhr;
        }
    </script>
  </body>


  PostServlet

  public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("PostServlet::doPost()");
        request.setCharacterEncoding("UTF-8");
        String username = request.getParameter("username");
        System.out.println("使用者名稱：" + username);
        String msg = null;
        if(username.equals("趙君")){
            msg = "images/MsgError.gif";
        }else{
            msg = "images/MsgSent.gif";
        }
        response.setContentType("text/xml;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        pw.write("<root>");
            pw.write("<res>");
                pw.write(msg);
            pw.write("</res>");
        pw.write("</root>");

    }

（四）get方式 + post方式總結

兩者的不同
① 給伺服器傳遞資料量，get最多是2k
post原則沒有限制，php.ini對其限制為8M
② 安全方面，post傳遞資料較安全
③ 傳遞資料的形式不一樣
get方式在url地址後邊以請求字串形式傳遞引數
http://網址/index.php?name=tom&age=23&addr=beijing
藍色部分就是請求字串，就是一些“名-值”對，中間使用&符號連線。
post方式是把form表單的資料給請求出來以xml形式傳遞給伺服器

（五）AJAX的缺點：
a)瀏覽器支援不統一
b)無頁面刷時，所以瀏覽器的”前進”和”後退”按鈕失效
c)一些瀏媒體支援不完善

（由上面兩個例子看出，如果是xml返回格式的話，不僅僅說在response中寫xml麻煩，而且還有在接受資料解析xml也麻煩。後面介紹用json格式返回資料）。下一篇介紹經典的多級選單聯動的原始碼

Ajax基礎（詳講+案例）

Ajax基礎（詳講+案例）

linux 程序重要知識（詳講）

完整學習筆記之Android基礎（詳版）

java基礎（十一章）

java基礎（十五章）

java基礎（十二章）

Java語言基礎（回頭復習）

PHP高效率寫法（詳解原因）

前端基礎（HTML+CSS+JS）-day12

CSS3——animation的基礎（輪播圖）

linux基礎（電腦基本原理）

邏輯基礎（解釋和評論）

js/jq基礎（日常整理記錄）-1-純js格式化時間

表單提交（同步提交）和AJAX提交（異步提交）

js基礎（dom增刪改）

python基礎（自主學習筆記）

機器學習的數學基礎（線性代數篇）

linux基礎（用戶管理）

python基礎（list基本用法）

MySQL數據庫基礎（筆記整理一）

Ajax基礎（詳講+案例）

相關推薦