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

//自己写的第一版
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)
    },})
})

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,header[key])
  }

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

  request.send(body)
}

注意:

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

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

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

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

myButton.addEventListener("click",function(){
$.ajax(
  {
    method: "post",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,request)
      }
    }
  }

  request.send(body)
}

//仅仅是简写,并不重要
window.$ = window.jQuery

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

  1. 原代码:

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

  2. 使用 ES6 代码优化:

    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,其中第一个参数表示成功函数,第二个参数表是失败函数 
myButton.addEventListener("click",function() {
    jQuery.ajax({
        method: "post",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 请求

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

  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 的来龙去脉的更多相关文章

  1. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗？

  2. android – Phonegap本地构建 – jquery ajax错误：readystate 0 responsetext status 0 statustext error

    解决方法您是否在索引文件中包含了内容安全元标记？

  3. Ajax简单的异步交互及Ajax原生编写

    一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象

  4. Ajax跨域问题的解决办法汇总(推荐)

    本文给大家分享多种方法解决Ajax跨域问题，非常不错具有参考借鉴价值，感兴趣的朋友一起学习吧

  5. ajax编写简单的登录页面

    这篇文章主要为大家详细介绍了ajax编写简单登录页面的具体代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  6. ajax从JSP传递对象数组到后台的方法

    今天小编就为大家分享一篇ajax从JSP传递对象数组到后台的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

  7. 解决ajax返回验证的时候总是弹出error错误的方法

    这篇文章主要介绍了解决ajax返回验证的时候总是弹出error错误的方法，感兴趣的小伙伴们可以参考一下

  8. 使用AJAX完成用户名是否存在异步校验

    这篇文章主要介绍了使用AJAX完成用户名是否存在异步校验的相关资料,需要的朋友可以参考下

  9. ajax实现无刷新省市县三级联动

    这篇文章主要为大家详细介绍了ajax实现无刷新省市县三级联动的相关资料，利用三层架构实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  10. jQuery Ajax 实现分页 kkpager插件实例代码

    本文通过实例代码给大家讲解了jQuery Ajax 实现分页 kkpager插件功能，需要的的朋友参考下吧

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。

  5. form提交时，ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error

  9. AJAX-Cache：一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部