1、JSONP的作用

由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为

了实现跨域请求,可以通过script标签实现跨域请求,然后再服务器端输出JSON数据并执行回调函

数,从而解决了跨域的数据请求。

JSONP协议的一个要点:允许用户传递一个callback参数给服务器端,然后服务器端返回数据时

会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自

动处理返回函数了。

2、如何使用JSONP?

在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务器返回的相

应数据并动态执行回调函数

JSONP原理:

(1)首先在客户端注册一个callback,然后把callback的名字传给服务器、此时,服务器先生成

json数据

(2)然后以javascript语法的方式,放置到function中,function名字就是传递上来的参数jsonp

(3)最后将json数据直接以入参的方式,放置到function中中,这样就生成了一段js语法的文档,

返回给客户端。

eg.

<script type="text/javascript">
function jsonCallback(result){
for(var i in result){
alert(i+":"+result[i]);
}
}
var JSONP = document.createElement("script");
JSONP.type = "text/javascript";
JSONP.src = "http://crossdomain/services.php?callback=jsnopCallback";
document.getElementByTagName("head")[0].appendChild(JSONP);
</script> //或者
<script type="text/javascript" src="http://crossdomain/services.php?callback=jsnopCallback"></script>

JSONP(跨域请求) —— 一种非官方跨域数据交互协议的更多相关文章

  1. JSONP -- 跨域数据交互协议

    一.概念 ①传统Ajax:交互的数据格式——自定义字符串或XML描述: 跨域——通过服务器端代理解决. ②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域. ③JSON:一种数据交换格式 ...

  2. javascript 跨域请求详细分析(终极跨域解决办法)

    自从我接触前端以来,接手的项目里面很大部分都是前后端分离的,后端只提供接口,前端根据后端接口渲染出实际页面.个人觉得这是一个挺好的模式,前后端各自负责各自的模块,分工明确,而且也给前端更大的发挥空间. ...

  3. Ajax跨域请求附带Cookie/Ajax跨域请求附带身份凭证

    一.跨域请求中默认不带cookie等验证凭证 尤其对于post请求. 对于ajax请求,其中post,get都可以正常访问. withCredentials: false, // 允许携带cookie ...

  4. CSRF跨站请求伪造与XSS跨域脚本攻击讨论

    今天和朋友讨论网站安全问题,聊到了csrf和xss,刚开始对两者不是神明白,经过查阅与讨论,整理了如下资料,与大家分享. CSRF(Cross-site request forgery):跨站请求伪造 ...

  5. java 后台实现ajax post跨域请求传递json格式数据获取json数据问题

    参考大神:http://blog.csdn.net/chunqiuwei/article/details/19924821 java后台: public String ajaxProxy(Intege ...

  6. 关于试用jquery的jsonp实现ajax跨域请求数据的问题

    我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...

  7. JSON和JSONP有哪些区别,PhoneGap跨域请求如何实现

    前言 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socke ...

  8. Ajax的跨域请求——JSONP的使用

    一.什么叫跨域 域当然是别的服务器 (说白点就是去别服务器上取东西) 只要协议.域名.端口有任何一个不同,都被当作是不同的域. 总而言之,同源策略规定,浏览器的ajax只能访问跟它的HTML页面同源( ...

  9. 使用Jsonp实现跨域请求

    来自百度百科的一段话: JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.exampl ...

随机推荐

  1. 详解Android ActionBar之二:ActionBar添加Tabs标签和下拉导航

    本节主要讲解ActionBar如何添加Tabs标签和下拉导航. 一.添加标签 Tabs 在ActionBar中实现标签页可以实现android.app.ActionBar.TabListener ,重 ...

  2. 查看Linux主机CPU及内存信息

    查看CPU信息(型号)  # cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c        8  Intel(R) Xeon(R) CPU ...

  3. iOS开发——新特性Swift篇&Swift 2.0 异常处理

    Swift 2.0 异常处理 WWDC 2015 宣布了新的 Swift 2.0. 这次重大更新给 Swift 提供了新的异常处理方法.这篇文章会主要围绕这个方面进行讨论. 如何建造异常类型? 在 i ...

  4. 文件和目录之umask函数

    本篇博文内容摘自<UNIX环境高级编程>(第二版),仅作个人学习记录所用.关于本书可参考:http://www.apuebook.com/. umask函数为进程设置文件模式创建屏蔽字,并 ...

  5. Java Annotations: Explored & Explained--转载

    原文地址:http://www.javacodegeeks.com/2012/08/java-annotations-explored-explained.html One of the many w ...

  6. JQuery实现页面Loading效果

    第一步:添加遮罩层和LOADING层 <div class="overlay"></div><div id="AjaxLoading&quo ...

  7. php笔记03:布尔类型,字符串,浮点数

    1.布尔类型 下面情况都是看出false: 布尔类型FALSE自身 整型值为0 浮点型值为0.0 空字符串,以及字符串"0" 不包含任何元素的数组 不包含任何成员变量的对象(仅PH ...

  8. JS 笔记

    如何定义一个函数呢?基本语法如下: function 函数名() {      函数代码; } 说明: 1. function定义函数的关键字. 2. "函数名"你为函数取的名字. ...

  9. JAVA_Reflection

    package com.qf.reflection; import java.lang.reflect.Constructor; import java.lang.reflect.Field; imp ...

  10. oracle学习总结5(游标、触发器、过程、方法)

    1:捕获plsql抛出的异常 declarev_ename emp.ename%type;beginselect ename into v_ename from emp where empno=10; ...