AJAX简单理解你返回对象，你全家返回对象（“你”指响应内容的第四部分）JS是一种语言，JSON是另一种语言，JSON是从JS语言复制过来的AJAX是为了使用JS设置请求并获得响应。响应的第四部分是一个字符串，可以用JSON语法表示一个对象，JSON语法可以表示一个数组，XML语法也可以，HTML语法也可以，CSS语法也可以，JS语法也可以，我自己的语法也可以。如何发送请求？可以使用表单发送请求，但是会刷新页面或者打开新的页面。A可以用来发送get请求，但是页面也会刷新或者打开一个新的页面。可以用img发送get请求，但是只能以图片的形式显示。链接可以用来发送getrequest请求，但是只能以CSS和favicon的形式显示。get请求可以通过脚本发送，但只能以脚本的形式运行（即JSONP的实现原理）。有什么办法可以实现get、post、put、delete请求吗？以您想要的任何形式展示微软的突破。IE5率先在JS中引入ActiveX对象（API），使JS可以直接发起HTTP请求。随后Mozilla、Safari、Opera也跟进（抄袭），命名为XMLHttpRequest，被列入W3C规范AJAX。JesseJamesGarrett说以下技术被命名为AJAX：异步JavaScript和XML。XMLHttpRequest使用XMLHttpRequest发送请求服务器返回一个XML格式的字符串JS解析XML并更新部分页面AJAXdemohttps://github.com/wojiaofeng...在了解AJAX和学习AJAX之前，你需要知道这四个HTTP请求内容和HTTP响应内容方面第一部分，问题如下：老师重点：需要背的alues有很多？请求内容：响应内容：也知道如何在Chrome上查看HTTP请求和HTTP响应那么，什么是AJAX呢？我们可以画出“客户端与服务端”的关系图：AJAX在chrome中通过XMLHttpRequest对象，构造（设置）HTTP请求和获取（获取）HTTP响应的技术那么AJAX的具体实现方法是什么呢？JS设置（set）任意请求头请求内容第一部分request.open('get','/xxx')请求内容第二部分request.setRequestHeader('content-type','x-www-form-urlencoded')第四部分请求内容request.send('a=1&b=2')JS获取（获取）任意响应头第一部分响应内容request.status/request.statusText第二部分响应内容request.getResponseHeader()/request.getAllResponseHeaders()Response内容第四部分request.responseTextjQuery的AJAX实现代码迭代过程如何判断写的AJAX代码是否正确？把自己写的代码放到AJAXdemo的第一版main.js中：在原生js中使用XMLHttpRequest实现ajax//自己写的第一版myButton.addEventListener('click',function(){ajax()})functionajax(){//相当于告诉浏览器我要设置Http请求varrequest=newXMLHttpRequest()//对应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("success")console.log("request.responseText")console.log(request.responseText)}else{console.log("failure")console.log(request)}}}//对应第四部分的http请求request.send("xxxxxxxxx")}第二版：放在第一版函数ajax(){}中提取硬编码内容的函数中，和使用变量获取，代码如下：zxxx'},fffff,yyyyyy)})functionajax(method,path,header,successFn,??failFn,body){varrequest=newXMLHttpRequest()request.open(method,path)for(varkeyinheader){request.setRequestHeader(key,header[key])}request.onreadystatechange=function(){if(request.readyState===4){if(request.status>=200&&request.status<300){//调用ajax函数的success函数，并在该函数中添加request.responseText变量作为第一个参数successFn.call(undefined,request.responseText)}else{failFn.call(undefined,request)}}}request.send(body)}functionfffff(x){console.log(x)console.log("请求成功")}functionyyyyyy(x){console.log(x)console.log("请求成功failed")}版本三：更灵活的函数调用第二个版本的函数调用在实践中太难用了，我可以改进吗？我可以这样调用函数吗？注意我可以改变每个key:value的位置，你也可以不设置某个key:valueajax({method:"post",path:"/xxx",header:{name:"rjj",test:"rjj111",test2:"rjj2222"}body:"password=xxx",successFn:成功,failFn:失败})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",})})functionajax(options){varmethod=options.methodvarpath=options.pathvarheader=options.headervarsuccessFn=options.successFnAAvarfailFn=options.failFnAAvarbody=options.bodyvarrequest=新的XMLHttpRequest()请求。open(method,path)for(varkeyinheader){request.setRequestHeader(key,header[key])}request.onreadystatechange=function(){if(request.readyState===4){if(request.status>=200&&request.status<300){successFn.call(未定义,request.responseText)}else{failFn.call(undefined,request)}}}request.send(body)}注：successFnAA是一个参数，参数的值是一个函数，函数的内容是function(x){控制台。log(x)}但是这个函数AA并没有执行，它是在ajax函数内部执行的，在函数AA中增加了一个参数（request.responseText）。AA函数调用第四版回调函数：放在自制的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){varnodes={}returnnodes}//将AJAX函数挂到对象窗口。jQuery.ajax=function(options){varmethod=options.methodvarpath=options.pathvarheader=options.headervarsuccessFn=options.successFnAAvarfailFn=options.failFnAAvarbody=options.bodyvarrequest=newXMLHttpRequest()request.open(method,path)for(标头中的varkey){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优化代码(销毁赋值)原代码:varmethod=options.methodvarpath=options.pathvarheader=options.headervarsuccessFn=options.successFnvarfailFn=options.failFnvarbody=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来统一函数名。调用此库时，您不必考虑成功函数的名称。记住：returnnewPromise(function(resolve,reject){})在window.jQuery中添加promise步骤。ajax函数内部，把window.jQuery.ajax函数里面的代码全部剪掉，在AAA区添加returnnewPromise(function(resolve,reject){AAA})，复制代码，把successFn改成resolve，把failFn改成拒绝使用promise在jQuery.ajax中调用successFnAA和failFn并删除它们的参数。在jQuery.ajax()之后添加.then，其中第一个参数代表成功函数，第二个参数列表为失败函数myButton.addEventListener("click",function(){jQuery.ajax({method:"post",路径:"/xxx",header:{name:"xxx",zzz:'xxx'}}).then(function(){console.log(1)},function(){console.log(2)})})window.jQuery=function(nodeOrSelector){varnodes={}returnnodes}window.jQuery.ajax=function(options){returnnewPromise(function(resolve,reject){varmethod=options.methodvarpath=options.pathvarheader=options.headervarbody=options.bodyvarrequest=newXMLHttpRequest()request.open(method,path)for(varkeyinheader){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请求只有协议+端口+域名才允许名称完全相同完全相同AJAX请求到http://baidu.com:81发送AJAX请求？没有浏览器必须保证只有协议+端口+域名完全一致才能允许AJAX请求CORS。你可以告诉浏览器我们属于同一个家族。不要阻止他破坏同源策略===Cross-domainCross-OriginResourceSharingCO资源RSCORS跨域A网站前端程序员打电话告诉B网站A后端程序员：我想和你的网站互动，你同意吗？B后：我同意然后B后台程序员会在后台代码（响应内容）中写这行代码：response.setHeader("Access-Control-Allow-Origin","http://A.com:8001")，该网站是A网站前端程序员告诉B后台这是CORS跨域我的github博客地址：https://github.com/wojiaofeng...觉得不错可以入手，O(∩_∩)O谢谢
