Ajax基礎

時間 2019-12-08
標籤 ajax 基礎欄目 Ajax 简体版
原文原文鏈接
Ajax（Asynchronous JavaScript and XML），異步的JavaScript與XML 。 
  異步是指在進行一個操做時能夠不受上一個操做的影響，上一個操做是否返回操做均可以執行這個操做，各個操做能夠同時進行，對用戶來講，不用等待上一個操做結束就能夠執行新的操做了。 
 
   Ajax給咱們的網絡帶來了很大的好處，假如咱們只是簡單的提交一個表單，咱們就不必刷新整個頁面，只須要局部表單提交，刷新局部就能夠了，這大大減小了網絡流量。缺點就是使用了Ajax後咱們瀏覽器上的後退和前進按鈕就失效了。 
  
    Ajax的工做原理至關於在用戶和服務器之間加了—箇中間層,使用戶操做與服務器響應異步化。並非全部的用戶請求都提交給服務器,像—些數據驗證和數據處理等都交給Ajax引擎本身來作, 只有肯定須要從服務器讀取新數據時再由Ajax引擎代爲向服務器提交請求。 
   
Ajax中最重要的一個對象就是XMLHttpRequest，要完整實現一個AJAX異步調用,一般須要如下幾個步驟: 
       (1)建立XMLHttpRequest對象,也就是建立一個異步調用對象. 
     
       (2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息. 
     
       (3)設置響應HTTP請求狀態變化的函數. 
     
       (4)發送HTTP請求. 
     
       (5)獲取異步調用返回的數據. 
     
       (6)使用JavaScript和DOM實現局部刷新. 
     
      詳細步驟以下： 
     
（1）首先進行瀏覽器的判斷，經過 window.ActiveXObject 判斷是否爲IE瀏覽器（這個對象是IE所特有的，即active控件的對象），若是是，則使用IE特有的方法建立XMLHttpRequest對象 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP")，若是爲其餘瀏覽器則直接new XMLHttpRequest()建立。 
       （2）判斷完瀏覽器以後，準備向服務器發送請求，使用：xmlHttpRequest.open("POST", "IndexServlet", true);第一個參數是表示請求方式（如GET 或 POST），第二個參數是咱們請求的地址，這裏咱們的地址是一個servlet，若是請求方式是"GET",則在IndexServlet後直接傳參，第三個參數指明是否爲以異步的形式發送請求，通常咱們都會設置爲true。 
      
       （3）準備好發送之後，接收數據，ajax接收數據是以一個回調函數的形式接收數據的。也就是說咱們註冊好這個回調函數後，當達到某一要求時他會自動調用這個回調函數，而後去執行回調函數的內容，註冊回調函數：xmlHttpRequest.onreadystatechange = ajaxCallback;注意這個回調函數ajaxCallback不要帶括號。這個回調函數註冊點咱們從字面上也能夠看出,他是在準備狀態改變的時候調用這個函數。 
      
       （4）接下來發送請求，發送請求是調用的xmlHttpRequest對象的send方法，這個方法裏面當以post的形式發送請求，這裏的方法的參數，就是咱們請求的地址的參數，若是是以get的形式請求時，咱們能夠把send方法的參數設置爲null。假如咱們是以get的請求方式，發送代碼即爲了：xmlHttpRequest.send(null);，以post方式能夠傳參數（即send（「v1="+v1））；而且在發送以前（xmlHttpRequest.send(null)）以前必須設置xmlHttpRequest.setRequestHeader("content-type","application/x-www-form-urlencoded");（說明一下：setRequestHeader方法是XMLHTTP爲添加或修改HTTP頭提供的一個接口方法，CONTENT-TYPE:application/x-www-form-urlencoded含義是表示客戶端提交給服務器文本內容的編碼方式 是URL編碼，即除了標準字符外，每字節以雙字節16進制前加個「%」表示。）。 
      
        （5）請求發送出去後，怎麼來接收請求返回的數據。根據xmlHttpRequest對象的readstate屬性。readyState的五種狀態以下： 
       
0 － （未初始化）尚未調用send()方法 　　　 1 － （載入）已調用send()方法，正在發送請求 　　 2 － （載入完成）send()方法執行完成，已經接收到所有響應內容 　　 3 － （交互）正在解析響應內容 　 　4 － （完成）響應內容解析完成，能夠在客戶端調用了 
         從上邊能夠看出咱們上邊註冊的回調函數將會被執行四次，咱們只須要在請求完成時執行咱們回調函數的內容就能夠了，因此在回調函數裏面咱們能夠進行一下判斷 
          
         if (xmlHttpRequest.readyState == 4) { //請求完成}。 
        
         雖然咱們判斷了請求是否完成，但咱們不知道這個請求是否成功，在咱們http協議中，請求成功的狀態碼是200，因此咱們以下判斷一下狀態碼是否爲200就能夠了。 
        
         if (xmlHttpRequest.status == 200) {} 
        
         下面爲一個簡單的加法計算器的例子：
 
         html代碼： 
        
          <body>
　　　　　　<input type="text" name="num1" id="n1"/><br/>
　　　　　　<input type="text" name="num2" id="n2"/><br/>
　　　　　　<input type="button" value="add" onclick="ajaxSub()"/><br/>
　　　　　　<div id="div1"></div>
　　　　</body> 
         
　　　　JavaScript代碼：javascript
 
          <script type="text/javascript">
   　　　　 var xmlHttpRequest=null;
   　　　　 function ajaxSub(){
       　　　　 if(window.ActiveXObject){
            　　　　xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); 
       　　　　 }else if(window.XMLHttpRequest){
           　　　　 xmlHttpRequest=new XMLHttpRequest();
       　　　　 }
      　　　　  if(xmlHttpRequest!=null){
           　　　　 var v1=document.getElementById("n1").value;
           　　　　 var v2=document.getElementById("n2").value;
           　　　　 xmlHttpRequest.open("GET","AjaxServlet2?v1="+v1+"&v2="+v2+"",true);
           　　　　 xmlHttpRequest.onreadystatechange=ajaxCallback;
          　　　　 // xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");使用post方式提交須要設置，get方式不須要
           　　　　 xmlHttpRequest.send(null);
        　　　　}
       　　 function ajaxCallback(){
            　　if(xmlHttpRequest.readyState==4){
               　　 if(xmlHttpRequest.status==200){
                  　　  var text=xmlHttpRequest.responseText;
                  　　  document.getElementById("div1").innerHTML=text.fontcolor("red");
                　　}
          　　  }
      　　  }
   　　 }　　
　　　　</script> 
         
　　　　servlet代碼：html
 
          public class IndexServlet extends HttpServlet {
   　　　　 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

       　　 String v1=request.getParameter("v1");
       　　 String v2=request.getParameter("v2");
        　　System.out.println("v1="+v1+",,"+"v2="+v2);
        　　String v3=String.valueOf(Integer.valueOf(v1)+Integer.valueOf(v2));//將輸入的兩個數的總和轉爲字符串
       　　 PrintWriter out=response.getWriter();
       　　 response.setHeader("pragma", "no-cache");//設置響應頭，no-cache指示客戶端不能緩存響應消息
       　　 response.setHeader("cache-control", "no-cache");//設置響應頭，no-cache指示客戶端不能緩存響應消息，跟上一行代碼做用同樣，通常合用
       　　 out.println(v3);
       　　 out.flush();
  　　  }
   　　　　 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       　　　　 doGet(request, response);
   　　 }

　　} 
         
結果以下：java
 
         最後總結Ajax的優點： 
        
         一、減輕服務器的負擔。由於Ajax的根本理念是「按需取數據」，因此最大可能在減小了冗餘請求和響影對服務器形成的負擔； 
        
         二、無刷新更新頁面，減小用戶等待時間和流量使用； 
        
         三、Ajax使WEB中的界面與應用分離 
         。
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。