對比javascript與jquery對ajax的實現

來源:互聯網
上載者:User

jquery是對javascript很好的封裝,而且很輕量級,可以近似的將其稱其為架構,下面就來對比javascript與jquery對ajax的實現,以突出jquery對其封裝後,在實現方便的簡易性,而且不僅如此,用jquery代替javascript來實現一些功能對於瀏覽器的相容性也會帶來意想不到的好處;

首先也一個簡單的頁面端:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>    <title>使用者名稱校正的ajax執行個體</title><script type="text/javascript" src="jslib/verifyown.js"></script></head><body>      使用者名稱校正的ajax執行個體,請輸入使用者名稱:<br/>     <input type ="text" id="userName"/><span id="result"></span> <br/><div id="result"></div><input type="button"  value="檢驗" onclick="verify()"/></body></html>

頁面端定義了一個單擊事件onclick = "verify()";即點擊按鈕後呼叫事件方法verify();
這裡我們首先用javascript來實現整個ajax

//使用者校正的方法//這個方法將使用XMLHttpRequest對象進行AJAX的非同步互動var xmlhttp;//設定全域變數,使回呼函數也能使用它function verify(){      //1.dom的方法獲文字框中的值方法      // document.getElementById("username")是dom擷取元素節點的一種方法,一個元素節點對應HTML頁面中的一個標籤,如<input>    //value可以擷取一個元素節點的value屬性值    var userName=document.getElementById("userName").value    //2.建立XMLHTTPRequest對象    //這是XMLHTTPRequest對象使用中最複雜的一步    //需要針對IE和其他類型的瀏覽器建立這個對象的不同方式寫不同的代碼    if(window.XMLHttpRequest){        //針對firefox Mozillor Opera Safari,IE7,IE8        xmlhttp=new XMLHttpRequest();        //針對某些特定版本的 Mozillor 的瀏覽器的bug進行修正            if(xmlhttp.overrideMimeType){                   xmlhttp.overrideMimeType("text/xml");            }    }else if(window.ActiveXObject){       //針對IE6 IE5.5 IE5        //兩個可以用於建立XMLHttpRequest對象的控制項名稱,儲存在一個js的數組中        //排在前面的版本較新        var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];        for( var i = 0;i < activexName.length;i++){        try{            //取出一個建立名進行建立,如果建立成功就終止迴圈            //如果建立失敗,會拋出異常,然後可以繼續迴圈,繼續嘗試串連            xmlhttp=new ActiveXObject(activexName[i]);            break;        }catch(e){                    }    }    }   //確認XMLHttpRequest建立成功    if(!xmlhttp){        alert("XMLHttpRequest建立失敗!");        return;    }else{        alert(xmlhttp.readyState);    }  //2.註冊回呼函數    //該處註冊函數時,只需函數名,不需加括弧    //我們需要將函數名註冊,如果加上括弧,就會把函數傳回值註冊上,這是錯誤的  xmlhttp.onreadystatechange=callback;      //3.設定串連資訊    //第一個參數表示Http的請求方式,支援所有的Http請求方式,主要使用get和post。    //第二個參數表示請求的URL地址,get方式請求的參數也在URL中,    //第三個參數表示採用同步還是非同步,true表示採用非同步    xmlhttp.open("GET","AjaxServer?name="+userName,true);        /*post方式的請求        xmlhttp.open("POST","AJAXServer",true);       post方式需要自己設定http的要求標頭    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")       xmlhttp.send("name"+username);                           */       //4.發送資訊,和伺服器端互動    //同步方式下,send這句話會在伺服器端的資料回來後才執行完    //非同步方式下,send這句話會立即執行完    xmlhttp.send(null);}function callback(){     alert(xmlhttp.readyState); //測試  readyState 的不同時間的狀態 ,    //判斷對象的狀態是互動完成    if(xmlhttp.readyState==4){        //判斷http的互動是否成功        if(xmlhttp.status==200){ //最好不要將兩個if條件寫一起,因為開始readyState會有0,1,2,3的過程,此時都會調用回呼函數,此是就不滿足判斷的條件了           // 擷取伺服器端返回的資料            //擷取伺服器端輸出的純文字資料           var responseText=xmlhttp.responseText;            //將資料顯示在頁面上           // 通過dom方式找到div標籤所對應的元素的節點           var divNode=document.getElementById("result");            //設定元素節點中html的內容            divNode.innerHTML = responseText;        }    }}

代碼中已經包含了詳細的注釋了,我這裡就不進行解釋了;
下面採用jquery來實現上面的代碼:

//定義使用者名稱校正的方法function verify(){    //首先測試下頁面的按鈕按下,可以調用這個方法    //使用javascript裡的alert方法,顯示個彈出提示框   // alert("按鈕被按下"); 測試是否已進到了js內    //1擷取到文字框中的內容   // document.getElementById("username") dom的擷取方法    //jquery尋找節點的方式,參數中的#加id參數值可以找到一個節點    //jquery的方法返回的都是jquery的對象,可以在上面繼續執行其他的jquery方法       var jqueryObj= $("#userName")    //擷取節點的值   var userName=jqueryObj.val();   // alert(userName);測試是否得到username    //2.將文字框的資料發送給伺服器端的servlet    //使用jquery的XMLHttprequest對象get請求的封裝 $.get("AjaxServer?name="+userName,null,callback);}//回呼函數,data為伺服器端返回的資料function callback(data){   //alert("伺服器端的資料回來了");測試與伺服器端的互動     //3.接受伺服器端返回的資料  // alert(data); 測試data    //4.將伺服器端返回的資料動態顯示在頁面上  // 找到儲存資料的節點    var resultObj=$("#result");    //動態改變頁面中div的內容    resultObj.html(data);   }

大家發現了吧,用jquery來實現,出去注釋以後代碼不足10行,可見jquey已經幫我們做了大量的基礎工作了

 

為了將整個過程展示下,我現在將背景操作類AjaxServer.java也進行實現,我這裡為了簡單起見就不使用架構了,直接用servlet進行實現:

 

package com.xidian.ajax;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.ServletException;import java.io.IOException;import java.io.PrintWriter;import java.net.URLDecoder;public class AjaxServer extends HttpServlet {        protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)                throws ServletException, IOException {            try{              httpServletResponse.setContentType("text/html;charset=utf-8");               PrintWriter out= httpServletResponse.getWriter();                               Integer inte = (Integer)httpServletRequest.getSession().getAttribute("total"); //用來測試緩衝的;在IE下如果多次請求的地址相同,則他不會再去伺服器端互動讀資料,而是直接讀取緩衝                  int temp=0;                if(inte==null){                    temp=1;                }else{                    temp=inte.intValue()+1;                }                   httpServletRequest.getSession().setAttribute("total",temp);               //1.取參數           String old =httpServletRequest.getParameter("name");               // String name=new String(old.getBytes("iso8859-1"),"utf-8"); //處理中文亂碼1,需和前台js檔案中的encodeURI配合               String name= URLDecoder.decode(old,"utf-8"); //處理中文亂碼2              //2.檢查參數是否有問題          if(old==null||old.length()==0){              out.println("使用者名稱不可為空!");          } else{              //String name=old;              //3.校正操作              if(name.equals("123")){                    //4.與傳統應用不同的是,這一步將使用者感興趣的資料返回給頁面端。而不是將一個新的頁面返回給頁面端                  //寫法沒有改變,本質變化了                  out.println("使用者名稱【"+name+"】已經存在,請使用其他的使用者名稱!,"+temp);              } else{                  out.println("使用者名稱【"+name+"】未存在,您可以使用該使用者名稱!,"+temp);              }          }        }catch(Exception e){               e.printStackTrace();            }        }        protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)            throws ServletException, IOException {           doGet(httpServletRequest,httpServletResponse);        }    }

大家在上面的代碼時可以看到這裡對緩衝的處理,其實我們在時間應用中很少會這樣處理,這裡我只是為了就這個問題而寫了上面的代碼,我們一般情況下是不希望瀏覽器
去讀取緩衝的,所有我們為了騙過瀏覽器,就會在Ajax請求的地址中加上一個參數時間戳記,這樣就能保證每次請求的地址都不一樣的了;

具體的使用大家可以去看:http://www.cnblogs.com/shenliang123/archive/2012/04/19/2456758.html

還有就是基於Ajax的兩種互動方式:http://www.cnblogs.com/shenliang123/archive/2012/04/19/2456800.html

我們這邊實現的是基於HTML互動的;

 

 

 

 

 

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.