成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

基于Ajax技術(shù)的前后端Json數(shù)據(jù)交互方式實(shí)現(xiàn)

fengxiuping / 2138人閱讀

摘要：不過這種方式只能訪問靜態(tài)的頁面，無法與后端數(shù)據(jù)庫進(jìn)行交互。既然用戶需要通過前端實(shí)時與后端數(shù)據(jù)庫進(jìn)行交互，那么網(wǎng)頁也需要動態(tài)的更新，如果每次更新一個數(shù)據(jù)都通過重新獲取文件的方式來實(shí)現(xiàn)勢必會導(dǎo)致網(wǎng)絡(luò)負(fù)荷加重，頁面加載遲緩。

前言

使用瀏覽器訪問網(wǎng)站是日常生活中必不可少的一件事情，當(dāng)我們在瀏覽器地址欄中輸入網(wǎng)址后會看到網(wǎng)站的內(nèi)容，那么這個過程中發(fā)生了什么?下面簡單介紹下瀏覽器訪問網(wǎng)站過程。

第一步：瀏覽器向DNS服務(wù)器發(fā)起DNS請求，DNS服務(wù)器解析域名后返回域名對應(yīng)的網(wǎng)站服務(wù)器IP地址
第二步：瀏覽器獲取IP地址后向網(wǎng)絡(luò)服務(wù)器發(fā)送一個HTTP請求
第三步：網(wǎng)絡(luò)服務(wù)器解析瀏覽器的請求后從數(shù)據(jù)庫獲取資源，將生成的html文件封裝至HTTP 響應(yīng)包中，返回至瀏覽器解析

下圖抓包顯示了訪問“www.baidu.com”時，DNS請求和響應(yīng)、HTTP請求和響應(yīng)

第四步：瀏覽器解析HTTP 響應(yīng)后，下載html文件，繼而根據(jù)文件內(nèi)包含的外部引用文件、圖片或者多媒體文件等逐步下載，最終將獲取到的全部文件渲染成完整的網(wǎng)站頁面。

下圖顯示GET請求到HTML文件后繼續(xù)請求了多個JS、CSS文件

前端與后端

瀏覽器顯示的網(wǎng)頁即為web前端界面，提供用戶與網(wǎng)站進(jìn)行交互的可視化接口，而web后端服務(wù)主要指在服務(wù)器中執(zhí)行的邏輯運(yùn)算和數(shù)據(jù)處理，它為前端提供著訪問服務(wù)。所謂的前后端只是從代碼被執(zhí)行的位置來區(qū)分的，前端代碼在用戶面前被執(zhí)行，后端代碼在遙遠(yuǎn)的服務(wù)器上被執(zhí)行。但是，無論前端或后端代碼，都是存放在服務(wù)器上的，只是當(dāng)瀏覽器請求的時候，從服務(wù)器發(fā)送過去而已。

AJAX介紹

在上述web應(yīng)用工作的原理中，我們通過HTTP協(xié)議訪問一個在服務(wù)端存在的文件，服務(wù)器可以找到該文件并將其內(nèi)容封裝到HTTP請求中，以消息體的形式返回給客戶端。不過這種方式只能訪問靜態(tài)的頁面，無法與后端數(shù)據(jù)庫進(jìn)行交互。既然用戶需要通過web前端實(shí)時與后端數(shù)據(jù)庫進(jìn)行交互，那么網(wǎng)頁也需要動態(tài)的更新，如果每次更新一個數(shù)據(jù)都通過重新獲取Html文件的方式來實(shí)現(xiàn)勢必會導(dǎo)致網(wǎng)絡(luò)負(fù)荷加重，頁面加載遲緩。而Ajax技術(shù)可以很好的解決這個問題。

Ajax即異步JavaScript和XML，是一種創(chuàng)建交互式網(wǎng)頁的技術(shù)，可以不重新加載整個網(wǎng)頁的情況下更新部分網(wǎng)頁。目前jQuery庫提供多個與AJAX相關(guān)的方法。通過 jQuery AJAX方法，能夠使用HTTP Get和HTTP Post從遠(yuǎn)程服務(wù)器上請求文本、HTML、XML或JSON，同時能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁被選元素中。

作為web開發(fā)人員廣泛采用的JavaScript封裝庫之一的jQuery庫，它可以極大地簡化我們的JavaScript編程，緩解瀏覽器之間不兼容的影響，要知道在不同瀏覽器中進(jìn)行web網(wǎng)頁的兼容性測試也是一個不小的工作量。我們可以通過一個簡單的例子發(fā)現(xiàn)jQuery庫的優(yōu)勢所在：

$("p.neat").addClass("ohmy").show("slow");

通過以上簡短的代碼，開發(fā)者可以遍歷“neat”類中所有的

元素，然后向其增加“ohmy”類，同時以動畫效果緩緩顯示每一個段落。開發(fā)者無需檢查客戶端瀏覽器類型，無需編寫循環(huán)代碼，無需編寫復(fù)雜的動畫函數(shù)，僅僅通過一行代碼就能實(shí)現(xiàn)上述效果。jQuery的口號“最少的代碼做最多的事情”果真名副其實(shí)，它把JavaScript帶到了一個更高的層次。

JSON格式介紹

對于交互的數(shù)據(jù)格式，這里采用JSON(JavaScript?Object Notation)，它是一種輕量級的數(shù)據(jù)交換格式，采用完全獨(dú)立于編程語言的文本格式來存儲和表示數(shù)據(jù)。JSON鍵值的層次結(jié)構(gòu)簡潔清晰，易于閱讀和編寫，使得 JSON 成為理想的數(shù)據(jù)交換語言。舉個例子來理解JSON數(shù)據(jù)格式：

{//JSON鍵/值對
“"wJsona"”:”kkk”
“"wjsonb"”:”12”
“"wjsonc”:”80”
}
代碼實(shí)現(xiàn)

下面介紹前端jQuery .ajax()請求JSON數(shù)據(jù)的方法，代碼如下：

??? ??? function useTestFun() {
??? ??? ??? $.ajax({
??? ??? ??? ??? url: "/Usedefine",//獲取數(shù)據(jù)的URL
??? ??? ??? ??? data:JSON.stringify({
??? ??? ??? ??? ??? "wJsona":"kkk",??? ??? 
??? ??? ??? ??? ??? "wjsonb":12,
??? ??? ??? ??? ??? "wjsonc":80,
??? ??? ??? ??? }),
??? ??? ??? ??? type: "POST",//HTTP請求方法
??? ??? ??? ??? dataType:"JSON",//獲取數(shù)據(jù)執(zhí)行方式
??? ??? ??? ??? success:function(data){
??? ??? ??? ??? ??? if(data.status == "True"){//傳入為JSON對象格式
??? ??? ??? ??? ??? ??? alert("連接成功");
??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? else{ 
??? ??? ??? ??? ??? ??? $("#labletip").show();
??? ??? ??? ??? ??? }
??? ??? ??? ??? },
??? ??? ??? ??? error:function(err){
??? ??? ??? ??? ??? alert("連接失敗");
??? ??? ??? ??? }
??? ??? ??? });
??? ??? }

在數(shù)據(jù)傳輸過程中，JSON是以文本，即字符串的形式傳遞的，而JS操作的是JSON對象，所以JSON對象和JSON字符串之間的相互轉(zhuǎn)換是關(guān)鍵，可以使用JSON.stringify()將JSON對象轉(zhuǎn)化為JSON字符串，使用JSON.parse()將JSON字符串轉(zhuǎn)換為JSON對象。

JSON字符串:    var str1 = "{ "name": "cxh", "sex": "man" }"; 
    JSON對象:    var str2 = { "name": "cxh", "sex": "man" };
var obj = str.parseJSON(); //由JSON字符串轉(zhuǎn)換為JSON對象
var obj = JSON.parse(str); //由JSON字符串轉(zhuǎn)換為JSON對象
var last = obj.toJSONString(); //將JSON對象轉(zhuǎn)化為JSON字符
var last = JSON.stringify(obj); //將JSON對象轉(zhuǎn)化為JSON字符

如下所示為HTTP協(xié)議中JSON數(shù)據(jù)的傳輸格式，后端服務(wù)器可使用第三方JSON庫來處理JSON數(shù)據(jù)，返回JSON數(shù)據(jù)時對HTTP協(xié)議的Content-Type字段設(shè)置為“application/json”。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51665.html

相關(guān)文章

  • 基于Ajax技術(shù)的前后端Json數(shù)據(jù)交互方式實(shí)現(xiàn)

    摘要：不過這種方式只能訪問靜態(tài)的頁面，無法與后端數(shù)據(jù)庫進(jìn)行交互。既然用戶需要通過前端實(shí)時與后端數(shù)據(jù)庫進(jìn)行交互，那么網(wǎng)頁也需要動態(tài)的更新，如果每次更新一個數(shù)據(jù)都通過重新獲取文件的方式來實(shí)現(xiàn)勢必會導(dǎo)致網(wǎng)絡(luò)負(fù)荷加重，頁面加載遲緩。 前言 使用瀏覽器訪問網(wǎng)站是日常生活中必不可少的一件事情，當(dāng)我們在瀏覽器地址欄中輸入網(wǎng)址后會看到網(wǎng)站的內(nèi)容，那么這個過程中發(fā)生了什么?下面簡單介紹下瀏覽器訪問網(wǎng)站過程。 ...

    LdhAndroid 評論0 收藏0

  • WEB程序的前后端數(shù)據(jù)交互流程

    摘要：說明我寫這篇文章的目的其實(shí)是想科普一下基礎(chǔ)的數(shù)據(jù)傳輸和交互流程，其實(shí)也就是寫協(xié)議相關(guān)的一些東西。同樣，相對于后端程序來說也無外乎就是一大堆有一定意義的字符串，而對于腳本來說，就是表示一個數(shù)據(jù)對象。 說明 我寫這篇文章的目的其實(shí)是想科普一下基礎(chǔ)的數(shù)據(jù)傳輸和交互流程，其實(shí)也就是寫http協(xié)議相關(guān)的一些東西。而寫這篇文章也主要是源于最近和長久以來很多人問的問題都是有關(guān)于這塊的（可能問題并不是...

    oysun 評論0 收藏0

  • ajax基礎(chǔ)知識

    摘要：各瀏覽器都有自己的關(guān)于最大長度的限制谷歌火狐超過限制長度的部分，瀏覽器會自動截取掉，導(dǎo)致傳遞給服務(wù)器的數(shù)據(jù)缺失。 AJAX基礎(chǔ)知識及核心原理解讀 AJAX基礎(chǔ)知識 什么是AJAX？async javascript and xml，異步的JS和XML xml：可擴(kuò)展的標(biāo)記語言 作用是用來存儲數(shù)據(jù)的（通過自己擴(kuò)展的標(biāo)記名稱清晰的展示出數(shù)據(jù)結(jié)構(gòu)）ajax之所以稱為異步的js和xml，主要原因...

    wangshijun 評論0 收藏0

  • react-redux-express異步前后端數(shù)據(jù)交互(面向初學(xué)者,高手勿進(jìn))

    摘要：花了整整三天的時間來解決一個非常非常小的問題想要把一點(diǎn)心得體會記錄下來首先是問題的提出前端如果是后端是如何進(jìn)行數(shù)據(jù)的交互總體思路以前接觸的時候前端模板用的是那時候就有些不理解的地方最為不理解的幾個問題是前端和后端怎么配合特別是前端特別復(fù)雜的 花了整整三天的時間來解決一個非常非常小的問題.想要把一點(diǎn)心得體會記錄下來.首先是問題的提出:前端如果是react,后端是express,如何進(jìn)行數(shù)...

    KaltZK 評論0 收藏0

  • 關(guān)于前后端分離與模板引擎

    摘要：但似乎他們的職責(zé)在以前甚至于現(xiàn)在都并不明確，雖然前端是跟瀏覽器打交道，但是最終瀏覽器拿到的頁面是服務(wù)器通過模板生成的一個臨時靜態(tài)頁面而已。當(dāng)然，一般傳統(tǒng)上的開發(fā)協(xié)作模式有兩種一種是前端先寫一個靜態(tài)頁面，寫好后，讓后端去套模板。隨著不同終端（Pad/Mobile/PC)的興起，對開發(fā)人員的要求越來越高，純?yōu)g覽器端的響應(yīng)式已經(jīng)不能滿足用戶體驗的高要求，往往需要針對不同的終端開發(fā)定制的版本，為了提...

    cnTomato 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<