Ajax如何實(shí)現(xiàn)異步加載

小編給大家分享一下Ajax如何實(shí)現(xiàn)異步加載，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

臺(tái)山網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)從2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

AJAX （Asynchronous JavaScript and XML，異步的 JavaScript 和 XML）。它不是新的編程語(yǔ)言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法，是在不重新加載整個(gè)頁(yè)面的情況下與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)的藝術(shù)。

基礎(chǔ)語(yǔ)法

學(xué)習(xí)Ajax之前，我們要明確自己的需求，那就是在不刷新頁(yè)面的前提下實(shí)現(xiàn)異步的與服務(wù)器進(jìn)行交互，更新頁(yè)面信息。使用Ajax其實(shí)也是很簡(jiǎn)單的，我們只需要遵循一定的步驟即可。
 ?創(chuàng)建Ajax對(duì)象（原生的需要判斷當(dāng)前瀏覽器的類型）
 ?設(shè)置回調(diào)函數(shù) （完成與服務(wù)器的交互之后所觸發(fā)的函數(shù)）
 ?打開(kāi)請(qǐng)求，并發(fā)送。（根據(jù)請(qǐng)求方式的不同，代碼書(shū)寫稍有不同）
 ?客戶端獲得反饋數(shù)據(jù)，更新頁(yè)面 

獲取Ajax對(duì)象

不同的瀏覽器對(duì)Ajax的支持是不一致的，所以我們要區(qū)別的對(duì)待。

設(shè)置回調(diào)函數(shù)

設(shè)置回調(diào)函數(shù)的目的就是在Ajax完成與服務(wù)器的交互之后，將獲取到的數(shù)據(jù)信息，添加到頁(yè)面上。

通常我們會(huì)指定onreadystatechange函數(shù)作為我們的回調(diào)處理函數(shù)。

相關(guān)于Ajax與服務(wù)器交互有如下?tīng)顟B(tài)信息供我們?cè)诰幋a的過(guò)程找中參考。

.readystate

關(guān)于加載狀態(tài)有如下幾個(gè)常用的數(shù)值：
 ?0: 請(qǐng)求未初始化
 ?1: 服務(wù)器連接已建立
 ?2: 請(qǐng)求已接收
 ?3: 請(qǐng)求處理中
 ?4: 請(qǐng)求已完成，且響應(yīng)已就緒 

.status

加載結(jié)果的狀態(tài)信息有：
 ?200： “OK”

 ?404： “未找到此頁(yè)面”

 開(kāi)啟交互

一談起交互，映入腦海的就是雙方。也就是我們的ajax客戶端和服務(wù)器之間的交互。所以我們需要明確請(qǐng)求數(shù)據(jù)在服務(wù)器上的位置

open(method,url,async) 

url的使用會(huì)根據(jù)method的不同而不同，這一點(diǎn)我們務(wù)必要清楚。至于asynchronous這個(gè)參數(shù)，一般來(lái)說(shuō)對(duì)于數(shù)據(jù)量很小的請(qǐng)求可以采用false，但是建議使用true來(lái)進(jìn)行異步的加載，來(lái)避免服務(wù)器壓力過(guò)大。

 ?GET方式 

只是用這種方式很簡(jiǎn)單，指定url在服務(wù)器上的位置即可。這里紅色部分的理解相當(dāng)?shù)闹匾?。我們?wù)必指定url為請(qǐng)求在服務(wù)器上的位置，一般采用絕對(duì)路徑的方式。

// 對(duì)Servlet來(lái)說(shuō)指定其注解上的位置即可
xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true);
  xmlhttp.send();

 ?POST方式 

使用POST方式的時(shí)候，我們需要額外的多一項(xiàng)處理。如下例：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 在send方法中指定要傳輸?shù)膮?shù)信息即可
xmlhttp.send("fname=Bill&lname=Gates");

客戶端更新頁(yè)面

對(duì)于Ajax來(lái)說(shuō)，顧名思義。是采用xml形式來(lái)傳輸數(shù)據(jù)的。但是目前而言，這不再是唯一的一種形式了。那么我們?cè)趺磳@取到的數(shù)據(jù)更新到網(wǎng)頁(yè)上呢？有如下兩種方式。
 ?如果來(lái)自服務(wù)器的響應(yīng)并非 XML，請(qǐng)使用 responseText 屬性。
 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 ?如果來(lái)自服務(wù)器的響應(yīng)是 XML，而且需要作為 XML 對(duì)象進(jìn)行解析，請(qǐng)使用 responseXML 屬性： 

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i";
 }
document.getElementById("myDiv").innerHTML=txt;

實(shí)例體驗(yàn)

了解了這些基礎(chǔ)語(yǔ)法之后，我們就可以在實(shí)際的開(kāi)發(fā)中簡(jiǎn)單的應(yīng)用了。為了更好的完成此次實(shí)驗(yàn)，我先做了一個(gè)簡(jiǎn)單的JavaWeb，來(lái)處理我們的Ajax請(qǐng)求。

使用Servlet方式

AjaxServlet.java

package one;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class AjaxServlet
 */
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;

 /**
  * @see HttpServlet#HttpServlet()
  */
 public AjaxServlet() {
  super();
  // TODO Auto-generated constructor stub
 }

 /**
  * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
  *  response)
  */
 protected void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  // TODO Auto-generated method stub
  //response.getWriter().append("Served at: ").append(request.getContextPath());
  String userinput = request.getParameter("userinput");
  System.out.println("客戶端連接！");
  System.out.println("請(qǐng)求信息為：" + userinput);
  PrintWriter out = response.getWriter();
  if(userinput.equals("") || userinput.length()<6) {
   response.setContentType("text/html;charset=UTF-8");
   response.setCharacterEncoding("UTF-8");
   response.setHeader("Content-Type", "text/html;charset=utf-8");
   out.write("
the length of input string must be more than 6!
");
  }else{
   response.setContentType("text/html;charset=UTF-8");
   response.setCharacterEncoding("UTF-8");
   response.setHeader("Content-Type", "text/html;charset=utf-8");
   out.println("
Correct!
");
  }
  out.close();
 }

 /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
  *  response)
  */
 protected void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  // TODO Auto-generated method stub
  doGet(request, response);
 }

}

 web.xml

 Test
 
 index.html
 index.htm
 index.jsp
 default.html
 default.htm
 default.jsp
 

 
 AjaxServlet
 one.AjaxServlet
 
 
 AjaxServlet
 /servlet/AjaxServlet
 

ajax.html

 
AJAX Test
 
 

 
 

實(shí)驗(yàn)結(jié)果
 ?長(zhǎng)度小于6時(shí)：

 ?長(zhǎng)度大于等于6：

使用JSP方式

receiveParams.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<% 
  //接收參數(shù) 
  String userinput = request.getParameter("userinput"); 
  //控制臺(tái)輸出表單數(shù)據(jù)看看 
  System.out.println("userinput =" + userinput); 
  //檢查code的合法性 
  if (userinput == null || userinput.trim().length() == 0) { 
    out.println("code can't be null or empty"); 
  } else if (userinput != null && userinput.equals("admin")) { 
    out.println("code can't be admin"); 
  } else { 
    out.println("OK");
  } 
%>

ajax.html

 
AJAX Test
 
 

 
 

效果一致。

JQuery 中的Ajax

前面介紹的是原生的Ajax實(shí)現(xiàn)方式，我們需要做的工作還是很多的，而JQuery幫助我們完成了平臺(tái)無(wú)關(guān)性的工作，我們只需要專注于業(yè)務(wù)邏輯的開(kāi)發(fā)即可。直接用jquery的.post或者.get或者.ajax方法，更方便更簡(jiǎn)單，js代碼如下：
 ?.POST方式

 $.post("./newProject",{newProjectName:project_name},
   function(data,status){
  //alert("data:" + data + "status:" + status);
  if(status == "success"){
   var nodes = data.getElementsByTagName("project");
   //alert(nodes[0].getAttribute("name"));
   for(var i = 0;i < nodes.length;i ++){
    $("#project_items").append("" + nodes[i].getAttribute("name") + ""); 
   }
  }

 })

 ?.ajax方式

 $(function(){
  //按鈕單擊時(shí)執(zhí)行
  $("#testAjax").click(function(){

    //Ajax調(diào)用處理
   $.ajax({
    type: "POST",
    url: "test.php",
    data: "name=garfield&age=18",
    success: function(data){
      $("#myDiv").html('
'+data+'
');
     }
   });

   });
 });

 ?.get方式

 $(document).ready(function(){
 $("#bt").click(function(){
 $.get("mytest/demo/antzone.txt",function(data,status){
  alert("Data:"+data+"\nStatus:"+status);
 })
 })
})

以上是“Ajax如何實(shí)現(xiàn)異步加載”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：Ajax如何實(shí)現(xiàn)異步加載
URL網(wǎng)址：http://m.jiaotiyi.com/article/ighoeh.html