初步了解JSONP

一、JSON 与 JSONP

JSON是一种基于文本的数据交换方式(数据描述格式),JSONP是一种非官方跨域数据交互协议。

ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

二、为什么要用JSONP

Ajax直接请求普通文件是跨域无权限访问的,但是Web页面上调用js文件时则不受是否跨域影响,于是服务端可以将数据装进JS文件传输回来。jQuery支持JSONP。

方式:用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

三、DEMO

JQUERY

$.ajax({
             type: "get",
             async: false,//true为异步请求(默认)。false为同步请求,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
             url: "",
             data:{},//发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
             dataType: "jsonp",//预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断.使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
             jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
             jsonpCallback:"",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据,(如果没设置,服务器可以用$_GET[‘callback‘]取到jquery默认生成的随机函数名)
             success: function(data){//请求成功后的回调函数。
                console.log(data);
             },
             error: function(msg){//请求失败时调用此函数。
                 console.log(msg);
             }
         });

  

PHP

		 function jsonp($json)
		{
			$callback = isset($_GET[‘callback‘]) ? $_GET[‘callback‘] : $_POST[‘callback‘];
			if (!preg_match(‘|^[0-9a-zA-Z_]+$|‘,$callback))exit(‘callback invalid‘);

			if (is_array($json))
			{
				$json = json_encode($json);
			}

			echo $callback.‘(‘.$json.‘);‘;
			exit;
		}
		jsonp(array(‘ret‘=>0));

  

时间: 2024-10-05 18:34:03

初步了解JSONP的相关文章

对于Jsonp的初步理解

大家应该都听说过,Jsonp是实现“跨域”的一种解决方案. 那么,我们要先从跨域说起,什么叫做跨域呢?我觉得百度到的解释都不够精确,从当前站点发往不同站点(协议.域名.端口任意一个或多个不同)的请求叫做跨域,同样对于被请求方,来自不同站点(与当前站点所对应的协议.域名.端口任意一个或多个不同)的请求就叫做跨域请求,我觉得这里只强调了不同站点,却忽略了“请求”的类型. 其实,发自脚本或其它非浏览器发出的跨域请求发生跨域,才能叫做跨域,比如js代码中跨域发出的xmlhttprequest请求,而浏览

用jsonp实现搜索框功能的实现

用jsonp实现搜索框功能的实现 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面的方法并不能获取到我想要的效果.无奈前几天电脑换系统,把之前的源码丢了(前面有个不好的习惯就是把最近在做的东西放桌面).今天想彻底把这个问题搞明白. 用jquery和ajax进行初步的尝试: (本代码是参考慕课网,搜索框制作视频制作,有关具体详情请参考视频.自己之前的代码找不到了,之前最先的想

原生jsonp跨域

<script> // jsonp跨域原生写法 var script = document.createElement('script'); script.src = 'http://192.168.7.16/kuayu/test02.php?callback=aa'; document.body.appendChild(script); //aa('后台数据') function aa(res) { alert(res.website); } </script>

跨域cors方法(jsonp,document.domain,document.name)及iframe性质

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

jsonp跨域

1 (function(window, document, undefined) { 2 'use strict'; 3 var jsonp = function(url, data, callback) { 4 var fnSuffix = Math.random().toString().replace('.', ''); 5 var cbFuncName = 'my_json_' + fnSuffix; 6 window[cbFuncName] = callback; 7 var quer

jsonp

由于浏览器中的同源策略,不同的域名,不同的协议,甚至不同的端口都无法请求数据.因此出现了浏览器跨域请求数据问题. Jsonp是解决跨域问题的一个非常流行的方法. JSONP(JSON with Padding),其实就是被包裹在函数调用中的JSON. callback({"name": "Kate"}); 1. JSONP原理 通过script标签进行跨域操作,载入的请求js文件中的内容会执行我们在url中指定的函数,并且,传入的参数,就是我们请求的数据. 2. J

JSON JSONP ajax

JSON 是一种数据格式 不是数据类型 也不是编程语言  JSON: JavaScript对象表示法 (JavaScript Object  Nonation)  与XML类似 比xml更小 更快 更易解析 JSONP :JSON+Padding (内填充)   把JSON当作内容添加到一个盒子里    用于 跨域              callback参数 什么是JSONP 首先提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中.JSON格式数据的编码

初步了解CPU

了解CPU By JackKing_defier 首先说明一下,本文内容主要是简单说明CPU的大致原理,所需要的前提知识我会提出,但是由于篇幅我不会再详细讲解需要的其他基础知识.默认学过工科基础课. 一.总述 先从计算机的结构说起,在现代计算机中,CPU是核心,常常被比喻为人的大脑.现在的计算机都为“冯·诺依曼机”,“冯诺依曼机”的一个显著的特点就是由运算器.存储器.控制器.输入设备和输出设备组成.CPU是运算器和控制器合起来的统称,因为运算器和控制器在逻辑关系和电路结构上联系十分紧密,尤其在大

说一说javascript跨域和jsonp

同源策略 在浏览器的安全策略中“同源策略”非常如雷贯耳,说的是协议.域名.端口相同则视为同源,域名也可换成IP地址,不同源的页面脚本不能获取对方的数据. 要是想使用XMLHttpRequest或者常规的AJAX请求获取另一个站点的数据,浏览器会告诉你“XXXX is not allowed by Access-Control-Allow-Orign”. 因为同源策略的存在,防止了跨域访问的安全问题,但同时也损失了方便获取资源的便利. 跨域的src属性 世事又非绝对,浏览器还是允许几个元素跨域访问