標籤：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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
