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

資訊專欄INFORMATION COLUMN

AJAX 的來龍去脈

fnngj / 2472人閱讀

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

簡要理解 AJAX

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

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

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

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

如何發請求？

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

有沒有什么方式可以實現

get、post、put、delete 請求都行

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

微軟的突破

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

AJAX

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

AJAX 技術包括以下四步:

創建 AJAX 對象, 即 XMLHttpRequest

使用 XMLHttpRequest 發請求

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

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

AJAX demo

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

理解 AJAX

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

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

請求內容：

響應內容：

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

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

AJAX 就是在 chrome 通過 XMLHttpRequest 對象, 構造（set）HTTP 請求和獲?。╣et）HTTP 響應的技術

那么 AJAX 的具體實現方法是怎么樣的呢？

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

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

jQuery 的 AJAX 實現代碼迭代過程 
如何確定寫的 AJAX 代碼是否正確？將你寫的代碼放到 AJAX demo 的 main.js

第一版：使用原生 js 中的 XMLHttpRequest 實現 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")
}

第二版：放到函數內

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

//自己寫的第二版
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){
          //調用 ajax 函數的成功函數,并且往這個函數添加 request.responseText 變量作為第一個參數
        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("請求失敗了了")

}

第三版：更靈活的函數調用

第二版的函數調用實在太難用了, 根本不能在實際中使用, 我能不能改進一下?

我能不能像這樣調用函數? 注意我可以改變每個 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 是參數, 參數的值是一個函數, 函數的內容是function(x){console.log(x)}

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

函數AA叫做 callback 函數

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

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

創造一個對象, 把第三版的 AJAX 函數掛到這個對象上即可

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)
  } 
})
})

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

//將 AJAX 函數掛到對象上
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 將代碼優化(析構賦值)

原代碼:

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 代碼優化:

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

再次優化:

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

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

第六版: 使用 promise 統一成功函數名和失敗函數名

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

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

添加 promise 步驟

在 window.jQuery.ajax 函數內部, 剪切所有代碼

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

在AAA區域復制代碼

將 successFn 變成 resolve, 將 failFn 變成 reject

使用 promise

將調用 jQuery.ajax 中的 successFnAA 和 failFn 及其參數內容刪除

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

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

同源策略

只有 協議+端口+域名 一模一樣才允許發 AJAX 請求

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

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

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

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

突破同源策略 === 跨域

Cross-Origin Resource Sharing
C O 資源R S

CORS 跨域 
A網站的前端程序員打電話告訴B網站的后端程序員
A前: 我想和你的網站進行交互, 你同意嗎?


B后: 我同意

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

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

這就是 CORS 跨域

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113026.html

相關文章

  • AJAX 的來龍去脈

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

    Miracle 評論0 收藏0

  • 爬蟲問題總結

    摘要：編碼我們發現，中有時候存在中文，這是就需要對進行編碼。可以先將中文轉換成編碼，然后使用方法對參數進行編碼后傳遞。 本文檔對日常學習中用 python 做數據爬取時所遇到的一些問題做簡要記錄，以便日后查閱，部分問題可能因為認識不到位會存在一些誤解，敬請告知，萬分感謝，共同進步。 估算網站規模 該小節主要針對于整站爬取的情況。爬取整站之前，肯定是要先對一個網站的規模進行估計。這是可以使用g...

    nanfeiyan 評論0 收藏0

  • [譯] 深入理解 Promise 五部曲：1. 異步問題

    摘要：當引擎開始執行一個函數比如回調函數時，它就會把這個函數執行完，也就是說只有執行完這段代碼才會繼續執行后面的代碼。當條件允許時，回調函數就會被運行?，F在，返回去執行注冊的那個回調函數。 原文地址：http://blog.getify.com/promis... 在微博上看到有人分享LabJS作者寫的關于Promise的博客，看了下覺得寫得很好，分五個部分講解了Promise的來龍去脈。從...

    CHENGKANG 評論0 收藏0

  • 零基礎的前端開發初學者應如何系統地學習？

    摘要：在有了基礎之后，進一步學習內容包括框架。前端學習交流群禁止閑聊，非喜勿進。代碼提交前必須做的三個事情檢查所有變更跑一邊單元測試手動運行一遍所有 網站開發開發大致分為前端和后端，前端主要負責實現視覺和交互效果，以及與服務器通信，完成業務邏輯。其核心價值在于對用戶體驗的追求?？梢园慈缦滤悸穼W習系統學習： 基礎知識： html + css 這部分建議在?w3school 在線教程上學習，邊...

    JouyPub 評論0 收藏0

發表評論

0條評論

fnngj

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<