js之Ajax与跨域
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js之Ajax与跨域相关的知识,希望对你有一定的参考价值。
一、Ajax
我们对Ajax一定不会陌生,异步发送请求获取数据,这是我们前端与后台服务器交互的重要的手段,那么对于ajax我们需要了解什么呢?
我们手写一个ajax,这样就能够基本了解使用了ajax了。
1 var xhr = new XMLHttpRequest(); // XMLHttpRequest是ajax最重要的api 2 3 xhr.open("GET", "/admin/user"); 4 5 xhr.onreadystatechange = function() { 6 if (xhr.readyState == 4 && xhr.status == 200) { 7 console.log(xhr.responseText); 8 } 9 } 10 11 xhr.send();
这是一个最基本的一个ajax的流程,我们需要new一个XMLHttpRequest来进行操作,针对IE的有兼容性的操作,ActiveXObject(),这和W3C标准不一样,了解记住就行。
使用open()方法去打开一个ajax请求,第一个参数是请求的方法,第二个参数是请求的地址,第三个请求是是否异步,默认为异步。接下来说一说代码中的那些状态码是代表什么当xhr.readyState变化的时候都会触发xhr.onreadystatechange。而readyState总共有5种状态:
- 未初始化:就是还没有调用send方法,状态码为0
- 载入:已经调用了send方法,正在发送,状态码为1
- 完成:send已经执行了,已经接收到相应了,状态码为2
- 解析:解析相应的内容,状态码为3
- 全部完成:解析完成,可以在客户端调用了,状态码为4
而status是http的状态码,相信大家都不会陌生,经常在浏览器会看见404的状态码,这就是这个状态码了。
- 2xx:表示成功
- 3xx:需要重定向
- 4xx:客户端错误,比如404就是客户端请求错误,服务器没有这个东西
- 5xx:这代表是服务器的错误
以上就是关于ajax的基础的知识了。
二、跨域
那么什么是跨域呢?其实我在工作中也会遇到跨域的问题,其实只要公司有一定的规模,那么跨域是不可避免的,那么什么是跨域,该怎么解决呢,下面我就来说说自己的理解。
首先,我们要知道浏览器有同源策略,不允许ajax去访问其他域的接口,这也是浏览器出于安全性的考虑,那什么情况是跨域呢?下面我们来看例子:
1 http://www.link1.com/index.html 2 http://link2.com/a/ajaxsource?id=1234 3 4 // 当我们在第一个页面发送ajax请求去访问第二个,这就不行,域名不同,浏览器限制不能去访问
那么跨域的条件是什么,只要协议、端口、域名之中有一个不同那么就算是跨域。浏览器这么做确实能保证安全性,但是在实际的工作中,我们会有pc端移动端或者还有其他的域名,这时候我们需要用ajax去访问接口,问题就出现了,由于是不同的域名,这样的异步请求就会被视为跨域。那么我们要怎么去解决呢,在html中,我们对于资源的加载是可以跨域加载的,比如说img标签的资源下载,当然了还有script和link标签中对于资源的加载。
img可以用与打点统计,在有些网站下面有个站长统计,这就是利用了img的加载策略。link和script可以使用CDN,这也是跨域。大家都了解的jsonp也是使用的script标签来进行跨域的。
线面我们说一说JSONP的实现原理,我们将要请求的数据的地址变成一个js的文件,通过script标签去加载这个文件,这个js会返回一个函数比如说callback(),里面就是我们想要请求的数据。我么看一下代码:
1 // 在自己的代码中写一个函数,这个函数双方共同约定的名字,同时对方要同意你的跨域加载,
你才能获取到数据 2 var callback = function(res) { 3 var data = res; 4 } 5 6 // 使用script标签去获取数据 7 <script src="http://link1.com/user.js"></script> 8 // 我们接受的这个js会包含一个函数callback({name: "juke", age: 21}) 9 // 返回的这个函数会去执行我们定义的函数,那么我们就拿到了他传给我们的参数,也就是我
们想要获取到的数据
同时还有一种跨域的策略是http的header,可以设置白名单,或者请求方法等等,有兴趣的可以去了解了解。
以上是关于js之Ajax与跨域的主要内容,如果未能解决你的问题,请参考以下文章