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

LdhAndroid 發(fā)布于2019-08-21 18:39 / 3388人閱讀

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

前言

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

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

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

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

下圖顯示GET請(qǐng)求到HTML文件后繼續(xù)請(qǐng)求了多個(gè)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)瀏覽器請(qǐng)求的時(shí)候，從服務(wù)器發(fā)送過去而已。

AJAX介紹

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

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

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

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

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

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

JSON格式介紹

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

{//JSON鍵/值對(duì)
“"wJsona"”:”kkk”
“"wjsonb"”:”12”
“"wjsonc”:”80”
}

代碼實(shí)現(xiàn)

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

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

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

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

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

云服務(wù)器 GPU云服務(wù)器 json數(shù)據(jù)前后交互 webrtc前后端交互基于防火墻技術(shù)的校園網(wǎng)絡(luò)安全設(shè)計(jì)與實(shí)現(xiàn) js前后臺(tái)數(shù)據(jù)交互

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

LdhAndroid

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Java開發(fā)編程的好處在哪

閱讀 3698·2021-11-22 15:24
一根煙的時(shí)間帶你了解，程序員被稱為2021新時(shí)代農(nóng)民工如何改變外界的看法...

閱讀 1606·2021-09-26 09:46
PIGYun中秋特惠：香港/韓國(guó)VPS月付14元起

閱讀 1919·2021-09-14 18:01
【css3學(xué)習(xí)系列】之box-shadow,radial-gradient,linear-gradi

閱讀 2614·2019-08-30 15:45
關(guān)于CSS你應(yīng)該知道的基礎(chǔ)知識(shí) - 選擇器篇

閱讀 3532·2019-08-30 14:23
webview中嵌入部分html5適配的小方法~

閱讀 1881·2019-08-30 12:43
前端每日實(shí)戰(zhàn) 167# 視頻演示如何用 1 個(gè) dom 元素創(chuàng)作兩顆愛心

閱讀 2919·2019-08-30 10:56
webpack1學(xué)習(xí)筆記

閱讀 805·2019-08-29 12:20

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

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

相關(guān)文章