JSONP方法解决跨域请求

Ajax跨域请求的问题

跨域：跨域名，一个域名下的文件去请求了和他不一样的域名下的资源文件（注意是请求文件，而不是数据接口），那么就会产生跨域请求，下面来写一个ajax来跨域请求的例子

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script>

window.onload = function() {

    //ajax跨域请求限制

    var oBtn = document.getElementById('btn');

    oBtn.onclick = function() {

        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {

            if (xhr.readyState == 4) {

                if ( xhr.status == 200 ) {

                    alert( xhr.responseText );

                }

            }

        }

        xhr.open('get', 'http://api.douban.com/book/subjects?q=javascript&alt=json&max-results=1', true);

        xhr.send();

    }

}

</script>

</head>

<body>

    <input type="button" value="按钮" id="btn" />

</body>

</html>

结果可以看到，报错了，如果该域名的服务器设置了这个域名为白名单，就可以访问，就相当于电话白名单，才可以进行通话

像这样的需要跨域请求的情况下，可以在当前项目中创建一个后台服务，使用这个后台服务去请求不同域名下的资源（不涉及跨域请求的问题），然后后台服务跟前端放在一起（同域名）转发给前端，这样的话也可以解决跨域请求的问题，这个后台服务就相当于中转站，如果没有这个后台服务，那么就前端直接使用跨域去请求，比如下面的jsonp

跨域请求的解决方法（Jsonp : json with padding）

jsonp的实现原理：

利用script标签，用script标签加载资源是没有跨域问题的，通过script标签的一个src属性加载（包含指定的外部文件），可以跨域包含，被包含的资源可以是任何类型的文件(可以是txt,php等) ，他只关注被包含的文件的内容是否是合法的JS，否则是会报错的），也就是说利用script标签来拿到其他域名下的接口数据，但是有个问题就是说，拿到的这个数据可能是一个没有名字的数组，那么即使拿到了没没法办使用，如果这个数组在文件中有声明一个变量来保存，那么通过script标签拿到后是可以通过这个变量来使用的，但是有个问题就是这个变量是全局的（js代码设计过程中尽量少用全局变量）

在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情，然后需要的时候通过script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会去执行我们前面定义好的函数，并且把数据当作这个函数的参数传入进去

需要注意的是fn这个回调函数的名字需要跟请求文件中的fn这个函数名字相同

function fn(data) {

    alert(data);

}

</script>

<script src="2.txt"></script>

在实际项目中，需要按需加载，而不是页面一渲染就去加载这个请求，比如下面通过点击事件动态创建script标签并且将src资源引入

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script>

function fn(data) {

    alert(data);

}

</script>

<script>

window.onload = function() {

    var oBtn = document.getElementById('btn');

    oBtn.onclick = function() {

        //当按钮点击的时候再去加载远程资源，让他执行

        var oScript = document.createElement('script');

        oScript.src = '2.txt';

        document.body.appendChild(oScript);

    }

}

</script>

</head>

<body>

    <input type="button" id="btn" value="按钮" />

</body>

</html>

百度搜索下拉提示实例

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}

#ul1 {border:1px solid #f90; width: 310px; margin: 0;padding: 0; display: none;}

li a { line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block;}

li a:hover{ background: #f90; color: white; }

</style>

<script>

function maiov(data) {

    console.log(data)

    var oUl = document.getElementById('ul1');

    var html = '';

    if (data.s.length) {

        oUl.style.display = 'block';

        for (var i=0; i<data.s.length; i++) {

            html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';

        }

        oUl.innerHTML = html;

    } else {

        oUl.style.display = 'none';

    }

}

window.onload = function() {

    var oQ = document.getElementById('q');

    var oUl = document.getElementById('ul1');

    oQ.onkeyup = function() {

        if ( this.value != '' ) {

            var oScript = document.createElement('script');

            oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=maiov';//cd也就是回掉函数，用于获取数据的函数

            document.body.appendChild(oScript);

        } else {

            oUl.style.display = 'none';

        }

    }

}

</script>

</head>

<body>

    <input type="text" id="q" />

    <ul id="ul1"></ul>

</body>

</html>

上面接口中可以自己定义一个回调函数名，上面叫做maiov，当拿到数据时候，可以看到方法名也叫做maiov

豆瓣搜索实例

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

#q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}

dl {border-bottom: 1px dotted #000;}

dt {font-weight: bold;}

</style>

<script>

function fn1(data) {

    var oMsg = document.getElementById('msg');

    var oList = document.getElementById('list');

    console.log(data);

    oMsg.innerHTML = data.title.$t + ' : ' + data['opensearch:totalResults'].$t;

    var aEntry = data.entry;

    var html = '';

    for (var i=0; i<aEntry.length; i++) {

        html += '<dl><dt>'+ aEntry[i].title.$t +'</dt><dd><img src="'+ aEntry[i].link[2]['@href'] +'" /></dd></dl>';

    }

    oList.innerHTML = html;

}

window.onload = function() {

    var oQ = document.getElementById('q');

    var oBtn = document.getElementById('btn');

    var oMsg = document.getElementById('msg');

    var oList = document.getElementById('list');

    oBtn.onclick = function() {

        if ( oQ.value != '' ) {

            var oScript = document.createElement('script');

            oScript.src = 'http://api.douban.com/book/subjects?q='+oQ.value+'&alt=xd&callback=fn1';

            document.body.appendChild(oScript);

        }

        //http://api.douban.com/book/subjects?q='+oQ.value+'&alt=xd&callback=fn1&start-index=(当前页*每页显示的条数)&max-results=10(每页显示的条数)

    }

}

</script>

</head>

<body>

    http://www.douban.com/service/apidoc/reference/

    <input type="text" id="q" /><input type="button" id="btn" value="搜索" />

    <p id="msg"></p>

    <hr />

    <div id="list"></div>

</body>

</html>

JSONP方法解决跨域请求的更多相关文章

js中ajax如何解决跨域请求
js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...
外部调用mvc的api方法时，如何解决跨域请求问题？
首先,创建一个mvc项目(包含webapi),我们模拟一个场景 1)在项目的Controller 创建一个WeiXinApiController public class WeiXinApiContr ...
Django使用jsonp和cors解决跨域请求问题
1.使用jsonp的方式解决跨域请求的问题我启动两个django项目,然后使用的端口不一样,在项目1中通过ajax发请求给项目2,然后接受项目2发送过来的数据先看项目1的ajax的代码 $(&qu ...
使用SpringMVC的@CrossOrigin注解解决跨域请求问题
跨域问题,通俗说就是用ajax请求其他站点的接口,浏览器默认是不允许的.同源策略(Same-orgin policy)限制了一个源(orgin)中加载脚本或脚本与来自其他源(orgin)中资源的交互方 ...
SpringBoot 中解决跨域请求
CORS 理解同源策略是web浏览器实现的一个重要的安全概念,它防止JavaScript代码对不同的来源(例如,不同的域)发出请求,而不是它所服务的来源.虽然同源策略有效地防止来自不同来源的资源,但 ...
SpringBoot解决跨域请求拦截
前言同源策略:判断是否是同源的,主要看这三点,协议,ip,端口. 同源策略就是浏览器出于网站安全性的考虑,限制不同源之间的资源相互访问的一种政策. 比如在域名https://www.baidu.co ...
Ajax 调用webservice 解决跨域请求和发布到服务器后本地调用成功外网失败的问题
webservice 代码 /// <summary> /// MESService 的摘要说明 /// </summary> [WebService(Namespac ...
XMLHttpRequest.withCredentials 解决跨域请求头无Cookie的问题
查看原文 XMLHttpRequest.withCredentials 属性是一个Boolean类型,它指示了是否该使用类似cookies,authorization headers(头部授权)或者 ...
关于试用jquery的jsonp实现ajax跨域请求数据的问题
我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...

随机推荐

使用Ajax的Time实现倒计时功能
网上有网友想实现一个功能,就是倒计时的功能.以某时间点与当前时间比较,还剩余时间,进行实时显示.这个问题,让Insus.NET想起以前有做过一个实时时钟有点相似.http://zzk.cnblogs. ...
Docker创建运行多个mysql容器
1.使用mysql/mysql-server:latest镜像快速启动一个Mysql实例 docker run --name ilink_user_01 -e MYSQL_ROOT_PASSWORD= ...
Java多线程--线程及相关的Java API
Java多线程--线程及相关的Java API 线程与进程进程是线程的容器,程序是指令.数据的组织形式,进程是程序的实体. 一个进程中可以容纳若干个线程,线程是轻量级的进程,是程序执行的最小单位.我 ...
Jave Web阿里云短信服务发送验证码
首先得在阿里云根据流程开通短信服务,申请签名和模版,具体看文档因为这是个web项目,用到了thymeleaf模板,所以在pom.xml中加入如下依赖 <dependency> <g ...
Centos 7 安装后设置
1.宽带连接终端: nm-connection-editor 添加:DSL 另外一篇:Centos7宽带连接 2.输入法设置设置-->区域和语言--> + -->搜索chines ...
Vue: ES6常用语法
ES6 模板字符串: ~ ${变量名}~ <div id="app"></div> <script> /* 找到对应id */ let ite ...
layui点击弹框页面表单请求
$("#addSite").click(function () { layer.open({ title: '添加站点', type: 1, area: ['700px', '40 ...
MySQL数据库封装和分页查询
1.数据库封装 <?php //我用的数据库名是housedb class DBDA {public $host="localhost";public $uid=" ...
chrome浏览器使用chrome://inspect调试app 网页，打开空白的问题
使用chrome浏览器,输入chrome://inspect可以调试android app里面的网页,如果inspect的时候,是空白, 问题截图: 那就在C:\Windows\System32\dr ...
Expo大作战(十七)--expo结合哨兵（sentry）进行错误异常记录
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网我猜去全部机翻+个人 ...

JSONP方法解决跨域请求

JSONP方法解决跨域请求的更多相关文章

随机推荐

热门专题