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

  1. (function(){
  2. $jsonp(//地址
  3. 'http://api.douban.com/v2/movie/in_theaters',
  4. //传递的参数
  5. {
  6. count:10,start:5
  7. },
  8. //回调函数
  9. function(data){
  10. document.getElementById('result').innerHTML=JSON.stringify(data);
  11. }
  12. );
  13. })();
  14.  
  15. (function(window,document){
  16. 'use strict';
  17. var jsonp=function(url,data,callback){
  18. //1 挂载回调函数
  19. var fnSuffix=Math.random().toString().replace('.','');
  20. var cbFuncName='my_json_cb_'+fnSuffix;
  21. //将函数挂载在全局环境的方式不推荐 使用cbs.my_json_cb_
  22. window[cbFuncName]=callback;
  23. //2 将data转化成url字符串的形式
  24. // {id:1,name:'zhangsan'} =>id=1&name=zhangsan
  25. var querystring=url.indexOf('?')==-1?'?':'&';
  26. for(var key in data){
  27. querystring+=key+'='+data[key]+'&';
  28. // id= 1 &
  29. }
  30. //querystring=?id=1&name=zhangsan&
  31. //3 处理url地址中的回调参数
  32. //url+=callback=sdfsfdg
  33. querystring+='callback='+cbFuncName;
  34. //querystring=?id=1&name=zhangsan&cb=my_json_cb_0231241
  35. //4 创建一个script的标签
  36. var scriptElement=document.createElement('script');
  37. scriptElement.src=url+querystring;
  38. // 此时还不能将其append到页面上
  39. //5 将script标签放到页面中
  40. document.body.appendChild(scriptElement);
  41. //append过后页面会自动对这个地址发送请求,请求完成以后自动执行脚本
  42.  
  43. };
  44. /*把jsonp放到全局*/
  45. window.$jsonp=jsonp;
  46. })(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. 【Unity】2.3 项目浏览器和资源的组织

    分类:Unity.C#.VS2015 创建日期:2016-03-29 一.Project-工程浏览器 前面我们说过,Unity中的Project View(称为工程浏览器)相当于VS2015中的解决方 ...

  2. 如何更改myecelipse、eclipse的Project Explorer的背景颜色

    这个是我研究了很久发现的,因为myecelipse.eclipse本身是随着系统的颜色改变而改变的,windows系统都会随着系统改变而改变的,所以找了很多资料都没能改变它的背景色,今天发现了一个不错 ...

  3. 进度条ProgressBar

    在本节中,作者只写出了进度条的各种样式,包括圆形.条形,还有自定义的条形,我想如果能让条形进度条走满后再继续从零开始,于是我加入了一个条件语句.作者的代码中需要学习的是handler在主线程和子线程中 ...

  4. 开源投影工具Proj——进行坐标转换

    proj.4 is a standard UNIX filter function which converts geographic longitude and latitude coordinat ...

  5. C++中的inline声明

    C++中的inline声明 1. inline函数(摘自C++ Primer的第三版) 在函数声明或定义中函数返回类型前加上关键字inline即把函数指定为内联函数. inline int min(i ...

  6. DagScheduler 和 TaskScheduler

    DagScheduler 和 TaskScheduler 的任务交接 spark 调度器分为两个部分, 一个是 DagScheduler, 一个是 TaskScheduler, DagSchedule ...

  7. 用idea简单创建web项目——两种方式

    最近同学让我教她们用idea创建web项目,于是我用两种方式创建web项目,并整理截图给她们看,一种是用maven创建,一种是不用maven创建,适合菜鸟哈哈~ 方法一:不用maven 1.解压tom ...

  8. SQL Server 2008 清空删除日志文件(瞬间日志变几M)

    sql 在使用中每次查询都会生成日志,但是如果你长久不去清理,可能整个硬都堆满哦,笔者就遇到这样的情况,直接网站后台都进不去了.下面我们一起来学习一下如何清理这个日志吧 SQL2008清空删除日志: ...

  9. [leetcode] 21. Implement strStr()

    这个题目是典型的KMP算法,当然也可以试试BM,当然有关KMP和BM的介绍阮一峰曾经写过比较好的科普,然后july也有讲解,不过那个太长了. 先放题目吧: Implement strStr(). Re ...

  10. Android 显示确认对话框

      AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setTitle("你确定要退出吗?" ...