使用ajax技術發送請求代碼比較繁瑣，因此我們自己封裝了ajax函數

但是在jQuery這個庫中也封裝了ajax方法，而且jQuery封裝的方法要比我們自己封裝的方法功能上更加強大

一、 $.ajax()

作用：發送ajax請求

$.ajax({
     type: 'get',
     url: 'http://www.example.com',
     data: { name: 'zhangsan', age: '20' },
     contentType: 'application/x-www-form-urlencoded',
     beforeSend: function () { 
         return false
     },
     success: function (response) {},
     error: function (xhr) {}
});
{
     data: 'name=zhangsan&age=20'
 }
//data也可以寫成上面這種形式

contentType: 'application/json'

  

serialize方法

作用：將表單中的數據自動拼接成字符串類型的參數

var params = $('#form').serialize();
// name=zhangsan&age=30

 

二、發送jsonp請求

 jsonp請求就是屬於get請求

 

$.ajax({
    url:'',
    // 代表現在要發送的是jsonp請求
    dataType:'jsonp',
    // 修改callback參數名稱
    // 通過callback把函數名稱傳遞給服務器端，有些不使用callback，使用其他的簡寫比如：cb
jsonp:'cb',
    // 指定函數名稱
jsonCallback:'fnName',
    success:function(response){
        console.log(response);
    }
})

 

  • jsonp屬性的使用

一般情況下調用$.ajax(), 向服務器端傳遞函數名字的參數名稱，原來是callback，現在通過jsonp修改這個名字

 

// 客户端修改傳遞的函數的名字 
<button id="btn">發送請求</button>
    <!-- 沒有添加jsonp屬性之前發送的請求是 "./js/jquery.min.js？callback=XXX "-->
    <!-- 使用了jsonp屬性之後就可以寫成 "./js/jquery.min.js？cb=XXX" -->
    <script src="./js/jquery.min.js"></script>
    <script>
        $('#btn').on('click', function(){
            $.ajax({
                url:'/jsonp',
                // 向服務器端傳遞函數名字的參數名稱
                jsonp:'cb',
                // 代表現在是發送jsonp請求
                dataType:'jsonp',
                success:function(response){
                    console.log(response);
                    
                }
            })
        })
    </script>

 

// 服務器端修改
app.get('/jsonp', (req, res) => {
    // 接收客户端傳遞過來的函數名字
    const cb = req.query.cb;
    const data = cb+"({name:'zhaoliu'})";
    res.send(data);
})
  • jsonpCallback屬性的使用

正常情況下，請求發送成功之後，就會調用success函數，但是如果不想調用success函數，可以添加jsonpCallback屬性，屬性值是函數名稱，在發送請求之前定義好這個函數名稱的函數，但是一般情況下這個函數使用不上的，使用success就可以了

// response就是服務器端返回的數據形參
        function fn(response){
            console.log(response);
            
        }

        $('#btn').on('click', function(){
            $.ajax({
                url:'/jsonp',
                // 向服務器端傳遞函數名字的參數名稱，原來是callback，現在通過jsonp修改這個名字
                jsonp:'cb',
                // 請求發送之後如果不想調用success函數，就使用jsonpCallback屬性，數據返回之後就會調用這個函數
                jsonpCallback:'fn',
                // 代表現在是發送jsonp請求
                dataType:'jsonp',
                // success:function(response){
                //     console.log(response);
                    
                // }
            })
        })

 

serialize()和 new FormData()的區別

serialize()和FormData對象都可將表單數據序列化，後通過ajax異步提交 ，序列化表單就是將form表單中所有name屬性序列化成KEY-VALUE的形式，提交到後台，後台以對象相應的字段接收

1.serialize()

　　serialize()是JQuery方法，必須依賴jQuery，可序列化表單值創建 URL 編碼文本字符串，就是將表單數據以字符串的形式返回，在ssm框架中可通過對象直接接收數據。

       缺點：只能序列化一般數據，文件上傳則無法序列化，不支持文件二進制流提交。

2.FormData對象

　　FormData是HTML5對象，目前可兼容大多主流的瀏覽器，但不兼容低版本IE瀏覽器。

      與普通的Ajax相比，使用FormData 的最大優點就是可以異步上傳二進制文件。

　　通過ajax異步提交表單數據，可實現文件上傳

 

來源： 

 

 

ajax和jsonp的區別

ajax是通過創建ajax對象發送請求的，ajax技術的原理是實例化xmlhttp對象，使用此對象與後台通信。ajax通信的過程不會影響後續javascript的執行，從而實現異步。

ajax請求的頁面或資源只能是同一個域下面的資源，不能是其他域的資源，這是在設計ajax時基於安全的考慮。

jsonp是通過創建script標籤來發送請求的，jsonp可以跨域請求數據，它的原理主要是利用了script標籤可以跨域鏈接資源的特性。

 

三、$.get()和$.post()

<button id="btn">發送請求</button>
    <script src="./js/jquery.min.js"></script>
    <script>
        $('#btn').on('click',function(){
            // 第一個參數是請求地址，
            // 第二個參數是一個對象，也可以是一個字符串，是向服務器端傳遞的請求參數，參數可選
            // 第三個參數是一個回調函數 其實就是success函數，請求成功後自動調用。函數的形參response就是服務器端返回的響應數據
            // $.get('/base', 'name=zhangsan&age=14', function(response){
            //     console.log(response);
                
            // })

            $.post('/base', function(response){
                console.log(response);
                
            })
        })
    </script>

四、jQuery中ajax全局事件

目的：當頁面中有ajax請求被髮送時，我們需要給用户一個等待的提示，提示用户當前請求正在操作的過程中，但是尤其當網速比較慢的時候，這個需求比較有用。

在ajax請求參數中加入beforeSend屬性可以解決這個問題，但是當頁面中請求比較多的時候，我們要在每一個ajax請求中都加入這個，代碼的重複率就比較高

ajax全局事件就可以解決這個問題

全局事件：只要頁面中有ajax請求被髮送，對應的全局事件就會被觸發

.ajaxStart() // 當請求開始發送時觸發
.ajaxComplete()  // 當請求完成時觸發

 

全局事件需要綁定在$(document )身上

 

// 當頁面中有ajax請求發送時觸發
$(document).on('ajaxStart',function() {
    console.log('start');
})

// 當頁面中有ajax請求完成時觸發
$(document).on('ajaxStart',function() {
    console.log('complete');
})

 

 

NProgress進度條插件的使用

1. 引入相關文件

<link rel="stylesheet" href="js/nprogress/nprogress.css">

<script src="/js/nprogress/nprogress.js"></script>

 

2.

// 當頁面中有ajax請求發送時觸發
$(document).on('ajaxStart',function() {
    NProgress.start();   // 進度條開始運動             
})

// 當頁面中有ajax請求完成時觸發
$(document).on('ajaxComplete',function() {
    NProgress.done();  // 進度條結束運動
})

 

 

五、RESTful 風格的API




<body>
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript">
        // 獲取用户列表信息
        $.ajax({
            type:'get',
            url:'/users',
            success:function(response){
                console.log(response);
                
            }
        })

        // 獲取id為1的用户信息
        $.ajax({
            type:'get',
            url:'/users/1',
            success:function(response){
                console.log(response);
                
            }
        })

        //刪除id為1的信息
        $.ajax({
            type:'delete',
            url:'/users/1',
            success:function(response){
                console.log(response);
                
            }
        })

        // 修改
        $.ajax({
            type:'put',
            url:'/users/10',
            success:function(response){
                console.log(response);
                
            }
        })
    </script>
</body>

 

 

六、XML基礎

XML：全稱是extensible markup language，代表可擴展標記語言，它的作用是傳輸和存儲數據

XML所有的標籤都是開發者定義的，他用來存儲和傳輸數據，關注於數據的內容

而HTML標籤是有預定義的，它的用來展示數據的，關注於數據的外觀

 

XML DOM：XML文檔對象模型，是w3c組織定義的一套操作XML文檔對象的api。瀏覽器會把XML文檔解析成文檔對象模型

 

如何把服務器端返回的XML類型的數據展示到HTML頁面中？

<button id="btn">發送請求</button>
    <div id="container"></div>
    <script type="text/javascript">
        var btn = document.getElementById('btn');
        var container = document.getElementById('container');

        btn.onclick = function(){
            var xhr = new XMLHttpRequest();
            xhr.open('get','/xml');
            xhr.send();
            xhr.onload = function(){
                // xhr.responseXML 獲取服務器段返回的xml數據
                var xmlDocument = xhr.responseXML;
                var title = xmlDocument.getElementsByTagName('title')[0].innerHTML;
                container.innerHTML = title;
            }
        }
    </script>

 

通過 xhr.responseXML 獲取服務器段返回的xml類型的數據

將該值賦值給信息的變量，新變量就可以像HTML一樣，下面也有很多 getElementsByTagName、getElementsById等等這樣的方法屬性