JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法,常用于服务器与客户端跨源通信(跨域通信),是一种跨域解决方案。

jsonp原理

1.网页通过添加一个<script>元素向服务器请求,且请求的url中必须带一个callback参数(但参数名可以自定义为其它的名称),
  其它参数可选,但一般取名callback、jsonp、jsonpcallback等语义化,如http://domain.com/?callback=回调方法&userid=123.
2.服务器接收到请求后,进行相应逻辑处理,然后响应内容必须用javascript函数名和圆括号包裹起来(其实就是返回一段js代码).
	响应内容格式: 函数名(json字符串);
	如: say({"code":0,"msg":"ok","data":{"userid":"123"}})
		

jsonp优缺点及注意点

1. 最大优点是解决了跨域问题,可以使不同源的网站来请求获取数据,
2. jsonp方式不支持POST方式请求,仅支持GET请求。
3. jsonp跨域,如果运用不当就会产生安全隐患,最好是对callback参数值做一些过滤。
	措施举例如: 参数值只能以字符开头,可由字母、数字、下划线_等组合

示例

1. 服务器端代码编写示例,这里以php为例:
	地址:http://tool.nfangbian.com/jsonp.php?callback=say&userid=123
	jsonp.php代码如下:
		<?php
		header("Content-type: text/html;charset=utf-8");
		//获取回调方法名
		$jsoncallback = htmlspecialchars($_GET['callback']);
		$userid = isset($_GET['userid'])?$_GET['userid']:0;//其它参数,这里获取userid
		//json数据
		$json_data = json_encode(['code'=>0, 'msg'=>'ok', 'data'=>['userid'=>$userid]]);
		//输出jsonp格式的数据,如: say({"code":0,"msg":"ok","data":{"userid":"123"}})
		echo $jsoncallback . "(" . $json_data . ")";
	
2. html网页js请求示例:
	
	function demo() {
		var url = "http://tool.nfangbian.com/jsonp.php?callback=say&userid=123";
		jsonp(url);
	}
	function say(res) {//服务器响应js代码调用这个callback方法
		console.log("服务器响应内容" + JSON.stringify(res));
		document.getElementById("demoid").innerHTML += JSON.stringify(res);
	}
	function jsonp(url) {//发起jsonp请求
		var script = document.createElement("script");
			script.setAttribute("src", url);
			document.getElementsByTagName("body")[0].appendChild(script);
	}
	
	
	
响应内容: