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