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之前不兼容 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM