前端與后端數據交互的方式之ajax

前端與后端數據交互的方式之Ajax

　對於前端學習而言，CSS+HTML+JavaScript的學習在自我學習的情況下掌握也不是很難，但是想要實現前后端的數據交互在沒有指導的情況下學習會是一頭霧水。接下來就讓我來淺談一下前后端數據交互的方式。

web前端與后端是怎么連接的

網站數據處理主要分為三層。
第一層，表示層，這部分可以用HTML代碼，CSS/Javascript代碼來實現等。通過前端代碼可以實現網頁的布局和設計。這層又可以稱為顯示層。也就是你用瀏覽器打開能看到的網頁。
第二層，是業務層，這層是負責處理數據的。常用的代碼語言有PHP,JSP，Java等。通過這些后台處理語言的算法來處理前台傳回的數據。必要的時候進行操作數據庫，然后把結果返回給前端網頁。
第三層，是數據層，這個就是數據庫，用來存儲數據的。通過業務層的操作可以實現增刪改數據庫的操作。
①你接觸到的是這個網頁是屬於表示層，這個網頁一般由HTML標簽結合CSS/JAVASCRIPT來實現的。 這時候你要先填入數據。
②然后你按提交觸發后台處理機制，這時候數據會傳到后台的代碼進行處理。這部分代碼根據不同網站可以使PHP,JSP，JAVA等。 代碼根據程序員預設的算法將收到的數據進行處理之后會相應的對數據庫進行操作，存儲數據等。
③成功操作完數據庫之后，業務層的代碼會再向表示層也就是顯示器端傳回一個指令通知你表格填寫成功

一.從前端向后端傳遞參數方法

1.前端通過form表單，當你點擊submit按鈕發送數據給后台

2.后端會前端請求的反應，接收數據，處理數據再返回給前端。

二.通過ajax傳遞參數，ajax主要有兩種方式get和post（這里我們主要講解ajax）

什么是Ajax

1、Ajax的全稱是Asynchronous JavaScript and XML，即異步JavaScript+XML。
2、它是一種技術方案，但並不是一種新技術。
3、它依賴的是現有的CSS/HTML/Javascript，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對象。這個對象為向服務器發送請求和解析服務器響應提供了流暢的接口，使得瀏覽器可以發出HTTP請求與接收HTTP響應，實現在頁面不刷新的情況下和服務端進行數據交互
Ajax和XMLHttpRequest 兩者的關系：我們使用XMLHttpRequest對象來發送一個Ajax請求。

關於ajax的優缺點：

優點：

    1.不需要插件支持（一般瀏覽器且默認開啟 JavaScript 即可）；

    2.用戶體驗極佳（不刷新頁面即可獲取可更新的數據）；

    3.提升 Web 程序的性能（在傳遞數據方面做到按需發送，不必整體提交）；

    4.減輕服務器和帶寬的負擔（將服務器的一些操作轉移到客戶端）；

 

缺點：

    1.不同版本的瀏覽器對 XMLHttpRequest 對象支持度不足(比如 IE5 之前)；

    2.前進、后退的功能被破壞（因為 Ajax 永遠在當前頁，不會記錄前后頁面）；

    3.搜索引擎的支持度不夠（因為搜索引擎爬蟲還不能理解 JS 引起變化數據的內容）；

get和post兩種方法：

1.POST主要用來發送數據，GET主要用來接受數據；
2.PSOT發送數據的安全性較好，而GET較差；
3.POST發送數據不限制大小，而GET大小受限2~100k。
什么時候用GET和POST：在數據獲取時用GET方式，在操作數據時應使用POST方式。

Ajax的使用

1.var AJAX=new XMLHttpRequest( );

 2.AJAX.open('get','data/test.json',true);
 
    第一個參數：POST||GET
 
    第二個參數：要請求的url
 
    第三個參數：接受一個布爾值，決定請求的方式
    為true時，服務器請求是異步進行的，也就是腳本執行send() 方法后不等待服務器的執行結果，而是繼續執行腳本代碼；
    為false時，服務器請求是同步進行的，也就是腳本執行send() 方法后等待服務器的執行結果的返回，若在等待過程中超時，則不再等待，繼續執行后面的腳本代碼！
    
    3.ajax.onreadystatechange = function(){
        if (ajax.readyState == 4 && ajax.status == 200){
            func_succ(ajax.responseText);
        }else if(ajax.readyState == 4 && ajax.status != 200){
            //alert("ajax faild readyState:"+ajax.readyState+" status:"+ajax.status);
        }
    };
    
    4.ajax.send(null);

ajax.readystate

    0 －（未初始化）還沒有調用send()方法

    1 －（載入）已調用send()方法，正在發送請求

    2 －（載入完成）send()方法執行完成，已經接收到全部響應內容

    3 －（交互）正在解析響應內容

    4 －（完成）響應內容解析完成，可以在客戶端調用了

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版本

 

以上就是你本人在學習ajax過程中的一些總結，若是有理解不到位的地方歡迎大家指出。