JavaScript使用jsonp实现跨域

　　为什么要把ajax跨域写一下呢，因为ajax跨域并不是想跨就能跨的。因为为了安全，ajax是不允许跨域的。

　　举个例子，你有一个卖水果的网站，你的ajax请求另一个网站提供的图片，正常的时候，图片是一个苹果，但是那个网站被黑了，图片全被改为全是大便的同名文件，那么你请求回来的图片一显示，那场景，无限壮观。

　　一般情况下，只有自己的网站的内容才是可信的，其他外来的资源并不是完全可信的。比如平时开发中在script标签src中引入CDN的jquery文件，如果某一天，未通知你，CDN上的jquery文件被恶意篡改了，那你可能就凉了。

什么是域

　　域由三部分组成

　　1、协议（http、https、ftp....）

　　2、IP或者域名

　　3、端口

　　上面这三个部分，要是有一部分不同，就会出现跨域。

常用的跨域手段　　

　　Flash：使用flash插件完成，很少用，我没用过。

　　本地代理：既然ajax请求其他域名下的文件会失败，但是后端的程序请求其他域名的文件就不会存在跨域这个问题了吧，你可以在后端写一个程序，专门用来接收本地ajax对其他域资源的请求，然后代替ajax去请求资源，并且将其他域返回给后端的响应再返回给ajax，这样ajax就可以获取到其他域的资源了。虽然能达到目的，但是也请复杂的，很少采用。

　　接受请求端设置http头部信息。

　　Jsonp：经常使用，下面重点写。

通过设置头部信息实现跨域

　　以php为例，在接受方的程序中的header添加一项即可：

//接收所有跨域请求

header("Access-Control-Allow-Origin:*");

//接收来自某个ip的请求

header("Access-Control-Allow-Origin:192.168.1.2");

//接收来自某个域名的请求

header("Access-Control-Allow-Origin:www.demo.com");

jsonp

　　说jsonp之前，先说一下咱们平时使用的一些标签，比如script、img，他们都一个共同点———src属性。通过src属性，可以将其他资源包含进来，其中，src并不会有跨域的问题。

　　比如下面这段代码：

<script src="1.txt"></script>

　　1.txt的内容如下：

var a=10;

　　那么在接下来的JavaScript代码就可以访问从1.txt中获取到的变量a了，此时的a是全局变量。其实就等价于：

<script>

	var a=10;

</script>

　　　也许你已经猜到了，我们可以将src的值，也就是链接的地址改成其他域的资源名称，比如

<script src="https://www.baidu.com"></script>

　　这样的话，咱们就能将baidu首页包含进来。

　　但是，有一个很严峻的问题：你怎么使用获取的内容？

　　虽然已经将内容百度的首页内容引入了，相当于下面这样：

<script>

	这是百度首页的代码

</script>

　　你怎么使用内容，很难头疼的。因为并没有像var a = 10那样为内容保存到变量中呀。

　　于是聪明的你，肯定想到了，既然包含的文件全是内容，并没有赋值给一个变量，所以我们无法使用。那么，我们可以让他在返回资源的时候就先将内容项赋值给一个变量然后再一并返回。

　　既然是我们要请求其他域的资源，那么其他域肯定会提供这个功能的，不会说只是单纯的提供数据，如果只是单纯的提供数据，那么让他们加一下嘛，也就几分钟的事。

　　比如说下面这样：

<script src="demo.php"></script>

<script>

	console.log(a);

</script>

　　demo.php内容如下：

<?php

	$v = 10;

	echo "var a = " . $v;

 ?>

　　然后JavaScript就会正常的运行。输出10。

　　上面简单的示例，只是返回一个简单的字符串，只不过该字符串是可以再浏览器中执行的JavaScript语句。但是也有个问题，返回的JavaScript语句中的变量是全局的，对不？所以我们在想办法，怎么让返回的内容不变成全局的呢？

　　可以这么做：

<script>

	function Work(data){

		console.log(data);

	}

</script>

<script src="demo.php"></script>

　　demo.php:

<?php

	$v = 10;

	echo "Work(". $v .")";

 ?>

　　可以看到，只是在请求其他域的资源之前先定义一个函数，该函数有参数。而在其他域被请求的文件中，返回一个字符串，字符串内容前一部分就是之前定义的JavaScript函数（这里是Work)，以及将要传回的数据作为参数，内嵌到其中。

　　其实现在用的技术就是jsonp，不知不觉吧。这就是jsonp中p（padding填充的含义），而jsonp中的json就是平时的json，合起来的理解就是：填充的内容时json格式的数据，填充到一个js的函数名中，组合成字符串返回。

　　这里有几个注意点，

　　1、实现定义函数。

　　2、被请求资源中会返回的字符串中包含前面定义的函数。

　　还有一个问题：我们只是指定了src的链接，即请求谁，但是，我们没有指定什么时候指定。开发中，我们更重要的是在需要的时候在发起请求，即按需加载。

　　注意这里不要在一个script标签中指定一个id，然后通过获取这个script之后，动态修改src值，来发起请求，这是错误的，因为一旦加载过的代码是不会再次执行的，除非你刷新页面。

　　正确的姿势是：创建一个dom元素节点（script），然后设置src之后，append到body中即可。

　　比如下面这个用法：

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script>

		function Work(data){

			alert(data);

		}

	</script>

</head>

<body>

	<button id="btn">request</button>

</body>

<script>

	window.onload = function(){

		var btn = document.getElementById("btn");

		btn.onclick = function(){

			var script = document.createElement("script");

			script.src = "demo.php";

			document.body.append(script);

		}

	}

</script>

</html>

　　demo.php

<?php

	$v = 10;

	echo "Work(". $v .")";

 ?>

　　运行时，一旦点击click按钮，就会创建一个script标签，加载src的内容，然后执行返回的数据。

　　还没完，上面的function Work()中是将获得的响应数据alert出来，但现在我们需要将相应数据console.log打印出来，咋办？找后端的RD再创建一个Work2()，返回的时候，将Work改为Work2 ？？？

　　如果你这样做，多半会被人家打死的。

　　其实你是可以将你要调用的function传递给后端，然后后端在处理完数据之后，返回你所传递的函数名，向下面这样：

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script>

		function WorkAlert(data){

			alert(data);

		}

		function WorkConsoleLog(data){

			console.log(data);

		}

	</script>

</head>

<body>

	<button id="btn1">alert</button>

	<button id="btn2">console.log</button>

</body>

<script>

	window.onload = function(){

		var btn1 = document.getElementById("btn1");

		var btn2 = document.getElementById("btn2");

		btn1.onclick = function(){

			var script = document.createElement("script");

			script.src = "demo.php?callback=WorkAlert";  //重点

			document.body.append(script);

		}

		btn2.onclick = function(){

			var script = document.createElement("script");

			script.src = "demo.php?callback=WorkConsoleLog";  //重点

			document.body.append(script);

		}

	}

</script>

</html>

　　demo.php

<?php

	//默认callback为WorkAlert

	$callback = isset($_GET['callback']) ? $_GET['callback'] : "WorkAlert";

	$v = 10;

	echo $callback . "(" . $v . ")";

 ?>

　　下面是jsonp的一个使用示例，参考360的so.com，在输入框输入文字时，下拉框提示

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>仿360搜索</title>

	<style>

		body{margin:0; padding:0;}

		#container{margin:0 auto;height:100%; width:800px; text-align:center}

		#div{margin:0 auto; margin-top:30%;}

		#keyword{width:400px; height:40px; border-radius:5px; font-size:25px;}

		#search{width:70px; height:40px; border-radius:10px;border:1px solid grey; line-height:40px; background: #19b955;}

		li {list-style: none; border:1px solid grey; height:40px;border-radius:5px; text-align:left;}

	</style>

</head>

<body>

	<div id="container">

		<div id="div">

			<div>

				<input type="text" name="keyword" id="keyword">

				<input type="submit" value="搜索" id="search">

			</div>

			<ol id="opt"></ol>

		</div>

	</div>

</body>

	<script>

		function showData(data){

			var res = data.result;

			var length = res.length;

			var Html = "";

			for(var i = 0; i < length; i++){

				Html += "<li>" + res[i].word + "</li>";

			}

			var opt = document.getElementById("opt");

			opt.innerHTML = Html;

		}

		var keyword = document.getElementById("keyword");

		keyword.oninput = function(){

			var v = this.value;

			var script = document.createElement("script");

			script.src = "https://sug.so.360.cn/suggest?callback=showData&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=" + v;

			document.body.append(script);

		}

	</script>

</html>

各种跨域的比较

　　使用代理的话，没啥说的，可以，没有什么问题。

　　jsonp：因为jsonp在传输数据的时候，都是将callback以及传输的数据连在URL上，而URL是有长度限制的，所以jsonp适不适合传输大量数据，比如文件之类的请求。

　　服务器端设置header的Access-Control-Allow-Origin就适合传输大量数据的情况。