學習AJAX必知必會（1）~Ajax

• 2022 年 1 月 21 日
• 筆記
• 學習AJAX必知必會（1）~Ajax

一、ajax（Asynchronous JavaScript And XML，即異步的 JS 和 XML）

1、通過 AJAX 可以在瀏覽器中向服務器發送異步請求實現無刷新獲取數據。

2、優勢：無刷新獲取數據

① 無需刷新頁面而與服務器端進行通信（即無刷新獲取數據）

② 可以根據用戶事件來更新部分頁面內容

■ 缺點：

① 沒有瀏覽歷史，不能回退

② 存在跨域問題

③ SEO 不友好，不利於爬取數據

3、注意：AJAX 不是新的編程語言，而是一種將現有的標準組合在一起使用的新方式。

二、xml（可擴展標記語言）[是Ajax最初的數據格式，現在使用Json格式啦]

1、作用是：傳輸和存儲數據

2、與html區別：html是預先定義好的語言，比如p標籤是段落標籤，a標籤是鏈接標籤，而xml是自定義標籤

3、xml傳輸和存儲數據的例子：

<!-- 存儲和傳輸一個學生信息 -->
<student>
	<name>小明</name>
	<age>16</age>
	<sex>男</sex>
</student>

■ 使用json表示一個學生的信息，即鍵值對的集合（對象）

{name: '小明', age:16, sex:'男'}

□ 因為ajax作用就是向服務端發送請求，所以咱這裡咱使用express（一個簡潔而靈活的 node.js Web輕量級的應用框架）提供服務。

三、express（基於Node.js 平台的 web 應用開發框架）

1、準備工作：使用前安裝node.js 應用程序（安裝node的文章：//blog.csdn.net/weixin_45630258/article/details/122129367）

2、簡單使用express：

//(1)先進入某個文件夾項目下，編譯器終端安裝npm依賴命令：
npm init --yes
//(2)編譯器終端安裝express依賴命令：
npm i express
//(3) 啟動express服務端框架命令（讓咱書寫的express的基本使用.js 文件提供服務)
//在瀏覽器地址欄搜索：//127.0.0.1:8000/
node server.js

■ server.js 文件

//1、引入express
const express = require('express');

//2、創建應用對象
const app = express();

//3、創建路由規則
//request 是請求報文的封裝，response 是響應報文的封裝
app.get('/', (request, response) => {
    //設置響應頭(允許跨域)
    response.setHeader('Access-Control-Allow-Origin', '*');
    //設置響應體
    response.send('hello express');
});

//4、監聽端口啟動服務
app.listen(8000, () => {
    console.log('服務端已經啟動，8000端口正在監聽...')
})