Ajax學習筆記第01天

1. 客戶端與服務器

1.1 客戶端與服務器器

上網的目的：通過互聯網的形式來獲取和消費資源
服務器：在上網程序中，負責存放和對外提供資源的電腦，叫做服務器
客戶端：在上網程序中，負責獲取和消費資源的電腦，叫客戶端

1.2 URL地址

URL（全稱是Uniform Resource Locator ）中文叫統一資源定位符，用于標識互聯網上每個資源的唯一存放位置，瀏覽器只有通過URL地址，才能正確定位資源的存放位置，從而成功訪問到對應的資源，

常見的URL：

http://www.baidu.com

http://www.taobao.com

http://www.cnblogs.com/liulongbinblogs/p/11649393.html

1.2.1 URL的組成部分

URL地址一般由三部分組成

客戶端與服務器之間的協議
存有該資源的服務器名稱
資源在服務器上具體存放的位置

1.3客戶端與服務器的通信程序

請求--------->處理--------->回應

注：網頁中的每一個資源都是通過請求--------->處理--------->回應的方式從服務端獲取回來的

1.3.1 基于瀏覽器的開發者工具分析通信程序

打開Chrome瀏覽器
Ctrl+Shift+l 打開Chrome的開發者工具
切換到Network面板
選中Doc頁簽
重繪頁面，分析客戶端與服務端的通信程序

1.4 服務器對外提供了哪些資源

文字+圖片+音頻+視頻+……

本質就是資料，資料就是資源，

HTML是網頁的骨架
CSS是網頁的顏值
JavaScript是網頁的行為
資料是網頁的靈魂

XMLHttpRequest（簡稱 xhr）是瀏覽器提供的 js 成員，通過它，可以請求服務器上的資料資源

2. Ajax概述

2.1 Ajax

全稱是 Asynchronous Javascript And XML（異步 JavaScript 和 XML）

通俗理解：在網頁中利用 XMLHttpRequest 物件和服務器進行資料互動的方式，就是Ajax

之前學的技術，只能把網頁做得更美觀漂亮，或者添加一些影片效果，但是，Ajax能讓我們輕松實作網頁與服務器之間的資料互動

Ajax應用場景：

用戶名檢測：注冊用戶時，通過Ajax的形式，動態檢測用戶名是否被占用；
搜索提示：當輸入搜索關鍵字時，通過Ajax的形式，動態加載搜索提示串列
資料分頁顯示：當點擊頁碼值的時候，通過Ajax的定時，根據頁碼值動態重繪表格的資料
資料的增刪改查：資料的添加、洗掉、修改、查詢操作，都需要Ajax的形式來實作資料的互動

2.2 jQuery 中的 Ajax

瀏覽器中提供的 XMLHttpRequest 用法比較復雜，所以 jQuery 對 XMLHttpRequest 進行了封裝，提供了一系列 Ajax 相關的函式，極大地降低了 Ajax 的使用難度，

jQuery 中發起 Ajax 請求最常用的三個方法如下：

$.get() //從服務器獲取資料
$.post() //向服務器發送資料
$.ajax()

2.2.1 $.get()函式

jQuery 中 $.get() 函式的功能單一，專門用來發起 get 請求，從而將服務器上的資源請求到客戶端來進行使用，

$.get() 函式的語法如下：

$.get(url, [data], [callback])

其中，三個引數各自代表的含義如下：

引數名	引數型別	是否必選	說明
url	string	是	要請求的資源地址
data	objec	否	請求資源期間要攜帶的引數
callback	function	否	請求成功時的回呼函式

發起不帶引數的get（）請求

 <button id="btnget">發起不帶引數的get請求</button>

    <script>
        $(function() {
            $('#btnget').on('click', function() {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
                    console.log(res);
                })
            })
        })
    </script>

發起帶引數的get（）請求

<button id="btngetinfo">發起帶引數的get請求</button>
    <script>
        $(function() {
            $('#btngetinfo').on('click', function() {
                $.get('http://www.liulongbin.top:3006/api/getbooks', {
                    id: 3
                }, function(res) {
                    console.log(res);
                })
            })
        })
    </script>

2.2.2 $.post()函式

jQuery 中 $.post() 函式的功能單一，專門用來發起 post 請求，從而向服務器提交資料，

$.post() 函式的語法如下：

$.post(url, [data], [callback])

其中，三個引數各自代表的含義如下：

引數名	引數型別	是否必選	說明
url	string	是	提交資料的地址
data	objec	否	要提交的資料
callback	function	否	資料提交成功時的回呼函式

$.post（）向服務器提交資料

<button id="btnpost">發起post請求</button>
    <script>
        $(function() {
            $('#btnpost').on('click', function() {
                $.post('http://www.liulongbin.top:3006/api/addbook', {
                    bookname: '水滸傳',
                    author: '施耐庵',
                    publisher: '天津出版社'
                }, function(res) {
                    console.log(res);
                })
            })
        })
    </script>

2.2.3 $.ajax()函式

相比于 $.get() 和 $.post() 函式，jQuery 中提供的 $.ajax() 函式，是一個功能比較綜合的函式，它允許我們對 Ajax 請求進行更詳細的配置，

$.ajax() 函式的基本語法如下：

$.ajax({
   type: '', // 請求的方式，例如 get 或 post
   url: '',  // 請求的 URL 地址
   data: { },// 這次請求要攜帶的資料
   success: function(res) { } // 請求成功之后的回呼函式
})

使用$.ajax()發起get請求

<button id="btnget">發起get請求</button>
    <script>
        $(function() {
            $('#btnget').on('click', function() {
                $.ajax({
                    type: 'get',
                    url: 'http://www.liulongbin.top:3006/api/getbooks',
                    data: {
                        id: 3
                    },
                    success: function(res) {
                        console.log(res);
                    }
                })
            })
        })
    </script>

使用$.ajax()發起post請求

<button id="btnpost">發起post請求</button>
    <script>
        $(function() {
            $('#btnpost').on('click', function() {
                $.ajax({
                    type: 'post',
                    url: 'http://www.liulongbin.top:3006/api/addbook',
                    data: {
                        bookname: '史記',
                        author: '司馬遷',
                        publisher: '上海圖書出版社',
                    },
                    success: function(res) {
                        console.log(res);
                    }
                })
            })
        })
    </script>