ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。

 (function(){
$jsonp(//地址
'http://api.douban.com/v2/movie/in_theaters',
//传递的参数
{
count:10,start:5
},
//回调函数
function(data){
document.getElementById('result').innerHTML=JSON.stringify(data);
}
);
})(); (function(window,document){
'use strict';
var jsonp=function(url,data,callback){
//1 挂载回调函数
var fnSuffix=Math.random().toString().replace('.','');
var cbFuncName='my_json_cb_'+fnSuffix;
//将函数挂载在全局环境的方式不推荐 使用cbs.my_json_cb_
window[cbFuncName]=callback;
//2 将data转化成url字符串的形式
// {id:1,name:'zhangsan'} =>id=1&name=zhangsan
var querystring=url.indexOf('?')==-1?'?':'&';
for(var key in data){
querystring+=key+'='+data[key]+'&';
// id= 1 &
}
//querystring=?id=1&name=zhangsan&
//3 处理url地址中的回调参数
//url+=callback=sdfsfdg
querystring+='callback='+cbFuncName;
//querystring=?id=1&name=zhangsan&cb=my_json_cb_0231241
//4 创建一个script的标签
var scriptElement=document.createElement('script');
scriptElement.src=url+querystring;
// 此时还不能将其append到页面上
//5 将script标签放到页面中
document.body.appendChild(scriptElement);
//append过后页面会自动对这个地址发送请求,请求完成以后自动执行脚本 };
/*把jsonp放到全局*/
window.$jsonp=jsonp;
})(window,document);

缺点:只能支持GET请求而不能支持POST等其他http请求方式;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

优点:支持跨域,兼容性好。。。

跨域请求之jsonp的实现方式的更多相关文章

  1. 跨域请求之JSONP 一

    跨域请求之JSONP 一 跨域请求的方式有很多种, iframe document.domain window.name script XDomainRequest (IE8+) XMLHTTPReq ...

  2. js跨域请求(jsonp)

    jsonp是跨域请求的手段之一. jsonp的原理: 先来看看下面这段代码 <!DOCTYPE html> <html lang="en"> <hea ...

  3. JAVAEE——宜立方商城11:sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求(jsonp)

    1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...

  4. Ajax跨域请求数据实例(JSOPN方式)

    今天在做取消申请的时候遇到了一个跨域ajax提交的问题. 情景是: 系统A是asp.net的站点,其中包括一个取消申请的接口(get方式通过参数提交到系统的某一个页面,然后返回提交成功或失败) 系统B ...

  5. Ajax+Spring MVC实现跨域请求(JSONP)JSONP 跨域

    JSONP原理及实现 接下来,来实际模拟一个跨域请求的解决方案.后端为Spring MVC架构的,前端则通过Ajax进行跨域访问. 1.首先客户端需要注册一个callback(服务端通过该callba ...

  6. Django跨域请求之JSONP和CORS

    现在来新建一个Django项目server01,url配置为 url(r'^getData.html$',views.get_data) 其对应的视图函数为get_data: from django. ...

  7. Ajax+Spring MVC实现跨域请求(JSONP)(转)

    背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...

  8. 搞定所有的跨域请求问题 jsonp CORS

    网上各种跨域教程,各种实践,各种问答,除了简单的 jsonp 以外,很多说 CORS 的都是行不通的,老是缺那么一两个关键的配置.本文只想解决问题,所有的代码经过亲自实践.   本文解决跨域中的 ge ...

  9. Ajax+Spring MVC实现跨域请求(JSONP)

    背景: AJAX向后台(springmvc)发送请求,报错:已阻止交叉源请求:同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源.可 ...

随机推荐

  1. 写点C++ 学习记录 充数

    #include "stdafx.h" #include <cstdlib> #include <iostream> using namespace std ...

  2. vue路由组件传参

    在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 取代与 $route 的耦合 const ...

  3. part1:6-Linux文本编辑器vi

    vi编辑器简介: vi是Linux系统的第一个全屏幕交互式编辑器:vim则是vi的升级版得到广大用户青睐. vim有三种工作模式:命令行模式.插入模式.底行模式 命令行模式常用功能键: yy:复制当前 ...

  4. word-break:break-all; 和 word-wrap:break-word 换行

    word-break:break-all; 和 word-wrap:break-word;两种写法都是让英文句子在父级宽度不够的情况下换行. 两个属性都同样是让文字换行,但存在着细微的区别,大部分时候 ...

  5. vue移动端h5页面根据屏幕适配的四种方案

    最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...

  6. 情境领导II

    情境领导理论认为,领导者的行为要与被领导者的准备程度相适应,才能取得有效的领导效果,也就是说领导风格不是一成不变的,而要根据环境及员工的变化而改变. 三大技巧分别为诊断.弹性与约定领导型态.诊断是评估 ...

  7. 2018.10.15 bzoj4570: [Scoi2016]妖怪(凸包)

    传送门 不得不说这题有点东西啊. 看到题第一眼二分,用二次函数求范围来进行checkcheckcheck,20分滚粗了233. 于是开始思考正解. 发现可以把每只怪物的二元组属性看成二维坐标. 这时对 ...

  8. hdu-2955(01背包+逆向思维+审题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2955 思路:注意p和m[i]是被抓的概率,不能直接用,要转换为逃跑的概率,然后将得到的钱视为背包体积再 ...

  9. python私有公有属性

    python中,类内方法外的变量叫属性,类内方法内的变量叫字段.他们的私有公有访问方法类似. class C: __name="私有属性" def func(self): prin ...

  10. BUG_vector iterator not dereferencable

    1问题: bug提示图下图所示: