`

jsonp与跨域请求

阅读更多

    同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。

 

  由于同源策略,我们在使用ajax请求资源时不能跨域请求,也就是说必须是同一个域名,协议,端口。但我们在开发的时候经常会需要请求到其他服务器(跨域)的数据,其中一种方法就是jsonp。

 

  另外提一下,一般都是使用json这种数据格式来传递数据,因为javascript原生支持json格式,所以使用起来很方便。不要把json和jsonp混淆了,他们根本不是一个次元的东西!!!比如说两个中国人进行对话,json就是汉语(具体内容),而jsonp就是两个人交流的方式(用嘴)。

 

【什么是jsonp?】 

  我们都知道script标签是可以跨域请求的,例如我们引入jquery.js的时候经常使用cdn上的资源,并没有把jquery.js这个文件真正地下载到自己的服务器上。那么利用script可以跨域请求的特性,我们就能请求其他服务器的资源。这种技术也就是所谓的jsonp。多说无益,下面是一个简单的实例,看了之后相信你就能对jsonp的原理有了理解。  

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<script>
    var demo1 = function (data) {
        alert("我是后台通过jsonp传来的数据:" + data.name);
    }
</script>
<script src="http://远程服务器域名或ip地址/jsonp/jsonp.js"></script>  
<!--这里为了保护我的服务器不受攻击,就不放出我的服务器地址啦-->
</body>
</html>

 

  请求的服务器下面有对应的jsonp.js(名字自己起,不一定是jsonp.js)这个文件,里面的代码如下:

demo1({"name": "lin"}); /*在远程服务器上的js代码,
也就是说该服务器上的数据我们都可以传入函数,那么html执行的时候也就获取到了这些远程数据*/

 

    html文件渲染如下,可见远程服务器的数据已经被请求过来:

       工作流程解析:我们先在html定义了demo1这个函数,然后引入远程jsonp.js文件,该js文件执行html定义的demo1函数(执行时传入的参数就是想要传递的数据)。这样html也就变相的获取到了远程服务器的数据。

   总结:script标签也就是一个简单的get请求,服务器处理该get请求,返回一个函数,传入该函数的参数也就是客户端希望获得的数据。其实不只是script可以跨域请求,只要有src属性的标签都可以借助同样的原理进行跨域请求,例如img, iframe

 

.

分享到:
评论

相关推荐

    PHP AJAX JSONP实现跨域请求使用范例_ajax如何解决跨域请求

    JSONP(JSON with Padding)是一种解决跨域请求的方法,即在客户端通过 script 标签请求服务器端的数据,然后服务器端将数据以 JSON 格式返回,并在返回数据中包含一个回调函数,以便客户端可以将数据处理。...

    html通过 ajax jsonp跨域请求接收和传送数据

    **AJAX和JSONP跨域请求的实现过程** 1. **AJAX跨域**: 通常,AJAX请求受到同源策略限制。为实现跨域,我们可以使用CORS(Cross-Origin Resource Sharing)机制。服务器需要在响应头中添加`Access-Control-Allow-...

    jsonpajax跨域请求

    "jsonp跨域请求"可能是服务器返回的示例数据,模拟了JSONP的跨域请求过程。 总结,JSONP和CORS是解决JavaScript跨域问题的两种主要方法,它们各有优缺点,适用于不同的场景。JSONP简单易用,但安全性较低;CORS则更...

    jsonp解决跨域.docx

    JsonP(JSON with Padding)是一种常用的解决跨域请求的技术。在本文中,我们将详细介绍 JsonP 的原理、作用、优缺点和使用场景。 1. 什么是跨域? 跨域是指在不同域名或端口号之间的请求调用。例如,...

    ajax跨域请求jsonp前后台代码

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

    JSONP解决跨域问题

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`&lt;script&gt;`标签可以跨域请求资源的特性,为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中,前端使用...

    利用JQuery jsonp实现Ajax跨域请求json数据

    本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...

    ajax跨域CORS方案 JSONP跨域请求方案.zip

    JSONP是早期解决跨域问题的手段,适用于只支持GET请求的情况。它的原理是利用HTML的`&lt;script&gt;`标签不受同源策略限制的特性,通过动态创建`&lt;script&gt;`标签来加载服务器返回的JavaScript代码,这个代码通常是一个函数...

    jsonp跨域请求数据实现手机号码查询实例分析.docx

    ### JSONP 跨域请求数据实现手机号码查询实例分析 #### 前言 在现代Web开发中,跨域问题一直是前端开发者面临的一个常见难题。简单来说,由于浏览器的同源策略限制,当一个网页尝试从不同的源(即不同的协议、端口...

    使用Jsonp方式跨域获取json

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`&lt;script&gt;`标签可以跨域请求资源的特性来实现数据的交换。在Web开发中,由于浏览器的同源策略限制,JavaScript通常无法直接访问不同源的资源,但JSONP...

    Ajax跨域请求解决方案-JSONP

    然而,Ajax技术在实现动态网页交互时常常需要跨越这个限制,这时就引入了JSONP(JSON with Padding)作为跨域请求的一种解决方案。本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域...

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

    在两个Tomcat服务器之间进行跨域访问演示,我们可以设置CORS(Cross-Origin Resource Sharing)头信息,允许特定的跨域请求。在Tomcat的配置文件(如server.xml)中,我们可以通过添加过滤器或在Servlet中设置响应头...

    jsonp跨域请求

    JSONP(JSON with Padding)是一种常见的解决JavaScript跨域问题的技术。由于浏览器的同源策略限制,JavaScript通常不能向不同源的服务器...了解和掌握JSONP有助于理解跨域请求的原理,为解决实际问题提供更多的选择。

    jsonp解决跨域_js_方案_web_跨域_

    CORS通过设置服务器的Access-Control-Allow-Origin等响应头,允许特定的跨域请求。代理服务器则是在服务器端设置一个中间层,转发客户端请求,从而绕过同源策略。 总结来说,jsonp是早期解决Web跨域问题的一种方法...

    jsonp跨域请求实现示例

    JSONP(JSON with Padding)是一种解决跨域请求的方法,主要用于解决不同域之间因浏览器同源策略限制而无法进行AJAX请求的问题。在AJAX请求中,浏览器的同源策略限制了与当前页面不同域的服务器进行数据交互,而...

    跨域访问解决方法-jsonp

    由于浏览器允许不同源的`&lt;script&gt;`标签加载和执行,开发者可以利用这一点来实现跨域请求。 ### JSONP工作原理 1. **客户端(浏览器)**:在JavaScript中,我们创建一个`&lt;script&gt;`元素,并设置其`src`属性为服务器...

    jsonp和跨域1

    这一策略主要是出于安全考虑,防止恶意脚本通过跨域请求窃取数据。 1.1.1 伪静态实现 伪静态是一种技术手段,用于使动态页面看起来像静态HTML页面,以利于搜索引擎抓取和收录。这样做是因为搜索引擎通常更偏好静态...

    轻松搞定jQuery+JSONP跨域请求的解决方案

    需要注意的是,虽然JSONP提供了一种灵活的跨域请求解决方案,但它也有一些局限性和安全风险。例如,JSONP允许执行任意的JavaScript代码,如果服务器端的输出没有经过严格验证和清洗,可能会导致跨站脚本攻击(XSS)...

    ajax跨域请求

    同时,通过获取`jsonpCallback`参数并将其与JSON数据一起包装成一个函数调用的形式返回给客户端,从而实现JSONP的跨域请求。 ```java @RequestMapping("/selectApplyPeoples") public void insertScore...

    第25周-第06章节-Python3.5-JSONP跨域请求jQuery方式.avi

    第25周-第06章节-Python3.5-JSONP跨域请求jQuery方式.avi

Global site tag (gtag.js) - Google Analytics