`

html5前端常用的jsonp,web的json的区别与原理

 
阅读更多

json 和 jsonp的区别:

 

    web开发中常要用到ajax来解决向服务端异步请求动态数据,数据传递方式有2种:json和xml。其中json到目前为止被推崇或者说是首选的数据传递方案。但是json不能解决跨域的问题(json只能请求服务器本地上的资源,如服务器在192.168.1.12上,那么json只能请求192.168.1.12服务器上的资源,至于远程请求其他服务器的资源,就办不到了)。jsonp能解决这个跨域问题。

 

 Jsonp是如何产生的:

 

   1、ajax直接请求普通文件存在跨域或无权访问的问题,无论是静态页面,动态页面,web服务还是wcf服务,只要存在跨域请求,一律不准。

 

  2、web页面上调用js文件时则不受是否跨域的影响(即只是带有"src"这个属性的标签都能请求跨域的资源。如<script>,<img>,<a>,<iframe>等)

 

  3、当客户端向服务端发送请求了,服务端要把数据装进js格式的文件里(文件的后缀名为json),供客户端调用和进一步处理;

 

  4、  客户端拿到js格式的文件后,分析js处理json数据并展示

 

  5、为了方便于客户端跨域向服务端请求数据,慢慢形成了一种非正式传输协议(允许客户端传递一个callback参数给服务端,服务器会把这个callback参数的值作为回调函数名来处理JSON数据),这样客户端就可以随意定制自己的函数来自动处理返回数据了。

  (未完成,待续)

分享到:
评论

相关推荐

    使用Jsonp方式跨域获取json

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

    web前端跨域取JSON

    在Web开发中,"跨域取JSON"是一个重要的概念,特别是在前端开发中。"跨域"是指一个域名下的网页尝试访问另一个域名下的资源时,由于浏览器的安全策略限制,这种行为通常会被禁止,这就是所谓的同源策略(Same-origin...

    96道web前端面试题.pdf

    JSONP 是一种常用的解决方法,它的原理是动态插入 script 标签,通过 script 标签引入一个 js 文件,这个 js 文件载入成功后会执行我们在 url 参数中指定的函数,并且会把我们需要的 json 数据作为参数传入。...

    Ajax跨域请求解决方案-JSONP

    JSONP就是将JSON数据包裹在一个JavaScript函数调用中,这样返回的数据就能被前端的JavaScript代码处理。 在ASP.NET中实现JSONP,需要以下几个步骤: 1. **客户端设置**: - 使用jQuery或其他库的Ajax方法,通过`...

    江西省省市地图js和json文件

    标题中的“江西省省市地图js和json文件”表明这是一个与地理信息相关的项目,使用了JavaScript(js)和JSON数据格式来展示江西省内各个城市的地图。在Web开发中,这样的地图通常会利用可视化库,如ECharts,来实现...

    JSONP原理及简单实现

    在Web2.0时代,AJAX是前端开发中不可或缺的技术,然而出于安全考虑,浏览器对跨域请求进行了限制。在同源策略的限制下,浏览器只允许与自己域内的服务器进行AJAX通信。这意味着,如果JavaScript试图从别的域加载数据...

    jsonp 简单示例

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

    JSon转换Sturs2的AJAX的应用

    在Web开发中,JSON常用于客户端与服务器之间的数据交互,特别是在AJAX(Asynchronous JavaScript and XML)应用中。 AJAX允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容,极大地提升了...

    jsonp格式前端发送和后台接受写法的代码详解.docx

    #### 四、JSONP与JSON的区别 - **JSON**:一种轻量级的数据交换格式,通常用于服务器与客户端之间传输数据。 - **JSONP**:不是一种标准的数据格式,而是一种使用JSON数据格式的技巧,用于解决跨域问题。 #### 五、...

    ajax跨域访问WCP搜索,返回JSON数据

    JSONP的工作原理是利用`&lt;script&gt;`标签不受同源策略限制的特点,通过动态创建`&lt;script&gt;`标签并指定其src属性为服务端的URL,该URL会返回一个JavaScript函数调用,并将JSON数据作为参数传递。例如,前端可能会定义一个...

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

    标题中的“jsonp解决跨域”指的是JavaScript对象标记协议(JSON with Padding,简称jsonp)这一跨域数据交互协议,它是Web应用程序中广泛使用的一种解决同源策略限制的技术。同源策略是浏览器为了安全而实施的一项...

    全面解析Ajax和jsonp使用总结

    Ajax和jsonp是Web开发中用于实现前后端数据交互的两种技术。它们能够在不刷新整个页面的情况下,从前端向服务器发送请求并获取数据,实现页面的局部更新,显著提升用户体验。下面将详细介绍这两项技术,并通过实例...

    【前端-PC】html vue.js 跨域.zip

    为了解决这个问题,开发者可以采用几种方法,如JSONP(JSON with Padding)、CORS(Cross-Origin Resource Sharing)或者代理服务器。JSONP通过动态插入`&lt;script&gt;`标签来规避同源策略,适用于只支持GET请求的情况;...

    jsonpajax跨域请求

    在Web开发中,由于浏览器的同源策略限制,JavaScript不能直接向其他域名发送请求,但JSONP和AJAX通过特定的方式绕过了这个限制,使得前端能够获取到不同源的数据。 1. JSONP介绍: JSONP是一种非官方的跨域数据...

    详解JSON和JSONP劫持以及解决方法

    在这篇文章中,将详细介绍JSON和JSONP劫持的原理、攻击方式以及有效的解决方法。 首先,了解JSON劫持,也就是JSON Hijacking。这种攻击方式类似于CSRF(跨站请求伪造),但其目的在于获取敏感数据。在JSON劫持中,...

    基于JSONP交互的模拟12306站点毕业设计

    总的来说,这个毕业设计项目涵盖了前端和后端开发的关键技术,通过JSONP实现了跨域数据交换,为学生提供了一个实践Web应用开发的平台,同时也要求对Java、HTML、JavaScript和跨域通信有深入的理解。

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

    在现代Web开发中,跨域问题一直是前端开发者面临的一个常见难题。简单来说,由于浏览器的同源策略限制,当一个网页尝试从不同的源(即不同的协议、端口或域名)加载资源时,就会出现跨域问题。而JSONP(JSON with ...

    前端面试题(2019).docx

    - **JSONP**: JSONP(JSON with Padding)是一种跨域数据交互协议,主要利用`&lt;script&gt;`标签没有跨域限制的特点,通过动态创建`&lt;script&gt;`标签来实现跨域请求。 - **CORS (跨源资源共享)**: 在服务器端通过设置HTTP...

    Ajax框架的相关学习资料和json

    3. **安全性**:理解JSONP(JSON with Padding)的工作原理,它是跨域数据交换的一种方式,但存在安全风险。 4. **JSON与其他格式比较**:对比JSON与XML的优缺点,理解为什么JSON在Web开发中更受欢迎。 5. **JSON ...

    js+jsp+json+tomcat跨域访问

    在IT行业中,跨域访问是Web开发中一个重要的概念,特别是在使用JavaScript、JSP、JSON以及前端库如jQuery时。本教程将详细讲解如何利用这些技术实现跨域数据交互。 首先,我们需要理解“跨域”这个术语。在浏览器的...

Global site tag (gtag.js) - Google Analytics