`

(zz)Javascript跨域访问JSONP原理

    博客分类:
  • Ajax
阅读更多
Jsonp原理:
首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的javascript代码,此时返回的json数据,作为参数,传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.(动态执行回调函数)
可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.

注意,jquey是不支持post方式跨域的.
为什么呢?
虽然采用post +动态生成iframe是可以达到post跨域的目的(有位js牛人就是这样把jquery1.2.5 打patch的),但这样做是一个比较极端的方式,不建议采用.
也可以说get方式的跨域是合法的,post方式从安全角度上,被认为是不合法的, 万不得已还是不要剑走偏锋..
client端跨域访问的需求看来也引起w3c的注意了,看资料说html5 WebSocket标准支持跨域的数据交换,应该也是一个将来可选的跨域数据交换的解决方案.
分享到:
评论

相关推荐

    跨域_jsonp_原理.js

    跨域_jsonp_原理,了解json的原理,等于我们掌握json的技术有帮助

    跨域访问解决方法-jsonp

    跨域访问是Web开发中一个常见的挑战,尤其是在进行Ajax异步请求时,浏览器的同源策略(Same-origin policy)会限制JavaScript从一个源获取另一个源的数据。为了解决这个问题,开发者通常采用JSONP(JSON with ...

    使用JSONP完成HTTP和HTTPS之间的跨域访问

    ### 使用JSONP完成HTTP和HTTPS之间的跨域访问 在现代Web开发中,跨域问题是一项常见挑战,尤其是在涉及不同协议(如HTTP与HTTPS)的数据交互时。本文将深入探讨如何利用JSONP(JSON with Padding)技术来实现HTTP与...

    ajax跨域请求jsonp前后台代码

    基于ajax方式的跨域请求jsonp的前后台代码

    03_跨域与JSONP

    03_跨域与JSONP

    jquery下利用jsonp跨域访问实现方法

    本篇文章将深入探讨JSONP的工作原理以及在jQuery下如何利用它来实现异步跨域提交表单。 ### JSONP简介 JSONP是一种解决跨域问题的技术,其核心思想是利用`&lt;script&gt;`标签不受同源策略限制的特性。当浏览器解析到`...

    解决跨域封装的jsonp.js文件

    解决跨域封装的jsonp

    Javascript跨域访问解决方案

    JavaScript跨域访问解决方案 在Web开发中,JavaScript的同源策略是浏览器为了保障用户安全而实施的一项重要机制。它限制了脚本只能访问与当前页面具有相同协议(如http或https)、主机名和端口号的资源。然而,在...

    javascript跨域访问的方法.pdf

    JavaScript跨域访问是Web开发中的常见挑战,由于浏览器的安全策略——同源策略,JavaScript通常只能访问与当前页面同源(协议、域名、端口都相同)的资源。然而,为了实现不同源之间的通信,开发者可以采取多种方法...

    跨域访问禁止以及使用JSONP实现跨域的示例

    JSONP是一种绕过同源策略的方法,其原理是利用`&lt;script&gt;`标签可以跨域加载资源的特性。JSONP的工作流程如下: 1. 客户端(浏览器)创建一个`&lt;script&gt;`元素,并设置其`src`属性为服务端的URL,该URL通常包含一个回调...

    js跨域jsonp的使用

    本文将深入讲解JSONP的原理及其在解决跨域问题中的应用。 ### JSONP 原理 JSONP 的全称是“JSON with Padding”,它并非一种新的数据格式,而是利用了 `&lt;script&gt;` 标签不受同源策略限制的特点来绕过浏览器的跨域...

    06课 跨域、jsonp与cors.rar

    JSONP的工作原理是,服务端提供一个动态生成的JavaScript文件,这个文件包含一个函数调用,函数名由客户端指定,并且函数参数是需要传递的数据。当客户端加载这个JavaScript文件时,实际上就是在执行这个函数,从而...

    jsonp原理.txt

    ### JSONP原理详解 #### 一、什么是JSONP? JSONP(JSON with Padding)是一种用于解决浏览器同源策略限制的方法,允许网页从不同域名的服务器上加载数据。它利用了`&lt;script&gt;`标签不受同源策略限制的特点来实现...

    javascript跨域访问的方法.docx

    JavaScript跨域访问是Web开发中常见的一种挑战,由于浏览器的同源策略限制,一个域上的脚本不能直接获取或操作另一个域上的资源。为了解决这个问题,开发者通常采用以下三种主要方法:1. 基于iframe实现跨域2. JSONP...

    Ajax + Servlet 跨域访问(Jsonp技术)

    **Ajax + Servlet 跨域访问 (Jsonp技术)** 在Web开发中,浏览器的同源策略(Same-origin policy)限制了JavaScript对不同源(协议、域名、端口)的资源进行请求,这在一定程度上保障了安全性。然而,随着Web应用的...

    JSONP实现Ajax跨域访问

    ### JSONP实现Ajax跨域访问 #### 一、引言 JSONP(JSON with Padding)是一种用于解决跨域数据访问的技术。由于同源策略(Same-Origin Policy)的存在,JavaScript/Ajax只能请求同源的资源,这给需要跨域访问数据...

    跨域jsonp资料包.zip

    在这个"跨域jsonp资料包.zip"中,我们可以深入探讨JSONP的工作原理、应用场景、优缺点以及相关的实现方法。 ### JSONP 的工作原理 1. **同源策略**:浏览器的同源策略限制了JavaScript只能访问与当前页面同源...

    CH2.Ajax 框架 支持加密(Base64/DES)和跨域(Jsonp)

    CH2.Ajax 框架 支持简单加密(Base64/DES)和跨域(Jsonp) 如何以最快捷的方式直接调用服务器方法? 场景: 比如,服务器已有如下方法: namespace CH2 { class BLL{ User Login(string name,string ...

    Ajax跨域请求解决方案-JSONP

    本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域问题。 首先,理解JSONP的基本概念。JSONP是一种非官方的数据交换格式,它的核心思想是利用HTML中的`&lt;script&gt;`标签不受同源策略...

Global site tag (gtag.js) - Google Analytics