異步編程｜五分鐘讓你學會局部刷新Ajax技術

作者：淺羽Eric 2020-11-09 09:59:50

Ajax是Asynchronous JavaScript and XML的縮寫，是JavaScript、XML、CSS、DOM等多個技術的組合。Ajax的工作原理是一個頁面的指定位置可以加載另一個頁面所有的輸出內容，這樣就實現了一個靜態頁面也能獲取到數據庫中的返回數據信息了。所以Ajax技術實現了一個靜態網頁在不刷新整個頁面的情況下與服務器通信，減少了用戶等待時間，同時也降低了網絡流量，增強了客戶體驗的友好程度。本文將為大家詳細介紹關于Ajax的工作原理以及實現步驟。

[[351069]]

前言

1. Ajax的概念?

「以前瀏覽器如何實現通信呢：」

Jsp頁面發送請求--->servlet進行接收--->數據放到域對象--->轉發給jsp頁面

同步的發送請求：這個請求的特點，我們每一次的轉發，瀏覽器都要重新渲染整個頁面、假設我的頁面有100k的數據，只有1k的數據需要刷新，如果使用轉發的方式的話那么每一次渲染的數據都是100k，這樣瀏覽器的渲染壓力就變大了

「Ajax技術實現通信：」

引入Ajax：假設我們使用了Ajax的技術的話，那么我們這100k的數據我們有99k的數據都不需要刷新，只是需要刷新這1k的數據，這就是Ajax

在一開始的時候，所有的瀏覽器并不支持所謂的局部刷新技術，而且一開始大多數的瀏覽器并不看好這門技術，這個時候微軟首先就在IE瀏覽器中引入了異步請求的這個概念，到后來看到了Ajax在瀏覽器上的優秀表現，于是其他的瀏覽器廠商也就引入了Ajax這個技術

含義：Ajax是用于網頁上面進行局部刷新的一門技術

2、Ajax技術的優缺點

「Ajax技術優點：」

核心技術：Ajax的核心技術是XMLHttpRequest，它是JavaScript中的一個對象
減輕了服務器端負擔，將一部分以前由服務器負擔的工作轉移到客戶端執行，利用客戶端閑置的資源進行處理
在只局部刷新的情況下更新頁面，增加了頁面反應速度，使用戶體驗更友好

「Ajax技術缺點：」

Ajax的缺點是不利于SEO推廣優化，因為搜索引擎無法直接訪問到Ajax請求的內容

3、Ajax技術能干嘛?

「主要作用：」

發送同步或者異步請求
進行網頁的局部刷新
下拉列表的數據來源于服務器的這種
做前后分離的開發
表單元素的動態認證

4、Ajax技術的具體使用

「使用步驟：」

創建獲取Ajax對象的方法

function getAjax () { 
    var ajax; 
    try{ 
     ajax=new ActiveXObject("microsoft.xmlhttp"); 
    }catch(e){ 
     try{ 
      ajax=new XMLHttpRequest(); 
     }catch(e){ 
      alert('異步都沒有 換瀏覽器吧....'); 
     } 
    } 
    return ajax; 
  }

獲取Ajax對象

var ajax=getAjax();

準備發送Ajax請求

ajax.open("GET","${pageContext.request.contextPath}/dates.action");

發送Ajax請求

ajax.send(null);

監聽Ajax中4種狀態

ajax.onreadystatechange=function(){ 
        if(ajax.readyState==4){ / 
    } 
}

判斷服務器是否成功響應

if(ajax.status==200){//說明服務器的響應是正確的 
        var time=ajax.responseText; 
        //要將這個數據直接賦值給一個一個標簽 
        document.getElementsByTagName('span')[0].innerText=time; 
      }

Get方法數據傳輸（放到url后面）

ajax.open("GET","${pageContext.request.contextPath}/dates.action?userName=qianyu&password=123");

Post方式發送請求和數據

//設置請求頭        
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
//發送數據 
ajax.send("userName=qianyu&password=123");

結語

本篇關于Ajax的介紹就先到這里結束了，后續會出更多關于Ajax系列更多文章，謝謝大家支持!

責任編輯：姜華來源：淺羽的IT小屋

Ajax技術