AJAX 的来龙去脉
简要理解 AJAX
如何发请求?用 form 可以发请求,但是会刷新页面或新开页面 有没有什么方式可以实现
微软的突破IE 5 率先在 JS 中引入 ActiveX 对象(API),使得 JS 可以直接发起 HTTP 请求。 AJAXJesse James Garrett 讲如下技术取名叫做 AJAX:异步的 JavaScript 和 XML AJAX 技术包括以下四步:
AJAX demohttps://github.com/wojiaofeng... 理解 AJAX学 AJAX 之前,需要知道 HTTP 请求内容和 HTTP 响应内容的四个部分,如下
问题: 老师的
请求内容:
响应内容:
同时还要知道怎么在 Chrome 上查看 HTTP request 和 HTTP response
那么,AJAX 是什么呢?我们可以画出 ” client 和 server “ 的关系图:
AJAX 就是在 chrome 通过 XMLHttpRequest 对象,构造(set)HTTP 请求和获取(get)HTTP 响应的技术 那么 AJAX 的具体实现方法是怎么样的呢?
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") } 第二版:放到函数内 把第一版中的 //自己写的第二版 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) } 注意:
第四版: 把他放到自制的 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 将代码优化(析构赋值)
第六版: 使用 promise 统一成功函数名和失败函数名 如果一个项目需要使用两个不同的库,那么你就必须去看这个库的代码才能知道如何调用成功函数和失败函数,所以我们使用 promise 来统一函数名,调用这个库的时候就不必考虑成功函数的名字 记住: 添加 promise 步骤
使用 promise
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 请求 一模一样一模一样一模一样一模一样一模一样一模一样一模一样一模一样
浏览器必须保证 突破同源策略 === 跨域 Cross-Origin Resource Sharing CORS 跨域A网站的前端程序员打电话告诉B网站的后端程序员 然后B后端程序员就在后台代码(响应内容)写上这一句代码:
这就是 CORS 跨域 我的 github 博客地址: https://github.com/wojiaofeng...觉得好的可以 start,O(∩_∩)O谢谢 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |