您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

实例讲解AJAX跨域请求数据的四种方法

2024/3/29 0:22:24发布25次查看
由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 ,本文主要为大家带来一篇ajax跨域请求数据的四种方法,希望能帮助到大家。
请求数据需要调用浏览器的内置构造函数 xmlhttprequest() 进行 实例对象
var xhr = new xmlhttprequest();
注意点 在ie8之前支持的 activexobject(microsoft.xmlhttp);  记住要进行兼容处理哦  在这里我就不写了
通过该对象进行获取
获取数据的四种状态  xhr.readystate 该属性保存着请求数据的几种状态
1.xhr.open(请求方式,请求地址,设置同/异步);
2.xhr.send(null);//发送请求  如果是post请求 那么参数需要在send中进行传递
3.会一直检测数据是否返回
4.数据返回 那么xhr.readystate的值是4  说明数据返回成功
那么我们需要进行跨域请求如何做呢
方案一:
利用script标签的src属性请求数据  src属性请求的数据浏览器是不会进行拦截的
<script srrc="http://jiang.com/ajax/data.php"><script/>
这样我们是可以请求到数据的  但是这样有一些缺点
1.我们无法控制何时发送请求的  页面加载到这里就是发送请求的
2.这样的方式  请求方式是同步的请求 需要请求到数据才会执行下一步的代码  这样页面加载时间可能延长
3.所以建议不要使用这样的方式 不推荐
方案二:
在js中动态创建script标签 指定请求的接口
var script = document.createelement(script);
//将script追加到head标签中
document.getelementstagname(head)[0].appendchild(script);
优点:我们可以控制请求的时机  并且这样请求的方式是异步的 不会延长页面加载的时间
重要点:我们可以在请求数据中调用请求页面中的函数  使用函数的形参接收请求回来的数据
方案三:
在请求的后端接口设置一个 请求头即可
access-control-allow-origin
含有这个请求头 前端页面跨域请求的数据就不会被浏览器进行拦截啦
方案四:
使用<iframe>标签 将一个页面 将可以可变的内容部分放置在该标签中  发送请求就会进行刷新啦  严格意义上不算ajax啦 
该方式在ajax未出现  就是使用该标签实现请求数据的
相关推荐:
最全ajax跨域解决方案
ajax跨域解决方法
nginx 实现ajax跨域请求
以上就是实例讲解ajax跨域请求数据的四种方法的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product