目錄

第1秒——基礎知識

1.1 客服端與服務器

1.2 服務器作業程序

1.3 URL地址

1.4 介面

第2秒——了解Ajax

2.1 概念

2.2 優缺點

第3秒——使用ajax

3.1 $.get() 獲取資料

3.2 $.post() 提交資料

3.3 $.ajax() 即可以獲取又可以提交

3.4 上傳檔案

第1秒——基礎知識

1.1 客服端與服務器

服務器：上網程序中負責存放和對外提供資源的電腦
客戶端：上網程序中，負責獲取和消費資源的電腦

1.2 服務器作業程序

HTML,CSS,JavaScript，資料都是服務器對外提供的資源

資源的請求方式
get 通常用于獲取服務端資源
post 通常用于向服務器提交資料

1.3 URL地址

統一資源定位符
作用
標識互聯網上每個資源的唯一存放位置

組成部分
1.客戶端與服務器之間的通信協議
2.存有該資源的服務器名稱
3.資源在服務器上具體的存放位置

1.4 介面

使用Ajax請求資料時，被請求的url地址就是資料介面，每個介面必須有請求方式

介面測驗工具 Postman，可以直接測驗介面能否正確運行，

介面檔案的組成部分：

第2秒——了解Ajax

2.1 概念

Ajax，Asynchronous JavaScript and XML，即使用JavaScript語言與服務器進行異步互動，傳輸的資料為XML，

在網頁中利用XMLHttpRequest物件和服務器進行資料互動的方式，

Ajax并非編程語言，而是一種使用現有標準的新方法，

2.2 優缺點

優點:不需要重新加載整個頁面，就可以實作與服務器交換資料并更新部分網頁內容，

缺點:在需要同步互動的時候，增多了對服務器的訪問次數，有兼容性問題，

第3秒——使用ajax

3.1 $.get() 獲取資料

語法格式：$.get(url,[data],[callback])；

url:提交資料的地址（String，必選）；
data：要提交的資料（object，非必選）；
callback：資料提交成功時的回呼函式（function，非必選）；

發起不帶引數的GET請求：

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

發起帶引數的GET請求：

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

3.2 $.post() 提交資料

語法格式：$.post(url,[data],[callback])；

url:提交資料的地址（String，必選）；
data：要提交的資料（object，非必選）；
callback：資料提交成功時的回呼函式（function，非必選）；

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

3.3 $.ajax() 即可以獲取又可以提交

語法格式：
$.ajax({
type: '', //請求方式
url: '', //請求URL地址
data: '', //請求攜帶的資料
sucess: function(res) {} //請求成功之后的回呼函式
})

發起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: 1
                    },
                    success: function(res) {
                           console.log(res);
                    }
                })
            })
        })
</script>

發起POST請求：

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

3.4 上傳檔案

不對資料進行url編碼，將FormData 資料原樣發到服務器
processData : false,

不設定content-Type屬性，使用 FormData 默認的 Content-Type 值
contentType : false,

ajaxStart()；
ajaxStart() 方法規定Ajax請求開始時運行的函式，該方法會監聽當前檔案中的所有Ajax請求，
語法格式： $(document).ajaxStart(function())；

ajaxStop()；
ajaxStop()方法規定所有的Ajax請求完成時運行的函式，
語法格式： $(document).ajaxStop(function())；

注意：自 jQuery 版本 1.8 起，該方法只被附加到檔案，

jQuery實作檔案上傳案例：

    <input type="file" id="file1" />
    <button id="btnUpload">上傳檔案</button>

    <br />
    <img src="../lib/loading.gif" alt="" style="display: none;" id="loading" />

    <script>
        $('#btnUpload').on('click', function() {
            // 監聽到Ajax請求被發起了   會監聽所有的ajax請求
            $(document).ajaxStart(function() {
                $('#loading').show();
            });

            // 監聽到 Ajax 完成的事件
            $(document).ajaxStop(function() {
                $('#loading').hide();
            });

            var files = $('#file1')[0].files;
            if (files.length <= 0) {
                return alert('請選擇檔案后在上傳');
            }
            var fd = new FormData();
            fd.append('avatar', files[0]);

            // 發起 jQuery 的 Ajax 請求，上傳檔案
            $.ajax({
                method: 'POST',
                url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                data: fd,
                //不對資料進行url編碼，將FormData 資料原樣發到服務器
                processData: false,
                //不設定content-Type屬性，使用 FormData 默認的 Content-Type 值
                contentType: false,

                success: function(res) {
                    console.log(res);
                }
            });

        })
    </script>