JSONP 跨域 & 制作手机号归属地查询

一、跨域

同源策略指域名，协议，端口相同。所谓“同源策略“，简单的说就是基于安全考虑，当前域不能访问其他域的东西。

同源策略

Ajax 请求 $.get(url,callback); URL的内容只能是同源策略的东西。如果想请求不是同源的东西只能进行跨域JSONP（JSON with padding）请求。
使用方法在index.html 文件引包 js 文件。但是,调用JavaScript文件好像没有受到跨域的影响(其实但凡只要拥有src属性的都拥有跨域的能力，例如<\script>、<\img>、<\iframe>)

方法

index.html文件跨域引包的文件必须放在下面，因为函数无法提升。

js 文件

fun();//如果在fun的括号里放入json，是不是妥妥的Ajax请求到了json

实验结果

实验结果

说明：本例也可以把定义和调用函数调换。引包位置可以任意，也就是讲函数可以提升。

演示不同源请求数据

index.html文件跨域引包的文件必须放在下面，因为函数无法提升。

js 文件

fun({"name":"跨域","age":18});

结果

说明： 引包的地址换成你想要的任何网址，不就可以偷别人的借口了。哈哈哈哈哈

二、制作手机号归属地查询

浏览器提示错误：

• Warning: file_get_contents(www.163.com): failed to open stream: No such file or directory in D:\PHPstudy\WWW\12\phone.php on line 5

解决办法：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}

解决办法：字体乱码，设置字体

接下来看看是如何实现的点击查询功能的。

phone.php

展示给用户的页面

    
    


    
免费手机号归属地查询
     

        

            
            请输入你的手机号：


            

            
            
            
            

            
            
            
        

     

文件已经上传到服务器上测试结果：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文件的方式来实现。