文章目錄

前言
一、原生Ajax
- 1.xhr物件
- 2.open方法
- 3.send方法和請求頭
- 4.回應狀態分析
- 5.同步和異步
二、jQuery封裝的Ajax庫
- 1.$.ajax()
- 2.$.get()
- 3.$.post()
三、Axios庫
- 1.axios API
- 2.axios攔截器
- 3.get和post
四、跨域
- 1.jQuery對jsonp跨域的支持
- 2.cros跨域
總結

前言

Ajax就是瀏覽器提供的一套API，可以通過JavaScript呼叫，從而實作通過代碼控制請求與回應，實作通過JavaScript進行網路編程，
應用場景：
（1）按需獲取資料
（2）對用戶資料進行校驗
（3）自動更新頁面內容
（4）提升用戶體驗

一、原生Ajax

原生Ajax的發送請求的步驟
（1）創建一個XMLHttpRequest型別物件
（2）準備發送，打開一個與網址之間的連接
（3）執行發送動作
（4）指定xhr狀態變化事件處理函式

1.xhr物件

AJAXAPI中核心提供的是一個XMLHttpRequest型別，所有的AJAX操作都需要使用到這個型別，
IE6存在兼容問題，為了解決這個兼容問題，可以書寫以下代碼：

    <script>
        //創建一個xhr物件
        var xhr = null
        //IE6兼容寫法
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject();
        }
    </script>

2.open方法

xhr.open(method,url)
method：要是用的http方法，如GET、POST、PUT、DELETE等
url：要向其發送請求的URL地址，字串格式，

//open方法
        xhr.open("GET","https://jsonplaceholder.typicode.com/users")

3.send方法和請求頭

如果使用get方法請求，那么不需要send方法中不需要傳引數，只需在url網址中書寫，post方法必須要傳引數，而且需要在open和send中間設定請求頭，
設定請求頭的方法：setRequestHeader（“Content-type”，“application/x-www-form-urlencoded”）
send中傳入需要修改和增加的引數，

        //創建一個xhr物件
        var xhr = null;
        //IE6兼容寫法
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject();
        }
        //open方法
        xhr.open("POST","https://jsonplaceholder.typicode.com/users")
        //設定請求頭
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
        //發送資料
        xhr.send("name=gd&age=22")

4.回應狀態分析

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //創建一個xhr物件
        var xhr = null;
        //IE6兼容寫法
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject();
        }
        //open方法
        xhr.open("POST","https://jsonplaceholder.typicode.com/users")
        //設定請求頭
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
        //發送資料
        xhr.send("name=gd&age=22")
        xhr.onreadystatechange = function () {
            // 通過判斷 xhr 的 readyState ，確定此次請求是否完成
            if (this.readyState === 4) {
                console.log(this.responseText)
      }
    }
    </script>
</body>
</html>

5.同步和異步

open還有第三個引數，為布林值true和false，true為異步加載，false為同步加載，
建議：通常使用異步加載

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //創建一個xhr物件
        var xhr = null;
        //IE6兼容寫法
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject();
        }
        //open方法
        xhr.open("POST","https://jsonplaceholder.typicode.com/users",true)
        //設定請求頭
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
        xhr.onreadystatechange = function () {
            // 通過判斷 xhr 的 readyState ，確定此次請求是否完成
            if (this.readyState === 4) {
                console.log(this.responseText)
            }
        }
        //發送資料
        xhr.send("name=gd&age=22")
        
        console.log("after")
    </script>
</body>
</html>

二、jQuery封裝的Ajax庫

1.$.ajax()

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $.ajax({
            url: "http://localhost:3000/users",
            type: "GET",
            dataType: "json",
            data: {"id": 2},
            success: function (data) {
                console.log(data)
            }
        })
    </script>
</body>
</html>

2.$.get()

$.get(url,data,callback)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $.get("http://localhost:3000/users",{"id": 2},function (data) {
            console.log(data)
        })
    </script>
</body>
</html>

3.$.post()

$.post(url,data,callback)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $.post("http://localhost:3000/users",{"name": "gg","age": 12,"class": 3},function (data) {
            console.log(data)
        })
    </script>
</body>
</html>

三、Axios庫

1.axios API

axios(config)
axios(url, config)config可選 (config為物件格式的配置選項)
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        axios({
            url: "/users",
            method: "post",
            baseURL: "http://localhost:3000",
            header: {"Content-Type": "application/json"},
            data: {
                "name" : "dd",
                "age": 20,
                "class": 3
            }
        }).then(function (gg) {
            console.log(gg.data)
        }).catch(function (err) {
            console.log(err)
        })
    </script>
</body>
</html>

2.axios攔截器

在請求或回應被then或catch處理前攔截它們，
在這里插入圖片描述

3.get和post

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        axios.get("http://localhost:3000/users",{
            params: {
            "id" : 8
            }
        })
            .then(function (res) {
            console.log(res.data)
        })
        axios.post("http://localhost:3000/users",{
           "name": "ax",
           "age": 23,
           "class": 2
        })
            .then(function (res) {
            console.log(res.data)
        })
    </script>
</body>
</html>

四、跨域

1.jQuery對jsonp跨域的支持

jQuery 中使用JSONP就是將dataType 設定為 jsonp

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>  
</head>
<body>
  <input type="button" value="請求" class="btn">
  <script src="js/jquery-1.12.4.min.js"></script>
  <script>
    $(".btn").click(function () {
      // 發送跨域的 ajax 請求
      $.ajax({
        url: "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web",
        type: "GET",
        dataType: "jsonp",
        jsonp: "cb",    //這條屬性可以設定回呼函式的引數名稱（必須與后臺介面的回呼函式引數名保持一致）
        jsonpCallback: "abc", //jQ 自動分配的回呼函式的名稱進行重命名
        data: {"wd": "ajax"},
        success: function (data) {
          console.log(data)
        }
      })
    })
  </script>
</body>
</html>

2.cros跨域

這種方案無需客戶端作出任何變化（客戶端不用改代碼），只是在被請求的服務端回應的時候添加一個 Access-Control-Allow-Origin 的回應頭，表示這個資源是否允許指定域請求，
在這里插入圖片描述

總結

這部分就學習到這里啦，使用Ajax技術網頁應用能夠快速地將增量更新呈現在用戶界面上，而不需要多載（重繪）整個頁面，這使得程式能夠更快地回應用戶的操作，
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290898.html

標籤：其他

上一篇：jQuery事件處理

下一篇：java版Spring Cloud+Spring Boot+mybatis+uniapp b2b2c 多商戶入駐商城直播商城直播帶貨商城之市場推店收益

Ajax（Asynchronous Javascript And XML）