AJAX 的來龍去脈

Miracle 發(fā)布于2019-08-22 13:53 / 1166人閱讀

摘要：簡要理解你才返回對象，你全家都返回對象你指的是響應內(nèi)容的第四部分是一門語言，是另一門語言，這門語言抄襲了這門語言就是用請求和響應響應的第四部分是字符串，可以用語法表示一個對象，也可以用語法表示一個數(shù)組，還可以用語法，還可以用語法，還可以用語

簡要理解 AJAX

你才返回對象，你全家都返回對象("你"指的是響應內(nèi)容的第四部分)

JS 是一門語言，JSON 是另一門語言，JSON 這門語言抄襲了 JS這門語言

AJAX 就是用 JS set 請求和get 響應

響應的第四部分是字符串，可以用 JSON 語法表示一個對象，也可以用 JSON 語法表示一個數(shù)組，還可以用 XML 語法，還可以用 HTML 語法，還可以用 CSS 語法，還可以用 JS 語法，還可以用我自創(chuàng)的語法

如何發(fā)請求？

用 form 可以發(fā)請求，但是會刷新頁面或新開頁面
用 a 可以發(fā) get 請求，但是也會刷新頁面或新開頁面
用 img 可以發(fā) get 請求，但是只能以圖片的形式展示
用 link 可以發(fā) get 請求，但是只能以 CSS、favicon 的形式展示
用 script 可以發(fā) get 請求，但是只能以腳本的形式運行(就是 JSONP 的實現(xiàn)原理)

有沒有什么方式可以實現(xiàn)

get、post、put、delete 請求都行

想以什么形式展示就以什么形式展示

微軟的突破

IE 5 率先在 JS 中引入 ActiveX 對象（API），使得 JS 可以直接發(fā)起 HTTP 請求。
隨后 Mozilla、 Safari、 Opera 也跟進（抄襲）了，取名 XMLHttpRequest，并被納入 W3C 規(guī)范

AJAX

Jesse James Garrett 講如下技術(shù)取名叫做 AJAX：異步的 JavaScript 和 XML

AJAX 技術(shù)包括以下四步:

創(chuàng)建 AJAX 對象, 即 XMLHttpRequest

使用 XMLHttpRequest 發(fā)請求

服務器返回 XML 格式的字符串

JS 解析 XML，并更新局部頁面

AJAX demo

https://github.com/wojiaofeng...

理解 AJAX

學 AJAX 之前，需要知道 HTTP 請求內(nèi)容和 HTTP 響應內(nèi)容的四個部分，如下

問題： 老師的key: alue有許多---的是需要背的嗎？

請求內(nèi)容：

響應內(nèi)容：

同時還要知道怎么在 Chrome 上查看 HTTP request 和 HTTP response

那么，AJAX 是什么呢？我們可以畫出 ” client 和 server “ 的關(guān)系圖：

AJAX 就是在 chrome 通過 XMLHttpRequest 對象, 構(gòu)造（set）HTTP 請求和獲取（get）HTTP 響應的技術(shù)

那么 AJAX 的具體實現(xiàn)方法是怎么樣的呢？

JS 設置（set）任意請求 header
請求內(nèi)容第一部分 request.open("get", "/xxx")
請求內(nèi)容第二部分 request.setRequestHeader("content-type","x-www-form-urlencoded")
請求內(nèi)容第四部分 request.send("a=1&b=2")

JS 獲取（get）任意響應 header
響應內(nèi)容第一部分 request.status / request.statusText
響應內(nèi)容第二部分 request.getResponseHeader() / request.getAllResponseHeaders()
響應內(nèi)容第四部分 request.responseText

jQuery 的 AJAX 實現(xiàn)代碼迭代過程

如何確定寫的 AJAX 代碼是否正確？將你寫的代碼放到 AJAX demo 的 main.js

第一版：使用原生 js 中的 XMLHttpRequest 實現(xiàn) ajax

//自己寫的第一版
myButton.addEventListener("click", function(){
  ajax()
})

function ajax(){
//相當于告訴瀏覽器我要set Http 請求了
  var request = new XMLHttpRequest()
//對應 http 請求的第一部分
  request.open("post", "/xxx")
//對應 http 請求的第二部分
  request.setRequestHeader("name", "rjj")
  request.setRequestHeader("name", "zzz")
//對應 http 請求的第三部分，僅僅是為了便于記憶
  request.onreadystatechange = function(){
    if(request.readyState === 4){
      if(request.status >= 200 && request.status < 300){
        console.log("成功")
        console.log("request.responseText")
        console.log(request.responseText)
      }else{
        console.log("失敗")
        console.log(request)
      }
    }
  }
//對應 http 請求的第四部分
  request.send("xxxxxxxxx")
}

第二版：放到函數(shù)內(nèi)

把第一版中的function ajax(){}內(nèi)寫死的內(nèi)容提取出來, 用變量獲取, 代碼如下:

//自己寫的第二版
myButton.addEventListener("click", function(){
  ajax("post", "/xxx", {name:"rjj", sss:"zxxx"}, fffff, yyyyyy)
})

function ajax(method, path, header, successFn, failFn, body){
  var request = new XMLHttpRequest()

  request.open(method, path)

  for(var key in header){
    request.setRequestHeader(key, header[key])
  }

  request.onreadystatechange = function(){
    if(request.readyState === 4){
      if(request.status >= 200 && request.status < 300){
          //調(diào)用 ajax 函數(shù)的成功函數(shù),并且往這個函數(shù)添加 request.responseText 變量作為第一個參數(shù)
        successFn.call(undefined, request.responseText)
      }else{
        failFn.call(undefined, request)
      }
    }
  }

  request.send(body)
}

function fffff(x){
  console.log(x)
  console.log("請求成功了")
}

function yyyyyy(x){
  console.log(x)
  console.log("請求失敗了了")

}

第三版：更靈活的函數(shù)調(diào)用

第二版的函數(shù)調(diào)用實在太難用了, 根本不能在實際中使用, 我能不能改進一下?

我能不能像這樣調(diào)用函數(shù)? 注意我可以改變每個 key: value 的位置, 還可以不設置某個 key: value

ajax({
  method: "post",
  path: "/xxx",
  header:{
    name:"rjj",
    test:"rjj111",
    test2:"rjj2222"
  }
  body: "password=xxx",
  successFn: success,
  failFn: fail
})

myButton.addEventListener("click", function(){
  ajax({
    method: "post",
    header:{
      name: "xxx",
      zzz:"xxx",
    },
    successFnAA: function(x){
      console.log(x)
    },
    failFnAA: function(x){
      console.log(x)
    },
    path: "/xxx",
  })
})

function ajax(options){

  var method = options.method
  var path = options.path
  var header = options.header
  var successFn = options.successFnAA
  var failFn = options.failFnAA
  var body = options.body

  var request = new XMLHttpRequest()

  request.open(method, path)

  for(var key in header){
    request.setRequestHeader(key, header[key])
  }

  request.onreadystatechange = function(){
    if(request.readyState === 4){
      if(request.status >= 200 && request.status < 300){
        successFn.call(undefined, request.responseText)
      }else{
        failFn.call(undefined, request)
      }
    }
  }

  request.send(body)
}

注意:

successFnAA 是參數(shù), 參數(shù)的值是一個函數(shù), 函數(shù)的內(nèi)容是function(x){console.log(x)}

但是這個函數(shù)AA沒有執(zhí)行, 他是在 ajax 函數(shù)內(nèi)部執(zhí)行, 并且往函數(shù)AA添加了一個參數(shù)(request.responseText)

函數(shù)AA叫做 callback 函數(shù)

第四版: 把他放到自制的 jQuery 上

我想把原生的 AJAX 實現(xiàn)代碼封裝到我自己寫的庫,應該怎么辦?

創(chuàng)造一個對象, 把第三版的 AJAX 函數(shù)掛到這個對象上即可

myButton.addEventListener("click", function(){
$.ajax(
  {
    method: "post",
    path: "/xxx",
    header:{
      name: "xxx",
      zzz:"xxx",
    },
    successFnAA: function(x){
      console.log(x)
    },
    failFnAA: function(x){
      console.log(x)
  } 
})
})

//創(chuàng)造對象
window.jQuery = function(nodeOrSelector){
  var nodes = {}
  return nodes
}

//將 AJAX 函數(shù)掛到對象上
window.jQuery.ajax = function(options){

  var method = options.method
  var path = options.path
  var header = options.header
  var successFn = options.successFnAA
  var failFn = options.failFnAA
  var body = options.body

  var request = new XMLHttpRequest()

  request.open(method, path)

  for(var key in header){
    request.setRequestHeader(key, header[key])
  }

  request.onreadystatechange = function(){
    if(request.readyState === 4){
      if(request.status >= 200 && request.status < 300){
        successFn.call(undefined, request.responseText)
      }else{
        failFn.call(undefined, request)
      }
    }
  }

  request.send(body)
}

//僅僅是簡寫,并不重要
window.$ = window.jQuery

第五版: 使用 ES6 將代碼優(yōu)化(析構(gòu)賦值)

原代碼:

var method = options.method
var path = options.path
var header = options.header
var successFn = options.successFn
var failFn = options.failFn
var body = options.body

使用 ES6 代碼優(yōu)化:

let {method, path, header, successFn, failFn, body} = options

再次優(yōu)化:

將上一步的代碼刪除, 復制{method, path, header, successFn, failFn, body}

放到window.jQuery.ajax = function(AAA){}的AAA處

第六版: 使用 promise 統(tǒng)一成功函數(shù)名和失敗函數(shù)名

如果一個項目需要使用兩個不同的庫，那么你就必須去看這個庫的代碼才能知道如何調(diào)用成功函數(shù)和失敗函數(shù), 所以我們使用 promise 來統(tǒng)一函數(shù)名,調(diào)用這個庫的時候就不必考慮成功函數(shù)的名字

記住: return new Promise(function(resolve, reject){})

添加 promise 步驟

在 window.jQuery.ajax 函數(shù)內(nèi)部, 剪切所有代碼

在 window.jQuery.ajax 函數(shù)內(nèi)部,添加return new Promise(function(resolve, reject){AAA})

在AAA區(qū)域復制代碼

將 successFn 變成 resolve, 將 failFn 變成 reject

使用 promise

將調(diào)用 jQuery.ajax 中的 successFnAA 和 failFn 及其參數(shù)內(nèi)容刪除

在jQuery.ajax()之后添加.then,其中第一個參數(shù)表示成功函數(shù), 第二個參數(shù)表是失敗函數(shù)

myButton.addEventListener("click", function() {
    jQuery.ajax({
        method: "post",
        path: "/xxx",
        header: {
            name: "xxx",
            zzz: "xxx"
        }
    }).then(function () {
        console.log(1)
    }, function () {
        console.log(2)
    })


})


window.jQuery = function(nodeOrSelector){
    var nodes = {}
    return nodes
}



window.jQuery.ajax = function(options){
    return new Promise(function (resolve, reject) {

        var method = options.method
        var path = options.path
        var header = options.header
        var body = options.body

        var request = new XMLHttpRequest()

        request.open(method, path)

        for (var key in header) {
            request.setRequestHeader(key, header[key])
        }

        request.onreadystatechange = function(){
            if (request.readyState === 4) {
                if (request.status >= 200 && request.status < 300) {
                    resolve.call(undefined, request.responseText)
                } else {
                    reject.call(undefined, request)
                }
            }
        }
        request.send(body)
    })
}

JSON —— 一門新語言

http://json.org

同源策略

只有協(xié)議+端口+域名一模一樣才允許發(fā) AJAX 請求

一模一樣一模一樣一模一樣一模一樣一模一樣一模一樣一模一樣一模一樣

http://baidu.com?可以向?http://www.baidu.com?發(fā) AJAX 請求嗎 no

http://baidu.com:80?可以向?http://baidu.com:81?發(fā) AJAX 請求嗎 no

瀏覽器必須保證
只有協(xié)議+端口+域名一模一樣才允許發(fā) AJAX 請求
CORS 可以告訴瀏覽器，我倆一家的，別阻止他

突破同源策略 === 跨域

Cross-Origin Resource Sharing
C O 資源R S

CORS 跨域

A網(wǎng)站的前端程序員打電話告訴B網(wǎng)站的后端程序員A前: 我想和你的網(wǎng)站進行交互, 你同意嗎?
B后: 我同意

然后B后端程序員就在后臺代碼(響應內(nèi)容)寫上這一句代碼:

response.setHeader("Access-Control-Allow-Origin", "http://A.com:8001"), 網(wǎng)站是A網(wǎng)站的前端程序員告訴給B后端

這就是 CORS 跨域

我的 github 博客地址: https://github.com/wojiaofeng...
覺得好的可以 start ,O(∩_∩)O謝謝

云服務器 GPU云服務器阿里云服務器的來龍去脈來龍 ajax的理解 ajax的異步請求

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92568.html

發(fā)表評論

登陸后可評論

0條評論

Miracle

男|高級講師

我要關(guān)注我要私信

TA的文章

Python 環(huán)境及開發(fā)工具 IDLE 安裝教程

閱讀 2929·2021-11-24 09:39
郵件營銷平臺哪個好？為什么要選擇摩杜云郵件推送？

閱讀 3612·2021-11-22 13:54
在知乎逮到一個騰訊10年老Java開發(fā)，聊過之后收益良多...

閱讀 3415·2021-11-16 11:45
三年探索：一條自控、電信/科類學生的技術(shù)成長路線

閱讀 2444·2021-09-09 09:33
符合ARIA的radiogroup

閱讀 3202·2019-08-30 15:55
JS基礎(chǔ)入門篇（十八）—日期對象

閱讀 1297·2019-08-29 15:40
前端每日實戰(zhàn)：15# 視頻演示如何用純 CSS 創(chuàng)作條形圖，不用任何圖表庫

閱讀 926·2019-08-29 15:19
css之簡易水波效果

閱讀 3402·2019-08-29 15:14

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

AJAX 的來龍去脈

相關(guān)文章