上網的目的

本質目的：瀏覽和消費資源

• 資源：文字、圖片、音頻、視頻…
• 資源存在哪里：服務器上

服務器的概念

是負責存放和對外提供資源的電腦。它的性能比普通的計算機好太多了

客戶端

獲取和消費資源的電腦，叫做客戶端。

我們上網的時候，一般都是用瀏覽器，所以我們可以稱瀏覽器為客戶端軟件。

URL

什么是URL？URL是統一資源定位符。

• 一個正確的url，對應著服務器上唯一的的一個資源。絕對不會重復。

URL的組成：

• 協議：http https
• 服務器名稱 www.baidu.com
• 文件在服務器上的存放位置 /liulongbinblogs/p/1132423.html

訪問網絡資源的步驟

客戶端發送請求

服務端處理這次請求

服務器做出響應

需要記住的單詞

• request - 請求
• response - 響應
• data - 數據
  • method - 方式、方法
  • status - 狀態
  • code - 碼
  • headers - 頭

網頁中的資源

• HTML – 是網頁的骨架
• CSS – 是網頁的顏值
• JS – 是網頁的行為
• 數據（Data） – 是網頁的靈魂

請求資源的兩種方式

向服務器發送請求的時候，可以使用很多種請求方式，最常用的請求方式是GET和POST。

• GET - 一般用于獲取服務器上的資源
• POST - 一般用于向服務器提交數據

了解Ajax

• 什么是ajax
  • asynchronous javascript and xml
  • 通過瀏覽器內置對象 XMLHttpRequest 來發送請求、接收響應結果的技術
  • 發送請求并接收響應結果，可以使用 交互 來表達
• 為什么要學習Ajax
  • 有了ajax，就可以向服務器發送請求，獲取數據
  • 目前，對于前端來說，ajax是必備技能。

ajax的應用場景

• ajax分頁
• 無刷新的用戶名驗證（驗證用戶名是否已被占用）
• 數據的增刪改查
• 百度地圖
• etc…

jQuery中的$.get() 方法

不帶請求參數的查詢：

// 演示$.get方法的使用 /* $.get(url, [data], [callback], [dataType]);- url 必填，請求的服務器資源的url- data 可選，對象類型，表示發送請求時需要攜帶的參數- callback，可選，function類型。請求響應成功之后，這個函數會被調用。作用是獲取服務器響應的結果- dataType, 可選，字符串類型。表示預期服務器返回數據的類型 */$.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {// res 是jQuery封裝好的，它表示服務器返回的數據// console.log(res); });

帶請求參數的查詢：

// $.get(url, [data], [callback], [dataType]);// data 表示請求參數。是一個對象// - 請求參數可以更加明確的告訴服務器，客戶端需要的資源$.get('http://www.liulongbin.top:3006/api/getbooks', {id: 3}, function (res) {console.log(res); });

jQuery中的$.post方法

// post方式，一般用于提交數據給服務器 // 比如添加一本書籍（提交書名、作者、出版社給服務器）// 演示添加一本書 let data = {bookname: '水滸傳', // 書的名字必須是 booknameauthor: '施耐庵', // 作者必須是 authorpublisher: '大宋出版社' // 出版社必須是 publisher }; $.post('http://www.liulongbin.top:3006/api/addbook', data, function (res) {// res 表示服務器返回的結果// console.log(res); });

注意點：

• url都是固定的，每個url必須使用對應的請求方式才可以。
• 獲取書籍時，請求參數 id也是固定的。
• 添加書籍時，作者、書名、出版社都是必填的，而且名字都是固定的

jQuery中的$.ajax方法

$.ajax() 方法，是一個比較綜合的方法，不但可以發送GET和POST方式的請求，還可以對請求做更詳細的配置（后續慢慢介紹）。

// 語法 $.ajax({type: '', // 請求方式url: '', // 請求的url地址data: {}, // 請求參數success: function (res) { // 請求響應整個過程成功了，觸發的函數// res 表示服務器返回的結果} });

接口

• 概念
  • ajax請求時，使用的url地址。叫做數據接口，簡稱接口
• 說明
  • 接口是由后端同學設計的（后面的node課程會講）
  • 每個接口都有對應的請求方式

接口文檔

• 后端同學，當它設計完接口之后，會給我們前端同學提供一個接口文檔
• 前端同學，調用接口的時候，就嚴格按照接口文檔來寫代碼

接口文檔的組成部分：

• 接口名稱：通過接口名稱可以了解接口的作用
• url地址：
• 請求方式：
• 請求參數：
• 響應數據格式：
• 響應數據示例：

接口測試工具 - postman

下載網址：

GET方式的測試

POST方式的測試

圖書管理案例

準備工作

將HTML文件，包括使用到的css和js，復制到今天的代碼文件夾中。

在static.html中，寫自己的代碼。

獲取并展示書籍

封裝一個函數 getBooks

函數內部，發送ajax請求，獲取書籍

把數據渲染到頁面中

// ------------------- 獲取并展示書籍 ----------------------- getBooks();function getBooks () {// 獲取并展示書籍信息// 1. 按照接口文檔，發送ajax請求，獲取書籍數據$.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {console.log(res);if (res.status === 200) {// 數據獲取成功// 2. 展示（渲染）書籍數據let str = '';// 2.1 循環 res.data 。循環的過程中，拼接trres.data.forEach(item => {str += `<tr><td>${item.id}</td><td>${item.bookname}</td><td>${item.author}</td><td>${item.publisher}</td><td><a href="javascript:;">刪除</a> </td></tr>`;});// 2.2 循環之后，得到了82個tr.把所有的tr放到tbody標簽里面$('#tb').html(str);}}); }

刪除書籍

• 給刪除超鏈接加 自定義屬性 data-id="${item.id}" ,加類名 class="delete"
• 事件委托的方案，給刪除超鏈接注冊單擊事件
• 詢問是否要刪除
• 獲取id
• 根據接口文檔，發送ajax請求，完成刪除
• 刪除成功，調用 getBooks，從新渲染數據

// ------------------ 刪除書籍 ------------------------// 1. 注冊單擊事件$('body').on('click', '.delete', function () {// 2. 詢問是否要刪除// let x = confirm('你確定要刪除嗎？你好狠！');// console.log(x); // 如果用戶點了取消，confirm返回false；用戶點擊了確定，confirm返回trueif (!confirm('你確定要刪除嗎？你好狠！')) {// 用戶點擊了取消，阻止代碼向后執行return;}// 3. 根據接口文檔，發送ajax請求。從而完成刪除// 獲取當前書籍的idlet id = $(this).attr('data-id'); // 123// console.log(id);// return;$.ajax({type: 'GET',url: 'http://www.liulongbin.top:3006/api/delbook',data: {id: id},success: function (res) {// 無論成功還是失敗，反正都要提示，干脆，不用判斷，直接提示alert(res.msg);// 4. 刪除成功，讓被刪除的這行消失if (res.status === 200) {// 調用getBooks函數，讓數據從新渲染一下即可getBooks();}}}); });

添加書籍

• 給添加按鈕注冊單擊事件
• 獲取輸入框的值（三個值）
• 判斷每個值都不能為空
• 根據接口文檔，發送ajax請求。完成添加
• 添加成功，調用 getBooks() ，從新渲染數據

// ------------------ 添加書籍 ------------------------// 1. 給添加按鈕注冊單擊事件$('#btnAdd').on('click', function () {// 2. 獲取輸入框的值（三個值 書名、作者、出版社）let bookname = $('#iptBookname').val().trim();let author = $('#iptAuthor').val().trim();let publisher = $('#iptPublisher').val().trim();// 3. 判斷，三個值不能是空if (bookname == '' || author == '' || publisher == '') {alert('參數不能為空');return;}// 4. 根據接口文檔，發送ajax請求。完成添加$.post('http://www.liulongbin.top:3006/api/addbook', {bookname: bookname, author: author, publisher: publisher}, function (res) {alert(res.msg);// 5. 添加成功之后，從新渲染if (res.status === 201) {getBooks();}});});

自行修改（全已 $.ajax 的形式進行表達）

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Ajax — 第一天的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。