js跨域数据请求的三种常见方法

由于js同源策略的影响，当请求一个域名下的其他域名，或者同一个域名不同端口下的URL时，就会变成不允许的跨域请求。那时候，这个问题通常怎么解决呢？我给这个初出茅庐的光头做了个小安排：1。当1。JavaScript是在原生js中(没有jQuery和ajax的支持)，通常的客户端代码是这样的(我假设是localhost:8080端口下的http://localhost 33608080/web/I . media power . mobi/吴涛/index.html页面的body标签)。

脚本var xhr=new XMLHttpRequest()；xhr.open('get '，' http://I 2 . media power . mobi/adpower/VM/Bora/js/test . js '，true)；xhr . onreadystatechange=function(){ if(xhr . readystate==4 xhr . status==200){ console . log(xhr . responsetext)；} };xhr . send(null)；/script保存后，浏览器打开http://localhost 33608080/web/I . media power . mobi/吴涛/index.html，并打开控制台：

浏览器给你一个同源限制的无情错误，这意味着你不能跨域请求url数据。然后，我将采取第一种策略，使用html中的脚本标签插入js脚本：(1)通过脚本标签的引用，写下您需要的src的url地址，例如：

脚本回调函数=函数(数据){console.log('我是跨域请求的数据-' data . name)；};/script script src=' http :3358 I 2 . media power . mobi/adpower/VM/Bora/js/test . js？callback=callback function/script在这里，我定义了一个回调函数，然后使用script标记的src属性跨域请求数据。然后，约定test.js的内容，需要写成：回调函数({ ' name ' : ' wwwwwwwwwww ' })；保存，打开index.html并刷新：

(2)您还可以动态添加脚本标签，以便在解析html时，动态加载脚本脚本并请求远程数据：

脚本回调函数=函数(数据){console.log('我是跨域请求的数据-' data . name)；};var script=document . createelement(' script ')，body=document . getelementsbytagname(' body ')；script . src=' http://I 2 . media power . mobi/adpower/VM/Bora/js/test . js？callback=callback function '；正文[0]。appendChild(脚本)；/script的结果同上。

2.$.2.jQuery中的ajax()。

想象一下，当您想要使用jQuery请求跨域数据时，例如(或者仅仅是index.html):

script src=' http : js/jquery-1 . 11 . 3 . js '/script script $(function(){ $)。get(' http://I 2 . media power . mobi/adpower/VM/Bora/js/test . js '，函数(数据){ console.log(数据)；})})/脚本浏览器仍然无情地报告错误，因为您的url使用了不同的域名。

那么，既然jQuery封装了ajax方法，我们为什么不用它呢？如果人家封装了你不用，不就是一种惩罚吗？代码如下：

script src=' http : js/jquery-1 . 11 . 3 . js '/script script $(function(){ $)。ajax({ async: false，type: 'GET '，dataType: 'jsonp '，jsonp: 'callback '，jsoncallback : ' callback function '，URL : ' http://I 2 . media power . mobi/adpower/VM/Bora/js/test . js '，data: ' '，timeout: 3000，content type : ' application/JSON；utf-8 '，success:函数(msg){ console . log(msg)；} });})/脚本

在你做了这么多调侃的工作之后，浏览器给出了一个快速的响应，表示很酷，并返回给你一个包含test.js中不同远程域名下数据的对象。3.postMessage iframe

PostMessage是HTML5中新增的一个功能，比如我在本地域名下的testa.html http://192 . 168 . 1 . 152:8080/web/I . mediapower . mobi/吴涛/testa.html:

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title testa/title/head script window。onload=function(){ document。getelementbyid(' IFR ')。contentwindow。' postmessage('我是要经过传递的数据，' http://I 2。媒体力量。mobi/adpower/VM/Bora/testb。html '；};/script body iframe id=' IFR ' src=' http :3358 I 2。媒体力量。mobi/adpower/VM/Bora/testb。html '/iframe/body/html此时，我远端的testb.html里面的内容应该是这样：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title testb/title/head script window。addeventlistener(' message '，function(event) { //通过起源属性判断消息来源地址if(事件。origin===' http://192。168 .1 .152:8080 '){ alert(事件。数据)；}}，false)；/scriptbody123/body/html保存代码，打开本地testa.html，访问远端的testb.html

总结了一下，jQuery还是非常的好用的，基本上射流研究…能干的事情，jQuery都能非常快速并且高效的完成，当然，原生射流研究…也能解决很多事情，而HTML5的新功能也非常强大，这几种方法，我还是首推jQuery。

以上就是为大家分享的3种常用的射流研究…跨域请求数据的方法，希望对大家的学习有所帮助。