`
sha851092391
  • 浏览: 73737 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

简述 JSONP

阅读更多
JSONP其实和Ajax的技术一样都不是什么新东西,而是多种技术的灵活运用而已,都知道Ajax请求是不能跨域的,如果想跨域请求的话该怎么办呢,其实可以使用别的方法来实现解决Ajax的跨域问题?
方案一:使用iframe来解决Ajax跨域问题。
方案二:使用JSONP方式解决Ajax跨域问题。
方案三:使用反向代理

方案一是使用一个ifram元素来加载远程的数据,在iframe的onload设置回调方法,数据加载完毕之后就使用JS处理返回的数据。

方案二其实是使用<script/>标签来实现的,首先页面的js在<head/>标签里面创建一个<script/>元素,src属性的值就是你请求的url,服务器返回的内容就有些特别了,这就是JSONP关键的所在,一般包含两个部分,一部分是返回的json格式的数据,另一部分其实是页面的回调方法,例如:
var data={message:"Hello World!"};  //返回数据
callback(data);  //客户端页面的回调方法

咦,这不就是JavaScript的代码吗?没错,其实JSONP只是一种解决方案,并不是什么新技术。
当数据加载完毕之后,就会调用callback方法,这样子就实现了跨域的请求了。
到这里你应该会知道为什么JSONP请求的url格式是url?callback=?这种形式了,其实这样只是为了根据客户端动态设置回调方法而已,没什么新奇的。

方案三使用反向代理,用户是先请求同域的服务器,然后跨域的操作就交给服务器了,服务器就会去请求你指定的url,然后服务器将请求的数据返回到本域的客户端,这样子也可以解决跨域的问题; (A域)客户-->(A域)服务器-->(B域)服务器,在这次请求中A域服务器其实是B域服务器的一个客户端。

如果有那些地方说的有误的话,请大家多多指点。

1
0
分享到:
评论
2 楼 sha851092391 2011-12-18  
grandboy 写道
方案一很多浏览器还是不允许。第二种方案又感觉太繁琐。有的时候就干脆用apache的反向代理搞到一个域里来。

一般情况下,反向代理也ok,当涉及到需要读取cookie信息的话就有点难度了。
1 楼 grandboy 2011-12-17  
方案一很多浏览器还是不允许。第二种方案又感觉太繁琐。有的时候就干脆用apache的反向代理搞到一个域里来。

相关推荐

    15天学会jQuery 15天学会jQuery

    - JSONP和跨域:介绍JSONP的工作原理,解决跨域问题。 第六天:jQuery插件 - 插件使用:了解如何引入和使用第三方jQuery插件,如Bootstrap、jQuery UI等。 - 创建插件:初步学习编写自定义jQuery插件,提升代码复用...

    Wechat-Js-sdk-Server-Interface:微信JS-SDK签名权限与openid用户信息查询接口 php

    功能简述 [Function Description] 支持全局缓存,access_token与jsapi_ticket 支持jsonp的调用(调用时须带callback参数) 通过分享页面Link的传入,实现为一个微信公众号提供所有JS-SDK分享签名 支持openid查询用户...

    AJAX应用开发综合案例

    10. **安全性**:简述AJAX应用可能面临的安全问题,如XSS(跨站脚本攻击)和CSRF(跨站请求伪造)等,并给出相应的防护措施。 总的来说,这个综合案例旨在帮助开发者全面理解AJAX技术,并具备使用AJAX构建高效、...

    Ajax与Atlas开发系列课程1,2

    6. **跨域问题**:介绍同源策略及其对Ajax请求的影响,以及如何通过JSONP或CORS解决跨域问题。 在“Ajax与Atlas开发系列课程(2):Ajax开发介绍”中,我们将进一步探讨Ajax的实际应用,特别是微软的Atlas框架,它是...

    javascript中文参考手册

    11. **跨域问题和安全**:介绍同源策略、CORS、JSONP等解决跨域问题的方法,以及关于XSS和CSRF等安全问题的防范措施。 12. **Node.js环境下的JavaScript**:简述如何在服务器端使用JavaScript,包括模块系统、文件...

    Javascript 手册(CHM格式)(程序员必备)

    11. **框架和库**:简述React、Vue、Angular等流行框架的基本概念和用法,以及jQuery等库的功能。 12. **安全性**:讲解JavaScript中的XSS和CSRF攻击,以及防止这些攻击的策略。 13. **跨域通信**:CORS、JSONP、...

    Ajax与PHP基础教程.rar

    2. **AJAX库与框架**:简述jQuery和其他流行库(如Prototype、Dojo)如何简化Ajax开发。 3. **跨域问题与解决方案**:探讨Ajax的同源策略限制及JSONP、CORS等跨域解决方案。 ### 第五章 - PHP与Ajax结合 1. **创建...

    Java工程师面试宝典

    - **项目背景介绍**:简述项目的初衷、目标用户及解决的问题。 - **项目架构**:描述使用的架构模式和技术栈。 - **提供的服务与功能**:列举主要功能模块。 - **核心模块实现思路**:具体的技术实现细节。 - **大...

    FE21-JS-DAY4-Renata-Richard

    13. **前端框架预览**:可能简述React、Vue或Angular等主流框架的基本概念,作为JavaScript应用开发的高级话题。 通过这个课程,学员将能够提升JavaScript编程能力,理解JavaScript与HTML的协作机制,为构建动态、...

    php main 与 iframe 相互通讯类(js+php同域/跨域)

    1. 使用JSONP(JSON with Padding)技术,通过动态创建script标签的方式发送请求。 2. 利用window.name的特性,在不同的域之间传递信息。 3. 使用HTML5的window.postMessage方法实现安全的跨域通讯。 4. 通过创建...

    阿里前端面试第三期.pdf

    - JSONP、CORS、代理服务器等。 25. instanceof的实现原理: - 判断一个对象是否是某个构造函数的实例。 26. React组件的生命周期: - 包括挂载、更新和卸载过程中的生命周期方法。 27. Flux思想: - 是一种...

    python入门到高级全栈工程师培训 第3期 附课件代码

    python入门到高级全栈工程师培训视频学习资料;本资料仅用于学习,请查看后24小时之内删除。 【课程内容】 第1章 01 计算机发展史 02 计算机系统 03 小结 04 数据的概念 ...16 Model操作之select_related以及...

Global site tag (gtag.js) - Google Analytics