AJAX 的来龙去脉

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了AJAX 的来龙去脉，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

简要理解 AJAX

  1. 你才返回对象，你全家都返回对象("你"指的是响应内容的第四部分)
  2. JS 是一门语言，JSON 是另一门语言，JSON 这门语言抄袭了 JS这门语言
  3. AJAX 就是用 JS set 请求和get 响应
  4. 响应的第四部分是字符串，可以用 JSON 语法表示一个对象，也可以用 JSON 语法表示一个数组，还可以用 XML 语法，还可以用 HTML 语法，还可以用 CSS 语法，还可以用 JS 语法，还可以用我自创的语法

如何发请求？

用 form 可以发请求，但是会刷新页面或新开页面
用 a 可以发 get 请求，但是也会刷新页面或新开页面
用 img 可以发 get 请求，但是只能以图片的形式展示
用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
用 script 可以发 get 请求，但是只能以脚本的形式运行(就是 JSONP 的实现原理)

有没有什么方式可以实现

  1. get、post、put、delete 请求都行
  2. 想以什么形式展示就以什么形式展示

微软的突破

IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求。
随后 Mozilla、 Safari、 Opera 也跟进（抄袭）了，取名 XMLHttpRequest，并被纳入 W3C 规范

AJAX

Jesse James Garrett 讲如下技术取名叫做 AJAX：异步的 JavaScript 和 XML

AJAX 技术包括以下四步:

  1. 创建 AJAX 对象,即 XMLHttpRequest
  2. 使用 XMLHttpRequest 发请求
  3. 服务器返回 XML 格式的字符串
  4. 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 请求和获取（get）HTTP 响应的技术

那么 AJAX 的具体实现方法是怎么样的呢？

  1. JS 设置（set）任意请求 header
    请求内容第一部分 request.open('get','/xxx')
    请求内容第二部分 request.setRequestHeader('content-type','x-www-form-urlencoded')
    请求内容第四部分 request.send('a=1&b=2')
  2. JS 获取（get）任意响应 header
    响应内容第一部分 request.status / request.statusText
    响应内容第二部分 request.getResponseHeader() / request.getAllResponseHeaders()
    响应内容第四部分 request.responseText

jQuery 的 AJAX 实现代码迭代过程

如何确定写的 AJAX 代码是否正确？将你写的代码放到 AJAX demo 的 main.js

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

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

第二版：放到函数内

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

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

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

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

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

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

注意:

  1. successFnAA 是参数,参数的值是一个函数,函数的内容是function(x){console.log(x)}
  2. 但是这个函数AA没有执行,他是在 ajax 函数内部执行,并且往函数AA添加了一个参数(request.responseText)
  3. 函数AA叫做 callback 函数

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

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

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

  1. myButton.addEventListener("click",function(){
  2. $.ajax(
  3.   {
  4.     method: "post",failFnAA: function(x){
  5.       console.log(x)
  6.   } 
  7. })
  8. })
  9.  
  10. //创造对象
  11. window.jQuery = function(nodeOrSelector){
  12.   var nodes = {}
  13.   return nodes
  14. }
  15.  
  16. //将 AJAX 函数挂到对象上
  17. window.jQuery.ajax = function(options){
  18.  
  19.   var method = options.method
  20.   var path = options.path
  21.   var header = options.header
  22.   var successFn = options.successFnAA
  23.   var failFn = options.failFnAA
  24.   var body = options.body
  25.  
  26.   var request = new XMLHttpRequest()
  27.  
  28.   request.open(method,request)
  29.       }
  30.     }
  31.   }
  32.  
  33.   request.send(body)
  34. }
  35.  
  36. //仅仅是简写,并不重要
  37. window.$ = window.jQuery

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

  1. 原代码:

    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

  2. 使用 ES6 代码优化:

    1. let {method,body} = options
  3. 再次优化:

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

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

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

如果一个项目需要使用两个不同的库，那么你就必须去看这个库的代码才能知道如何调用成功函数和失败函数,所以我们使用 promise 来统一函数名,调用这个库的时候就不必考虑成功函数的名字

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

添加 promise 步骤

  1. 在 window.jQuery.ajax 函数内部,剪切所有代码
  2. 在 window.jQuery.ajax 函数内部,添加return new Promise(function(resolve,reject){AAA})
  3. 在AAA区域复制代码
  4. 将 successFn 变成 resolve,将 failFn 变成 reject

使用 promise

  1. 将调用 jQuery.ajax 中的 successFnAA 和 failFn 及其参数内容删除
  2. 在jQuery.ajax()之后添加.then,其中第一个参数表示成功函数,第二个参数表是失败函数
  1. myButton.addEventListener("click",function() {
  2.     jQuery.ajax({
  3.         method: "post",header: {
  4.             name: "xxx",zzz: 'xxx'
  5.         }
  6.     }).then(function () {
  7.         console.log(1)
  8.     },function () {
  9.         console.log(2)
  10.     })
  11.  
  12.  
  13. })
  14.  
  15.  
  16. window.jQuery = function(nodeOrSelector){
  17.     var nodes = {}
  18.     return nodes
  19. }
  20.  
  21.  
  22.  
  23. window.jQuery.ajax = function(options){
  24.     return new Promise(function (resolve,reject) {
  25.  
  26.         var method = options.method
  27.         var path = options.path
  28.         var header = options.header
  29.         var body = options.body
  30.  
  31.         var request = new XMLHttpRequest()
  32.  
  33.         request.open(method,path)
  34.  
  35.         for (var key in header) {
  36.             request.setRequestHeader(key,header[key])
  37.         }
  38.  
  39.         request.onreadystatechange = function(){
  40.             if (request.readyState === 4) {
  41.                 if (request.status >= 200 && request.status < 300) {
  42.                     resolve.call(undefined,request.responseText)
  43.                 } else {
  44.                     reject.call(undefined,request)
  45.                 }
  46.             }
  47.         }
  48.         request.send(body)
  49.     })
  50. }

JSON —— 一门新语言

http://json.org

同源策略

只有 协议+端口+域名 一模一样才允许发 AJAX 请求

一模一样一模一样一模一样一模一样一模一样一模一样一模一样一模一样

  1. http://baidu.com可以向http://www.baidu.com发 AJAX 请求吗 no
  2. 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谢谢

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作