1. 程式人生 > >js-資料互動--AJAX

js-資料互動--AJAX

一:介紹

  今天跟下大家簡單的介紹一下,在前端開發中,前後端資料互動的一種手段,我們都知道,在前端往後端傳送資料的話,利用get,post方法即可向後端傳送資料,後端將資料接受,連結到資料庫,進行資料庫操作,再將資料庫的資料返回到前端,那麼這時候前端如何去接受後端傳過來的資料呢?這個就是今天跟大家分享的重點,前端接受資料的方式-ajax.

  那麼ajax到底是什麼呢?是一門程式語言嗎?不,其實ajax它是一種技術的集合,通過多方面的技術總結出來的一種手段,作為前後端資料互動的重要手段。

  ajax 全稱為:“Asynchronous JavaScript and XML”(非同步 JavaScript 和 XML),它並不是 JavaScript 的一種單一技術,而是利用了一系列互動式網頁應用相關的技術所形成的結合體。使用Ajax,我們可以無重新整理狀態更新頁面,並且實現非同步提交,提升了使用者體驗。

二:技術結合  

  ajax 這個概念是由 JesseJamesGarrett 在 2005 年發明的。它本身不是單一技術,是一串技術的集合,主要有:

  1.JavaScript,通過使用者或其他與瀏覽器相關事件捕獲互動行為

  2.XMLHttpRequest 物件,通過這個物件可以在不中斷其它瀏覽器任務的情況下向伺服器傳送請求;

  3.伺服器上的檔案,以 XML、HTML 或 JSON 格式儲存文字資料;

  4.其它 JavaScript,解釋來自伺服器的資料(比如 PHP 從 MySQL 獲取的資料)並將其呈現到頁面上.

三:工作流程  

  上面已經提到了ajax所用的一連串的技術,那麼下面一步步說一下,這些技術的意義以及用法(ajax的工作流程)

  1:創造介質(物件)

var x = new XMLHttpRequest();

  2:傳送的方法

x.open("get","url",true);
三個引數:傳送方法,地址,布林值(預設為true,非同步)
   第一個引數:POST||GET
    POST和GET的區別:
    1.POST主要用來發送資料,GET主要用來接受資料;
    2.PSOT傳送資料的安全性較好,而GET較差;
    3.POST傳送資料不限制大小,而GET大小受限2~100k。
    什麼時候用GET和POST:在資料獲取時用GET方式,在操作資料時應使用POST方式。

    第二個引數:要請求的url

    第三個引數:接受一個布林值,決定請求的方式
    為true時,伺服器請求是非同步進行的,也就是指令碼執行send() 方法後不等待伺服器的執行結果,而是繼續執行指令碼程式碼;
    為false時,伺服器請求是同步進行的,也就是指令碼執行send() 方法後等待伺服器的執行結果的返回,若在等待過程中超時,則不再等待,繼續執行後面的指令碼程式碼!

  3:監聽ajax和http的狀態

x.onreadystatechange = function(){
    if(x.readyState == 4 && x.status == 200){
    //ajax的狀態為4並且http的狀態為200即表示資料正常
  } }

  4:傳送資訊

x.send();

四:ajax的狀態碼和http的狀態碼錶

   1:ajax.readyState:
    0 -(未初始化)還沒有呼叫send()方法
    1 -(載入)已呼叫send()方法,正在傳送請求
    2 -(載入完成)send()方法執行完成,已經接收到全部響應內容
    3 -(互動)正在解析響應內容
    4 -(完成)響應內容解析完成,可以在客戶端呼叫了
  2:HTTP狀態碼ajax.status:監聽伺服器的狀態
1**:請求收到,繼續處理
    2**:操作成功收到,分析、接受
    3**:完成此請求必須進一步處理
    4**:請求包含一個錯誤語法或不能完成
    5**:伺服器執行一個完全有效請求失敗
    
    100——客戶必須繼續發出請求
    101——客戶要求伺服器根據請求轉換HTTP協議版本

    200——交易成功
    201——提示知道新檔案的URL     
    202——接受和處理、但處理未完成
    203——返回資訊不確定或不完整
    204——請求收到,但返回資訊為空
    205——伺服器完成了請求,使用者代理必須復位當前已經瀏覽過的檔案
    206——伺服器已經完成了部分使用者的GET請求

    300——請求的資源可在多處得到
    301——刪除請求資料
    302——在其他地址發現了請求資料
    303——建議客戶訪問其他URL或訪問方式
    304——客戶端已經執行了GET,但檔案未變化
    305——請求的資源必須從伺服器指定的地址得到
    306——前一版本HTTP中使用的程式碼,現行版本中不再使用
    307——申明請求的資源臨時性刪除

    400——錯誤請求,如語法錯誤
    401——請求授權失敗
    402——保留有效ChargeTo頭響應
    403——請求不允許
    404——沒有發現檔案、查詢或URl
    405——使用者在Request-Line欄位定義的方法不允許
    406——根據使用者傳送的Accept拖,請求資源不可訪問
    407——類似401,使用者必須首先在代理伺服器上得到授權
    408——客戶端沒有在使用者指定的餓時間內完成請求
    409——對當前資源狀態,請求不能完成
    410——伺服器上不再有此資源且無進一步的參考地址
    411——伺服器拒絕使用者定義的Content-Length屬性請求
    412——一個或多個請求頭欄位在當前請求中錯誤
    413——請求的資源大於伺服器允許的大小
    414——請求的資源URL長於伺服器允許的長度
    415——請求資源不支援請求專案格式
    416——請求中包含Range請求頭欄位,在當前請求資源範圍內沒有range指示值,請求也不包含If-Range請求頭欄位
    417——伺服器不滿足請求Expect頭欄位指定的期望值,如果是代理伺服器,可能是下一級伺服器不能滿足請求

    500——伺服器產生內部錯誤
    501——伺服器不支援請求的函式
    502——伺服器暫時不可用,有時是為了防止發生系統過載
    503——伺服器過載或暫停維修
    504——關口過載,伺服器使用另一個關口或服務來響應使用者,等待時間設定值較長
    505——伺服器不支援或拒絕支請求頭中指定的HTTP版本

五:解決get方法一個bug

  我們都知道,每次瀏覽器請求相同地址,會優先查詢快取,通過快取開啟的頁面速度也快,但是如果當伺服器種的資料進行更新了,頁面請求任然走的是快取的話,就會導致頁面獲取不到最新的資料,這個是很嚴重的問題,那麼如何解決這個bug呢?如果說每次訪問的都是都不一樣,但是拿到的資料都是一樣的,那麼這個問題也就迎刃而解了,一個隨時都在變化的且不需要去操控的東西,相信大家都能想到一個東西叫做時間戳,沒錯,我們可以將時間戳拼接在url的後面,這樣就能保證我們每次拿到的都是不同的地址,以此來欺騙瀏覽器。

六:ajax的優缺點:

1:優點

  無重新整理載入技術,不需要重新整理頁面就能拿到最新的資料

  初始載入頁面,提升速度
  節省效能,提高使用者體驗

2:缺點:

  ajax破壞了瀏覽器的前進後退功能
  破壞了SEO
  ajax的相容:IE5之前不相容&n