資訊專欄INFORMATION COLUMN
摘要：不過這種方式只能訪問靜態的頁面，無法與后端數據庫進行交互。既然用戶需要通過前端實時與后端數據庫進行交互，那么網頁也需要動態的更新，如果每次更新一個數據都通過重新獲取文件的方式來實現勢必會導致網絡負荷加重，頁面加載遲緩。
前言
使用瀏覽器訪問網站是日常生活中必不可少的一件事情，當我們在瀏覽器地址欄中輸入網址后會看到網站的內容，那么這個過程中發生了什么?下面簡單介紹下瀏覽器訪問網站過程。
第一步：瀏覽器向DNS服務器發起DNS請求，DNS服務器解析域名后返回域名對應的網站服務器IP地址
第二步：瀏覽器獲取IP地址后向網絡服務器發送一個HTTP請求
第三步：網絡服務器解析瀏覽器的請求后從數據庫獲取資源，將生成的html文件封裝至HTTP 響應包中，返回至瀏覽器解析
下圖抓包顯示了訪問“www.baidu.com”時，DNS請求和響應、HTTP請求和響應
第四步：瀏覽器解析HTTP 響應后，下載html文件，繼而根據文件內包含的外部引用文件、圖片或者多媒體文件等逐步下載，最終將獲取到的全部文件渲染成完整的網站頁面。
下圖顯示GET請求到HTML文件后繼續請求了多個JS、CSS文件
瀏覽器顯示的網頁即為web前端界面，提供用戶與網站進行交互的可視化接口，而web后端服務主要指在服務器中執行的邏輯運算和數據處理，它為前端提供著訪問服務。所謂的前后端只是從代碼被執行的位置來區分的，前端代碼在用戶面前被執行，后端代碼在遙遠的服務器上被執行。但是，無論前端或后端代碼，都是存放在服務器上的，只是當瀏覽器請求的時候，從服務器發送過去而已。
在上述web應用工作的原理中，我們通過HTTP協議訪問一個在服務端存在的文件，服務器可以找到該文件并將其內容封裝到HTTP請求中，以消息體的形式返回給客戶端。不過這種方式只能訪問靜態的頁面，無法與后端數據庫進行交互。既然用戶需要通過web前端實時與后端數據庫進行交互，那么網頁也需要動態的更新，如果每次更新一個數據都通過重新獲取Html文件的方式來實現勢必會導致網絡負荷加重，頁面加載遲緩。而Ajax技術可以很好的解決這個問題。
Ajax即異步JavaScript和XML，是一種創建交互式網頁的技術，可以不重新加載整個網頁的情況下更新部分網頁。目前jQuery庫提供多個與AJAX相關的方法。通過 jQuery AJAX方法，能夠使用HTTP Get和HTTP Post從遠程服務器上請求文本、HTML、XML或JSON，同時能夠把這些外部數據直接載入網頁被選元素中。
作為web開發人員廣泛采用的JavaScript封裝庫之一的jQuery庫，它可以極大地簡化我們的JavaScript編程，緩解瀏覽器之間不兼容的影響，要知道在不同瀏覽器中進行web網頁的兼容性測試也是一個不小的工作量。我們可以通過一個簡單的例子發現jQuery庫的優勢所在：
$("p.neat").addClass("ohmy").show("slow");
通過以上簡短的代碼，開發者可以遍歷“neat”類中所有的
元素，然后向其增加“ohmy”類，同時以動畫效果緩緩顯示每一個段落。開發者無需檢查客戶端瀏覽器類型，無需編寫循環代碼，無需編寫復雜的動畫函數，僅僅通過一行代碼就能實現上述效果。jQuery的口號“最少的代碼做最多的事情”果真名副其實，它把JavaScript帶到了一個更高的層次。
對于交互的數據格式，這里采用JSON(JavaScript?Object Notation)，它是一種輕量級的數據交換格式，采用完全獨立于編程語言的文本格式來存儲和表示數據。JSON鍵值的層次結構簡潔清晰，易于閱讀和編寫，使得 JSON 成為理想的數據交換語言。舉個例子來理解JSON數據格式：
{//JSON鍵/值對
“"wJsona"”:”kkk”
“"wjsonb"”:”12”
“"wjsonc”:”80”
}
下面介紹前端jQuery .ajax()請求JSON數據的方法，代碼如下：
??? ??? function useTestFun() {
??? ??? ??? $.ajax({
??? ??? ??? ??? url: "/Usedefine",//獲取數據的URL
??? ??? ??? ??? data:JSON.stringify({
??? ??? ??? ??? ??? "wJsona":"kkk",??? ???
??? ??? ??? ??? ??? "wjsonb":12,
??? ??? ??? ??? ??? "wjsonc":80,
??? ??? ??? ??? }),
??? ??? ??? ??? type: "POST",//HTTP請求方法
??? ??? ??? ??? dataType:"JSON",//獲取數據執行方式
??? ??? ??? ??? success:function(data){
??? ??? ??? ??? ??? if(data.status == "True"){//傳入為JSON對象格式
??? ??? ??? ??? ??? ??? alert("連接成功");
??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? else{
??? ??? ??? ??? ??? ??? $("#labletip").show();
??? ??? ??? ??? ??? }
??? ??? ??? ??? },
??? ??? ??? ??? error:function(err){
??? ??? ??? ??? ??? alert("連接失敗");
??? ??? ??? ??? }
??? ??? ??? });
??? ??? }
在數據傳輸過程中，JSON是以文本，即字符串的形式傳遞的，而JS操作的是JSON對象，所以JSON對象和JSON字符串之間的相互轉換是關鍵，可以使用JSON.stringify()將JSON對象轉化為JSON字符串，使用JSON.parse()將JSON字符串轉換為JSON對象。
JSON字符串: var str1 = "{ "name": "cxh", "sex": "man" }";
JSON對象: var str2 = { "name": "cxh", "sex": "man" };
var obj = str.parseJSON(); //由JSON字符串轉換為JSON對象
var obj = JSON.parse(str); //由JSON字符串轉換為JSON對象
var last = obj.toJSONString(); //將JSON對象轉化為JSON字符
var last = JSON.stringify(obj); //將JSON對象轉化為JSON字符
如下所示為HTTP協議中JSON數據的傳輸格式，后端服務器可使用第三方JSON庫來處理JSON數據，返回JSON數據時對HTTP協議的Content-Type字段設置為“application/json”。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51665.html
摘要：不過這種方式只能訪問靜態的頁面，無法與后端數據庫進行交互。既然用戶需要通過前端實時與后端數據庫進行交互，那么網頁也需要動態的更新，如果每次更新一個數據都通過重新獲取文件的方式來實現勢必會導致網絡負荷加重，頁面加載遲緩。 前言 使用瀏覽器訪問網站是日常生活中必不可少的一件事情，當我們在瀏覽器地址欄中輸入網址后會看到網站的內容，那么這個過程中發生了什么?下面簡單介紹下瀏覽器訪問網站過程。 ...
摘要：說明我寫這篇文章的目的其實是想科普一下基礎的數據傳輸和交互流程，其實也就是寫協議相關的一些東西。同樣，相對于后端程序來說也無外乎就是一大堆有一定意義的字符串，而對于腳本來說，就是表示一個數據對象。 說明 我寫這篇文章的目的其實是想科普一下基礎的數據傳輸和交互流程，其實也就是寫http協議相關的一些東西。而寫這篇文章也主要是源于最近和長久以來很多人問的問題都是有關于這塊的（可能問題并不是...
摘要：各瀏覽器都有自己的關于最大長度的限制谷歌火狐超過限制長度的部分，瀏覽器會自動截取掉，導致傳遞給服務器的數據缺失。 AJAX基礎知識及核心原理解讀 AJAX基礎知識 什么是AJAX？async javascript and xml，異步的JS和XML xml：可擴展的標記語言 作用是用來存儲數據的（通過自己擴展的標記名稱清晰的展示出數據結構）ajax之所以稱為異步的js和xml，主要原因...
摘要：花了整整三天的時間來解決一個非常非常小的問題想要把一點心得體會記錄下來首先是問題的提出前端如果是后端是如何進行數據的交互總體思路以前接觸的時候前端模板用的是那時候就有些不理解的地方最為不理解的幾個問題是前端和后端怎么配合特別是前端特別復雜的 花了整整三天的時間來解決一個非常非常小的問題.想要把一點心得體會記錄下來.首先是問題的提出:前端如果是react,后端是express,如何進行數...
摘要：但似乎他們的職責在以前甚至于現在都并不明確，雖然前端是跟瀏覽器打交道，但是最終瀏覽器拿到的頁面是服務器通過模板生成的一個臨時靜態頁面而已。當然，一般傳統上的開發協作模式有兩種一種是前端先寫一個靜態頁面，寫好后，讓后端去套模板。隨著不同終端（Pad/Mobile/PC)的興起，對開發人員的要求越來越高，純瀏覽器端的響應式已經不能滿足用戶體驗的高要求，往往需要針對不同的終端開發定制的版本，為了提...
閱讀 970·2023-04-25 23:55
閱讀 2691·2023-04-25 14:13
閱讀 3286·2019-08-26 13:47
閱讀 2957·2019-08-23 18:16
閱讀 618·2019-08-23 17:20
閱讀 3217·2019-08-23 16:55
閱讀 3136·2019-08-22 15:39
閱讀 3184·2019-08-20 18:10
