目录
一、AJAX简介
AJAX全称为AsynchronousJavaScriptAndXML,就是异步的JS和XML。通过AIAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。AAX不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。
二、XML简介
2.1.XML可扩展标记语言
2.2.XML被设计用来传输和存储数据。
2.3.XML和HTML类似,不同的是HTML中都是预定义标签,而XML中没有预定义标签,全都是自定义标签,用来表示一些数据。
2.4.现已被JSON替代
三、AJAX的特点
3.1.AJAX的优点
1).可以无需刷新页面而与服务器端进行通信
2).允许你根据用户事件来更新部分页面内容。
3.2.AJAX的缺点
1).没有浏览历史,不能回退
2).存在跨域问题 (同源)
3).SEO不友好
四、AJAX的使用
4.1.核心对象
XMLHttpRequest,AJAX的所有操作都是通过该对象进行的。
4.2.使用步骤
1).创建XMLHttpRequest对象
var xhr=newXMLHttpRequest()
2).设置请求信息
2.1).xhr.open(method, url);
2.2).//可以设置请求头,一般不设置
2.3).xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
3).发送请求
xhr.send(body)//get请求不传body参数,只有post请求使用
4).接收响应
4.1).//xhr.responseXML接收xml格式的响应数据
4.2).//xhr.responseText接收文本格式的响应数据
4.3).xhr.onreadystatechange=function()
4.4).if(xhr.readyState == 4 && xhr.status == 200)
4.5).vartext=xhr.responseText;
4.6).console.log(text);}}
4.3.解决IE缓存问题
1).问题:在一些浏览器中(IE),由于缓存机制的存在,ajax只会发送的第一次请求,剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
2).解决方式:浏览器的缓存是根据url地址来记录的,所以我们只需要修改url地址即可避免缓存问题
3).xhr.open("get",”/testAJAx?t="+Date.now());
4.4.AJAX请求状态
1).xhr.readyState可以用来查看请求当前的状态
2).https://developer.mozilla.org/zh-CN/docs/Web/APl/XMLHttpRequest/readyState
2.1).0:表示xMLHttpRequest实例已经生成,但是open()方法还没有被调用。
2.2).表示send()方法还没有被调用,仍然可以使用setRequestHeader(),设定HTTP请求的头信息。
2.3).2:表示send()方法已经执行,并且头信息和状态码已经收到。
2.4).3:表示正在接收服务器传来的body部分的数据。
2.5).4:表示服务器数据已经完全接收,或者本次接收已经失败了
五、jQuery 中的 AJAX
5.1.get 请求
$.get(url,[data], [callback], [type])
1).url:请求的URL地址。
2).data:请求携带的参数。
3).callback:载入成功时回调函数。
4).type:设置返回内容格式,xml,html,script,json,text,_default。post 请求
5.2.post 请求
$.post(url, [data], [callback], [type])
1).url:请求的URL地址。
2).data:请求携带的参数。
3).callback:载入成功时回调函数。
4).type:设置返回内容格式,xml,html,script,json,text,_default。
六、同源策略
6.1.同源策略(Same-OriginPolicy)最早由Netscape公司提出,是浏览器的一种安全策略。
1).同源策略(Same-OriginPolicy)最早由Netscape公司提出,是浏览器的一种安全策略。
2).违背同源策略就是跨域。
七、解决跨域
7.1.JSONP
1).JSONP是什么
JSONP(ISONwithPadding),是一个非官方的跨域解决方案,纯梓凭借程序员的聪明才智开发出来,只支持get请求。
2).JSONP怎么工作的?
2.1).在网页有一些标签天生具有跨域能力,比如:imglinkiframe Script。
2.2).JSONP就是利用script标签的跨域能力来发送请求的。
3).JSONP的使用
3.1).动态的创建一个script标签var script = document.createElement("script");
3.2).设置script的src,设置回调函数0= script.src ="http://localhost:3000/testAJAX?callback=abc";
7.2.CORS
1).CORS是什么?
CORS(CrosS-OriginResource Sharing),跨域资源共享。CORS是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源
2).CORS怎么工作的?
CORS是通过设置一个咱应头来告诉浏览器,该请求允许跨域,浏览器收到该响应以后就会对响应放行。
3).CORS的使用
3.1).router.get("/testAJAx", function (req,res){
3.2).//通过res来设置响应头,来允许跨域请求
3.3)./res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
3.4).res.set("Access-Control-Allow-Origin","*");
3.5).res.send("testAJAx返回的响应");;
3.6).);