JSONP 跨域 & 制作手机号归属地查询
一、跨域
同源策略指域名，协议，端口相同。所谓“同源策略“，简单的说就是基于安全考虑，当前域不能访问其他域的东西。
同源策略
Ajax 请求
$.get(url,callback); URL的内容只能是同源策略的东西。如果想请求不是同源的东西只能进行跨域JSONP（JSON with padding）请求。使用方法在index.html 文件引包 js 文件。但是,调用JavaScript文件好像没有受到跨域的影响(其实但凡只要拥有src属性的都拥有跨域的能力，例如<\script>、<\img>、<\iframe>)
方法
index.html文件跨域引包的文件必须放在下面，因为函数无法提升。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域JSONP</title>
</head>
<body>
<script>
//定义函数
function fun(str){
alert("成功跨域！");
}
</script>
<!-- 跨域引包 -->
<script src="js/JSONP.js"></script>
</body>
</html>
js 文件
fun();//如果在fun的括号里放入json，是不是妥妥的Ajax请求到了json
实验结果
实验结果
说明：本例也可以把定义和调用函数调换。引包位置可以任意，也就是讲函数可以提升。
演示不同源请求数据
index.html文件跨域引包的文件必须放在下面，因为函数无法提升。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域JSONP</title>
</head>
<body>
<script>
//定义函数
function fun(str){
alert(str.name);
}
</script>
<!-- 跨域引包 -->
<script src="js/JSONP.js"></script>
</body>
</html>
js 文件
fun({"name":"跨域","age":18});
结果
说明： 引包的地址换成你想要的任何网址，不就可以偷别人的借口了。哈哈哈哈哈
二、制作手机号归属地查询
浏览器提示错误：
- Warning:
file_get_contents(www.163.com): failed to open stream: No such file or directoryin D:\PHPstudy\WWW\12\phone.php on line 5
<?php
echo file_get_contents("www.163.com");
?>
解决办法：www.163.com→http://www.163.com
- Warning: file_get_contents():
Unable to find the wrapper "https" - did you forget to enable it when you configured PHP? in D:\PHPstudy\WWW\12\phone.php on line 5
Warning:file_get_contents(https://chongzhi.jd.com/json/order/search_searchPhone.action?mobile=18297806543): failed to open stream: No error in D:\PHPstudy\WWW\12\phone.php on line 5
一共两个错误,其实只有第一个有用。错误显示HTTPS未启动，其实就是不支持HTTPS。
解决办法：我使用的本地服务器模拟软件是PHPstudy，我们只需要找到phpstudy的安装目录下的PHP文件夹，打开正在使用的PHP版本文件夹，找到 php.ini 文件，在文件中找到“;extension=php_openssl.dll”，去掉前面的分号重启软件就可以了。
补充：如果我们输入的网址是
http://chongzhi.jd.com/json/order/search_searchPhone.action?mobile=18297806543
会提示如下错误，错误信息不一样但解决办法一样，如上。
Warning: file_get_contents(http://chongzhi.jd.com/json/order/search_searchPhone.action?mobile=18297806543): failed to open stream: Unable to find the socket transport "ssl" - did you forget to enable it when you configured PHP? in D:\PHPstudy\WWW\12\phone.php on line 5
- 完成上步输出结果为：
{"area":"14","areaName":"����","providerName":"�ƶ�","provider":1}
<?php
//字体乱码，设置字体
header("Content-Type:application/json;charset=GBK");
echo file_get_contents("https://chongzhi.jd.com/json/order/search_searchPhone.action?mobile=18297806543");
?>
解决办法：字体乱码，设置字体
接下来看看是如何实现的点击查询功能的。
phone.php
<?php
//字体乱码，设置字体
header("Content-Type:application/json;charset=GBK");
//得到用户输入的手机号
$phone=$_GET["num"];
//得到查询结果
$result = file_get_contents("https://chongzhi.jd.com/json/order/search_searchPhone.action?mobile=".$phone);
//输出查询结果
echo $result;
?>
展示给用户的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>免费手机号归属地查询</title>
</head>
<body>
<h3>免费手机号归属地查询</h3>
<form action="">
<p>
<!-- 输入手机号 -->
请输入你的手机号：<input type="text" id ="user_in"><br><br>
<p id="reg"></p>
<!-- 点击查询获得结果 -->
<input type="button" value="点击查询" id="btn">
<!-- 展示结果 -->
<p class="result"></p>
<!-- 引包 -->
<script src="js/jquery-1.12.3.min.js"></script>
<script>
<!-- 点击查询 -->
$("#btn").click(function(){
// 获取用户输入的值
var Phone_num = $("#user_in").val();
//正则检查输入的数据是否是手机好
if(!/^[0-9]{11}$/.test(Phone_num)){
//显示错误
$("#reg").html("错误的手机号！๑•ᴗ•๑");
return;
}
console.log(Phone_num);
// Ajax发送请求
$.get("phone.php",{"num":Phone_num},function(data){
//移除错误
$("#reg").html("");
//得到json拼接结果后返回
$(".result").html(data.areaName+data.providerName)
});
});
</script>
</p>
</form>
</body>
</html>
文件已经上传到服务器上测试结果：https://www.52world.club/shoujihaoquery/
测试结果
总结：跨域请求一共两种方法
- JSONP跨域，通过引包的方式实现。最好使用Ajax实现
$.ajax({
"dataType" : "jsonp",
"url" : "www.163.com", //jsonp的网址
"jsonpCallback" : "haha", //jsonp的网址是一句调用，所以这里要在window对象上注册一个函数，和jsonp那个调用同名。
"success" : function(data){ //成功的回调函数
console.log(data);
}
});
- PHP跨域，通过Ajax请求PHP文件的方式来实现。
