Ajax核心對象——快速上手XmlHttpRequest

來源:互聯網
上載者:User

標籤:bs   ajax   

引言:

   非TGB的,直接跳過吧……

   從開學結束JQuery之後,電腦的進度停了一段時間。某天無聊的時候,又重新把BS的東西拿過來看了看。發現裡面有很多既熟悉又陌生的東西。

   在學習王興魁老師的Ajax的時候,裡面的東西,大多都是之前學過的。在學習JS的時候,有很多js資料。很多人看的都是牛腩js和薑浩的js。但是我師父讓我看李炎恢的js。剛開始的時候感覺挺怪的。牛腩的js一周,薑浩的js一周。李炎恢的js 150集據說至少看三個星期。

   雖然感覺壓力大了點。但是等真正看的時候,才發現這150集的內容挺有用的。前面講解的非常基礎。後面通過一個項目,講解了JQuery是如何從js封裝過來的。以及Ajax的入門技術。

   在看Ajax的時候,發現基本裡面全是學過的東西。現在來學習一下Ajax的基礎。並看一個執行個體。

 

Ajax基礎:

 

上面囉嗦了半天,現在進入正題。

 

什麼是Ajax?

     Ajax縮寫:AsynchronousJavaScript and XML 也就是 非同步 js和xml。

   利用Ajax可以在向伺服器請求資料的時候,用戶端不進行重新整理。

 

   就是用戶端與伺服器的互動,可以不間斷的進行。

   即:用戶端發送的請求,不影響用戶端的使用。

 

同步與非同步區別?

同步:

   用戶端向伺服器請求一個資料,頁面重新載入(重新整理)。

非同步:

   用戶端請求資料。頁面上直接得到而不需要重新整理。

 

   Ajax技術,可以使得web頁面更加友好。不會因為操作一小塊的內容,使得整個頁面進行重新整理。

   Ajax的核心技術,就是XmlHttpRequest對象(簡稱XHR)。這個對象的作用,就相當於,用戶端的秘書。

 

傳統的頁面設計:

   

   當請求資料的時候,需要等待伺服器傳回資料之後才能進行下一步操作。(可能造成無響應的狀態)

 

Ajax方式的頁面:

   

   用戶端發送請求資料的操作之後,仍然可以繼續使用。(不會重新整理頁面)比如,百度的搜尋方塊。不會因為你填寫了內容而停止回應。

 

XmlHttpRequest對象,作為用戶端的“秘書”與伺服器進行互動。

 

傳統Web頁面與Ajax方式Web頁面的對比

   

 

Ajax入門:五步學會XmlHttpRequest

    html頁面:

 

<!DOCTYPE html><!--To change this license header, choose License Headers in Project Properties.To change this template file, choose Tools | Templatesand open the template in the editor.--><html>    <head>        <title>TODO supply a title</title>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">            <script type="text/javascript">                ?                var xmlhttp;                function submit() {                    //此處省略1-4步驟                }                function callback() {                    //此處省略5步驟                  }            </script>    </head>    <body>               <div>使用者名稱:</div>        <input type="text" id="userName"/>        <input type="button" onclick="submit()" value="校正" />        <br />        <div id="message"></div>    </body></html>


下面是五步流程:

1、建立XmlHttpRequest對象

 //1.建立xmlHttpRequest對象                    if (window.XMLHttpRequest) {                        //IE7,IE8,FireFox,Mozillar,Safari,Opera                        //alert("IE7,IE8,FireFox,Mozillar,Safari,Opera");                        xmlhttp = new XMLHttpRequest();                        if (xmlhttp.overrideMimeType) {                            xmlhttp.overrideMimeType("text/xml");                        }                    } else if (window.ActiveXObject) {                        //IE6,IE5.5,IE5                        var activeName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Miscrosoft.XMLHTTP"];                        for (var i = 0; i < activeName.length; i++) {                            try {                                xmlhttp = new ActiveXObject(activeName[i]);                                break;                            } catch (e) {                            }                        }                    }                    if (xmlhttp === undefined || xmlhttp === null) {                        alert("當前瀏覽器不支援建立xmlhttprequest對象,請更換瀏覽器");                        return;                    }

2、註冊回呼函數

                    //2.註冊回調方法                    xmlhttp.onreadystatechange = callback;

    註:在註冊回呼函數的時候,只需要把函數名賦值即可。如果 賦值callback().則賦值為 函數執行的結果值。

3、設定與伺服器互動的參數

                    //3.設定和伺服器互動的相應參數(Get)                    var userName=document.getElementById("userName").value;                        xmlhttp.open("GET", "Ajax?name=" + userName, true); //true 表示非同步方式                    //3.設定和伺服器互動的相應參數(Post)                    //xmlhttp.open("POST","AJAX",true);                     //xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");                                         

4、向伺服器發送資料

                    //4.設定向伺服器發送的資料,啟動和伺服器端的互動                        xmlhttp.send(null);

 

5、判斷與伺服器互動是否完成,並判斷是否有返回資料

                        //5.判斷伺服器端的互動是否完成,還要判斷伺服器端是否返回了資料                        if (xmlhttp.readyState === 4) {                            //表示和伺服器端的互動已經完成                                        if (xmlhttp.status === 200) {                                //表示伺服器的響應代碼是200,正確的返回了資料                                //純文字接受資料方式                                var message = xmlhttp.responseText;                                //xml資料對應的dom對象的接受方法                                //使用的前提是,伺服器端需要設定content-type為text/xml                                //var domXml=xmlhttp.responseXML                                var messageNode = document.getElementById("message");                                messageNode.innerHTML = message;                            }                        }

註:理解困難的,可以去研究一下xmlhttprequest對象的屬性及事件。


僅僅有以上的html,運行結果肯定有問題…… 運行都沒有Web伺服器。單純html客戶跟誰互動?

 

此時,應該建立Web伺服器。使用tomcat伺服器建立servlet

/* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * * @author 趙崇 */public class Ajax extends HttpServlet {    /**     * Processes requests for both HTTP <code>GET</code> and <code>POST</code>     * methods.     *     * @param request servlet request     * @param response servlet response     * @throws ServletException if a servlet-specific error occurs     * @throws IOException if an I/O error occurs     */    protected void processRequest(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        response.setContentType("text/html;charset=UTF-8");        try (PrintWriter out = response.getWriter()) {            /* TODO output your page here. You may use following sample code. */            String old=request.getParameter("name");            if(old==null){                    out.println("使用者名稱不可為空");            }else{                String name=new String(old.getBytes("ISO8859-1"),"gb2312");                System.out.println(name);                if(name.equals("zhaochong")){                        out.println("使用者名稱["+ name+"]已經存在,請使用其他使用者名稱");                }else{                        out.println("使用者名稱["+ name+"]尚未存在,請使用其他使用者名稱");                }            }        }    }


在建立servlet的時候,只需要修改processRequest函數中的內容。建立servlet的時候,請自動產生xml

   

 

   以上Demo是在NetBean IDE上進行的。雖然這麼一個小例子,發現裡面有好多都不懂……比如tomcat與glashfish的區別 以及xml檔案中內容的含義等等。看視頻的時候,眼看偏了,忽略了 開發環境的配置。

 

總結

   通過以上一個小例子,可以初步瞭解一下Ajax與傳統頁面的區別。更加深入的理解,需要在多次重複,在項目中應用,才能熟練掌握。


 

 

 

Ajax核心對象——快速上手XmlHttpRequest

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.