资讯专栏INFORMATION COLUMN

AJAX 的来龙去脉

fnngj / 2559人阅读

摘要:简要理解你才返回对象,你全家都返回对象你指的是响应内容的第四部分是一门语言,是另一门语言,这门语言抄袭了这门语言就是用请求和响应响应的第四部分是字符串,可以用语法表示一个对象,也可以用语法表示一个数组,还可以用语法,还可以用语法,还可以用语

简要理解 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 响应内容的四个部分,如下

</>复制代码

  1. 问题: 老师的key: alue有许多---的是需要背的吗?

请求内容:

响应内容:

同时还要知道怎么在 Chrome 上查看 HTTP request 和 HTTP response

那么,AJAX 是什么呢?我们可以画出 ” client 和 server “ 的关系图:

AJAX 就是在 chrome 通过 XMLHttpRequest 对象, 构造(set)HTTP 请求和获取(get)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 实现代码迭代过程

</>复制代码

  1. 如何确定写的 AJAX 代码是否正确?将你写的代码放到 AJAX demomain.js

第一版:使用原生 js 中的 XMLHttpRequest 实现 ajax

</>复制代码

  1. //自己写的第一版
  2. myButton.addEventListener("click", function(){
  3. ajax()
  4. })
  5. function ajax(){
  6. //相当于告诉浏览器我要set Http 请求了
  7. var request = new XMLHttpRequest()
  8. //对应 http 请求的第一部分
  9. request.open("post", "/xxx")
  10. //对应 http 请求的第二部分
  11. request.setRequestHeader("name", "rjj")
  12. request.setRequestHeader("name", "zzz")
  13. //对应 http 请求的第三部分,仅仅是为了便于记忆
  14. request.onreadystatechange = function(){
  15. if(request.readyState === 4){
  16. if(request.status >= 200 && request.status < 300){
  17. console.log("成功")
  18. console.log("request.responseText")
  19. console.log(request.responseText)
  20. }else{
  21. console.log("失败")
  22. console.log(request)
  23. }
  24. }
  25. }
  26. //对应 http 请求的第四部分
  27. request.send("xxxxxxxxx")
  28. }

第二版:放到函数内

把第一版中的function ajax(){}内写死的内容提取出来, 用变量获取, 代码如下:

</>复制代码

  1. //自己写的第二版
  2. myButton.addEventListener("click", function(){
  3. ajax("post", "/xxx", {name:"rjj", sss:"zxxx"}, fffff, yyyyyy)
  4. })
  5. function ajax(method, path, header, successFn, failFn, body){
  6. var request = new XMLHttpRequest()
  7. request.open(method, path)
  8. for(var key in header){
  9. request.setRequestHeader(key, header[key])
  10. }
  11. request.onreadystatechange = function(){
  12. if(request.readyState === 4){
  13. if(request.status >= 200 && request.status < 300){
  14. //调用 ajax 函数的成功函数,并且往这个函数添加 request.responseText 变量作为第一个参数
  15. successFn.call(undefined, request.responseText)
  16. }else{
  17. failFn.call(undefined, request)
  18. }
  19. }
  20. }
  21. request.send(body)
  22. }
  23. function fffff(x){
  24. console.log(x)
  25. console.log("请求成功了")
  26. }
  27. function yyyyyy(x){
  28. console.log(x)
  29. console.log("请求失败了了")
  30. }

第三版:更灵活的函数调用

</>复制代码

  1. 第二版的函数调用实在太难用了, 根本不能在实际中使用, 我能不能改进一下?

我能不能像这样调用函数? 注意我可以改变每个 key: value 的位置, 还可以不设置某个 key: value

</>复制代码

  1. ajax({
  2. method: "post",
  3. path: "/xxx",
  4. header:{
  5. name:"rjj",
  6. test:"rjj111",
  7. test2:"rjj2222"
  8. }
  9. body: "password=xxx",
  10. successFn: success,
  11. failFn: fail
  12. })

</>复制代码

  1. myButton.addEventListener("click", function(){
  2. ajax({
  3. method: "post",
  4. header:{
  5. name: "xxx",
  6. zzz:"xxx",
  7. },
  8. successFnAA: function(x){
  9. console.log(x)
  10. },
  11. failFnAA: function(x){
  12. console.log(x)
  13. },
  14. path: "/xxx",
  15. })
  16. })
  17. function ajax(options){
  18. var method = options.method
  19. var path = options.path
  20. var header = options.header
  21. var successFn = options.successFnAA
  22. var failFn = options.failFnAA
  23. var body = options.body
  24. var request = new XMLHttpRequest()
  25. request.open(method, path)
  26. for(var key in header){
  27. request.setRequestHeader(key, header[key])
  28. }
  29. request.onreadystatechange = function(){
  30. if(request.readyState === 4){
  31. if(request.status >= 200 && request.status < 300){
  32. successFn.call(undefined, request.responseText)
  33. }else{
  34. failFn.call(undefined, request)
  35. }
  36. }
  37. }
  38. request.send(body)
  39. }

注意:

successFnAA 是参数, 参数的值是一个函数, 函数的内容是function(x){console.log(x)}

但是这个函数AA没有执行, 他是在 ajax 函数内部执行, 并且往函数AA添加了一个参数(request.responseText)

函数AA叫做 callback 函数

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

</>复制代码

  1. 我想把原生的 AJAX 实现代码封装到我自己写的库,应该怎么办?

创造一个对象, 把第三版的 AJAX 函数挂到这个对象上即可

</>复制代码

  1. myButton.addEventListener("click", function(){
  2. $.ajax(
  3. {
  4. method: "post",
  5. path: "/xxx",
  6. header:{
  7. name: "xxx",
  8. zzz:"xxx",
  9. },
  10. successFnAA: function(x){
  11. console.log(x)
  12. },
  13. failFnAA: function(x){
  14. console.log(x)
  15. }
  16. })
  17. })
  18. //创造对象
  19. window.jQuery = function(nodeOrSelector){
  20. var nodes = {}
  21. return nodes
  22. }
  23. //将 AJAX 函数挂到对象上
  24. window.jQuery.ajax = function(options){
  25. var method = options.method
  26. var path = options.path
  27. var header = options.header
  28. var successFn = options.successFnAA
  29. var failFn = options.failFnAA
  30. var body = options.body
  31. var request = new XMLHttpRequest()
  32. request.open(method, path)
  33. for(var key in header){
  34. request.setRequestHeader(key, header[key])
  35. }
  36. request.onreadystatechange = function(){
  37. if(request.readyState === 4){
  38. if(request.status >= 200 && request.status < 300){
  39. successFn.call(undefined, request.responseText)
  40. }else{
  41. failFn.call(undefined, request)
  42. }
  43. }
  44. }
  45. request.send(body)
  46. }
  47. //仅仅是简写,并不重要
  48. window.$ = window.jQuery

第五版: 使用 ES6 将代码优化(析构赋值)

原代码:

</>复制代码

  1. var method = options.method
  2. var path = options.path
  3. var header = options.header
  4. var successFn = options.successFn
  5. var failFn = options.failFn
  6. var body = options.body

使用 ES6 代码优化:

</>复制代码

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

再次优化:

将上一步的代码删除, 复制{method, path, header, successFn, failFn, body}

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

第六版: 使用 promise 统一成功函数名和失败函数名

</>复制代码

  1. 如果一个项目需要使用两个不同的库,那么你就必须去看这个库的代码才能知道如何调用成功函数和失败函数, 所以我们使用 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,其中第一个参数表示成功函数, 第二个参数表是失败函数

</>复制代码

  1. myButton.addEventListener("click", function() {
  2. jQuery.ajax({
  3. method: "post",
  4. path: "/xxx",
  5. header: {
  6. name: "xxx",
  7. zzz: "xxx"
  8. }
  9. }).then(function () {
  10. console.log(1)
  11. }, function () {
  12. console.log(2)
  13. })
  14. })
  15. window.jQuery = function(nodeOrSelector){
  16. var nodes = {}
  17. return nodes
  18. }
  19. window.jQuery.ajax = function(options){
  20. return new Promise(function (resolve, reject) {
  21. var method = options.method
  22. var path = options.path
  23. var header = options.header
  24. var body = options.body
  25. var request = new XMLHttpRequest()
  26. request.open(method, path)
  27. for (var key in header) {
  28. request.setRequestHeader(key, header[key])
  29. }
  30. request.onreadystatechange = function(){
  31. if (request.readyState === 4) {
  32. if (request.status >= 200 && request.status < 300) {
  33. resolve.call(undefined, request.responseText)
  34. } else {
  35. reject.call(undefined, request)
  36. }
  37. }
  38. }
  39. request.send(body)
  40. })
  41. }
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 跨域

</>复制代码

  1. A网站的前端程序员打电话告诉B网站的后端程序员

    A前: 我想和你的网站进行交互, 你同意吗?

  2. B后: 我同意

然后B后端程序员就在后台代码(响应内容)写上这一句代码:

response.setHeader("Access-Control-Allow-Origin", "http://A.com:8001"), 网站是A网站的前端程序员告诉给B后端

这就是 CORS 跨域

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113026.html

相关文章

  • AJAX 来龙去脉

    摘要:简要理解你才返回对象,你全家都返回对象你指的是响应内容的第四部分是一门语言,是另一门语言,这门语言抄袭了这门语言就是用请求和响应响应的第四部分是字符串,可以用语法表示一个对象,也可以用语法表示一个数组,还可以用语法,还可以用语法,还可以用语 简要理解 AJAX 你才返回对象,你全家都返回对象(你指的是响应内容的第四部分) JS 是一门语言,JSON 是另一门语言,JSON 这门语言抄...

    Miracle 评论0 收藏0
  • 爬虫问题总结

    摘要:编码我们发现,中有时候存在中文,这是就需要对进行编码。可以先将中文转换成编码,然后使用方法对参数进行编码后传递。 本文档对日常学习中用 python 做数据爬取时所遇到的一些问题做简要记录,以便日后查阅,部分问题可能因为认识不到位会存在一些误解,敬请告知,万分感谢,共同进步。 估算网站规模 该小节主要针对于整站爬取的情况。爬取整站之前,肯定是要先对一个网站的规模进行估计。这是可以使用g...

    nanfeiyan 评论0 收藏0
  • [译] 深入理解 Promise 五部曲:1. 异步问题

    摘要:当引擎开始执行一个函数比如回调函数时,它就会把这个函数执行完,也就是说只有执行完这段代码才会继续执行后面的代码。当条件允许时,回调函数就会被运行。现在,返回去执行注册的那个回调函数。 原文地址:http://blog.getify.com/promis... 在微博上看到有人分享LabJS作者写的关于Promise的博客,看了下觉得写得很好,分五个部分讲解了Promise的来龙去脉。从...

    CHENGKANG 评论0 收藏0
  • 零基础前端开发初学者应如何系统地学习?

    摘要:在有了基础之后,进一步学习内容包括框架。前端学习交流群禁止闲聊,非喜勿进。代码提交前必须做的三个事情检查所有变更跑一边单元测试手动运行一遍所有 网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习: 基础知识: html + css 这部分建议在 w3school 在线教程上学习,边...

    JouyPub 评论0 收藏0

发表评论

0条评论

fnngj

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<