【云駐共創】一文教你全方位揭秘Ajax指南

Ajax初識

1.ajax的產生

ajax是前后端通信的橋梁，所以前端程序員一定要掌握Ajax這個知識點。是一種創建交互式網頁應用的網頁開發技術，通過在后臺與服務器進行少量數據交換，AJAX可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新，因此JavaScript是核心語言。

ajax全稱

ajax的優勢

提交方式可以通過任意的事件進行觸發

最大的優點就是頁面無需刷新，在頁面內與服務器通信，非常好的用戶體驗

使用異步的方式與服務器通信，不需要中斷操作

可以把以前服務器負擔的工作轉嫁給客戶端，減輕服務器和帶寬，可以最大程度減少冗余請求

基于標準化的并被廣泛支持的技術，不需要下載插件或者小程序。

2.網絡通信

網路架構

TCP/IP

從字面意義上講，有人可能會認為 TCP/IP 是指 TCP 和 IP 兩種協議。實際生活當中有時也確實就是指這兩種協議。然而在很多情況下，它只是利用 IP 進行通信時所必須用到的協議群的統稱。具體來說，IP 或 ICMP、TCP 或 UDP、TELNET 或 FTP、以及 HTTP 等都屬于 TCP/IP 協議。他們與 TCP 或 IP 的關系緊密，是互聯網必不可少的組成部分。TCP/IP 一詞泛指這些協議，因此，有時也稱 TCP/IP 為網際協議群。

互聯網進行通信時，需要相應的網絡協議，TCP/IP 原本就是為使用互聯網而開發制定的協議族。因此，互聯網的協議就是 TCP/IP，TCP/IP 就是互聯網的協議。

傳輸過程

3.http協議

http協議特點

無狀態連接

不會建立持久連接

三次握手

TCP 提供面向有連接的通信傳輸。面向有連接是指在數據通信開始之前先做好兩端之間的準備工作。

所謂三次握手是指建立一個 TCP 連接時需要客戶端和服務器端總共發送三個包以確認連接的建立。在socket編程中，這一過程由客戶端執行connect來觸發。

第一次握手：客戶端將標志位SYN置為1，隨機產生一個值seq=J，并將該數據包發送給服務器端，客戶端進入SYN_SENT狀態，等待服務器端確認。

第二次握手：服務器端收到數據包后由標志位SYN=1知道客戶端請求建立連接，服務器端將標志位SYN和ACK都置為1，ack=J+1，隨機產生一個值seq=K，并將該數據包發送給客戶端以確認連接請求，服務器端進入SYN_RCVD狀態。

第三次握手：客戶端收到確認后，檢查ack是否為J+1，ACK是否為1，如果正確則將標志位ACK置為1，ack=K+1，并將該數據包發送給服務器端，服務器端檢查ack是否為K+1，ACK是否為1，如果正確則連接建立成功，客戶端和服務器端進入ESTABLISHED狀態，完成三次握手，隨后客戶端與服務器端之間可以開始傳輸數據了。

Node.js服務

1node.js介紹

它是一個Javascript運行環境

依賴于Chrome V8引擎進行代碼解釋

事件驅動

非阻塞I/O

輕量、可伸縮，適于實時數據交互應用

單進程，單線程

官網地址：https://nodejs.org/zh-cn/

一般我們使用長期維護版，比較穩定，體驗新特性的同志可以下載體驗版。

可以打開上面官網地址，下載無腦安裝即可。

可以使用cmd進入命令窗口，使用node -v查看當前的版本及是否安裝成功。順便可以查看一下npm的版本

2.Koa框架

Koa 是一個新的 web 框架，由 Express 幕后的原班人馬打造， 致力于成為 web 應用和 API 開發領域中的一個更小、更富有表現力、更健壯的基石。 通過利用 async 函數，Koa 幫你丟棄回調函數，并有力地增強錯誤處理。 Koa 并沒有捆綁任何中間件， 而是提供了一套優雅的方法，幫助您快速而愉快地編寫服務端應用程序。

├─.gitignore // 忽略文件配置 ├─app.js // 應用入口 ├─config.js // 公共配置文件 ├─ecosystem.config.js // pm2配置文件 ├─package.json // 依賴文件配置 ├─README.md // README.md文檔 ├─routes // 路由 | ├─private.js // 校驗接口 | └public.js // 公開接口 ├─models // 數據庫配置及模型 | ├─index.js // 數據庫配置 | └user.js // 用戶的schema文件 ├─middlewares // 中間件 | ├─cors.js // 跨域中間件 | ├─jwt.js // jwt中間件 | ├─logger.js // 日志打印中間件 | └response.js // 響應及異常處理中間件 ├─logs // 日志目錄 | ├─koa-template.log | └koa-template.log-2019-05-28 ├─lib // 工具庫 | ├─error.js // 異常處理 | └mongoDB.js // mongoDB配置 ├─controllers // 操作業務邏輯 | ├─index.js // 配置 | ├─login.js // 登錄 | └test.js // 測試 ├─services // 操作數據庫 | ├─index.js // 配置 | ├─user.js // 用戶 ├─bin // 啟動目錄 | └www // 啟動文件配置

//初始化 npm init //安裝 npm install koa

3.搭建Web服務器

它的基本思路就是利用了node.js中的http模塊，讓http暴露你的端口并進行監聽，這個端口是在配置文件config.js中引入的。

#!/usr/bin/env node /** * Module dependencies. */ const app = require('../app') const http = require('http') const config = require('../config') /** * Get port from environment and store in Express. */ const port = normalizePort(process.env.PORT || config.port) // app.set('port', port); /** * Create HTTP server. */ const server = http.createServer(app.callback()) /** * Listen on provided port, on all network interfaces. */ server.listen(port) server.on('error', onError) server.on('listening', onListening) /** * Normalize a port into a number, string, or false. */ function normalizePort(val) { const port = parseInt(val, 10) if (isNaN(port)) { // named pipe return val } if (port >= 0) { // port number return port } return false } /** * Event listener for HTTP server "error" event. */ function onError(error) { if (error.syscall !== 'listen') { throw error } const bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port // handle specific listen errors with friendly messages switch (error.code) { case 'EACCES': console.error(bind + ' requires elevated privileges') process.exit(1) break case 'EADDRINUSE': console.error(bind + ' is already in use') process.exit(1) break default: throw error } } /** * Event listener for HTTP server "listening" event. */ function onListening() { const addr = server.address() const bind = typeof addr === 'string' ? 'pipe ' + addr : 'port ' + addr.port console.log('Listening on ' + bind) }

用戶使用用戶名密碼來請求服務器

服務器進行驗證用戶的信息

服務器通過驗證發送給用戶一個token

客戶端存儲token，并在每次請求時附送上這個token值

服務端驗證token值，并返回數據

AJAX的秘密

1.XMLHttpRequest

2.AJAX的使用

3.跨域請求

瀏覽器有一種保護自身的機制叫同源策略。只要協議名、主機名（域名或者IP）、端口號有一個不一樣就會跨域。

解決跨域的方法一般可以使用jsonp、設置反向代理、使用cors、iframe等方法。

Jquery中的AJAX

1.jquery介紹

這個js比較簡單，一些老項目和原生的js項目會用這種框架，總體來說比較簡單，寫得少，做的更多是這個框架的特點，使用$符號控制id’選擇器。

2.get和post方法

$("button").click(function(){ $.get("demo_ajax_load.txt", function(result){ $("div").html(result); }); });

$("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){ $("span").html(result); }); });

3.ajax方法

$(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"/jquery/test1.txt",async:false}); $("#myDiv").html(htmlobj.responseText); }); });

AJAX的實戰案例

頁面

js

后端

總結

AJAX的全稱是Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。

ajax不是新的編程語言，而是一種使用現有標準的新方法。ajax是與服務器交換數據并更新部分網頁的藝術，在不重新加載整個頁面的情況下。

ajax是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

ajax是一種用于創建快速動態網頁的技術。通過在后臺與服務器進行少量數據交換。ajax可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況

下，對網頁的某部分進行更新。而傳統的網頁（不使用ajax）如果需要更新內容，必須重載整個網頁面。

ajax的應用使用支持以上技術的web瀏覽器作為運行平臺。這些瀏覽器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera

不支持XSL格式對象，也不支持XSLT。

ajax前景非常樂觀，可以提高系統性能，優化用戶界面。AJAX現有直接框架AjaxPro，可以引入AjaxPro.2.dll文件，可以直接在前臺頁面JS調用后臺頁面的方

法。但此框架與FORM驗證有沖突。另微軟也引入了AJAX組建，需要添加AjaxControlToolkit.dll文件，可以在控件列表中出現相關控件。

ajax的優點：

1、最大的一點是頁面無刷新，用戶的體驗非常好。

2、使用異步方式與服務器通信，具有更加迅速的響應能力。。

3、可以把以前一些服務器負擔的工作轉嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。并且減輕服務器的負擔，ajax的原則是“按需取數據”，可以最大程度的減少冗余請求，和響應對服務器造成的負擔。

4、基于標準化的并被廣泛支持的技術，不需要下載插件或者小程序。

5、ajax可使因特網應用程序更小、更快，更友好。

ajax的缺點：

1、ajax不支持瀏覽器back按鈕。

2、安全問題 AJAX暴露了與服務器交互的細節。

3、對搜索引擎的支持比較弱。

4、破壞了程序的異常機制。

5、不容易調試

js原生的ajax的開發步驟

1）創建Ajax引擎對象

2）為Ajax引擎對象綁定監聽（監聽服務器已將數據響應給引擎）

3）綁定提交地址

4）發送請求

5）監聽里面處理響應數據

本文整理自華為云社區內容共創活動【云駐共創】一文教你全方位揭秘Ajax指南

Ajax TCP/IP

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。