jsonp方式跨域

一.定义

jsonp方式跨域
    所谓的jsonp就是通过 script标签 的特殊属性来完成跨域请求
    1, script标签,可以通过 src属性,访问任意的文件内容,即时是跨域的文件也可以访问
    2, script标签,可以读取 src属性,加载的任意的外部文件内容,会将文件内容,作为 JavaScript程序来解析

script标签的两大特性
    1,本身就可以跨域,不受域名限制
        不管文件在哪儿,只要路径正确,就可以访问
    2,加载的文件内容,都会按照JavaScript程序的语法格式,来执行
        不管是什么文件,只要写的是JavaScript程序,都能执行

在JavaScript程序中先定义好一个函数
在PHP等后端程序中,调用这个函数
将后端返回的数据,作为这个参数的参数设定

问题:
    jsonp的无下限:
        只要是知道文件的地址,就可以给后端程序传参,和获取结果
        只要知道路径,谁要给谁数据

二.jsonp的三种运用（html、php、txt）

<!-- 相对路径 -->
<!-- <script src="./demo.js"></script> -->

<!-- 绝对路径 -->
<!-- <script src="http://127.0.0.1/nz2002/week8_day01/01_jsonp/demo.js"></script> -->

<!-- 跨域的绝对路径,通过src也可以访问 -->
<!-- <script src="http://localhost/nz2002/week8_day01/01_jsonp/demo.js"></script> -->

<!-- 加载一个外部的txt文件,其中文本内容,是一串js代码 
        通过 src 属性,读取加载一个外部跨域文件内容
        txt文件中的内容是 : window.alert('我是txt文件中的js形式代码执行的结果');
        内容的形式 是 js 代码的形式 
        script标签,会将 读取到 window.alert('我是txt文件中的js形式代码执行的结果'); 尝试以js的方式运行
        内容正好是 js 代码,执行结果就和正常的js代码执行效果完全相同

-->
<!-- <script src="http://localhost/nz2002/week8_day01/01_jsonp/demo.txt"></script> -->

<!-- 通过script标签,访问一个PHP外部跨域程序 
        PHP程序要输出内容,不是直接写就行的
        在 <?php 起始表示符内
        必须是通过 echo   var_dump()    print_r() 输出内容
        PHP可以先定义好要传参的数据,然后转化为json串的形式,再以js程序的方式,传递给js程序

        实际项目中,PHP程序是返回一个函数形式的内容
        但是必须要在JavaScript中,提前定义好函数

        等于是在JavaScript中,提前定义好一个函数
        php程序,定义内容,来调用这个函数

        为了,可以返回接收PHP程序中的参数
        PHP程序中的参数,就定义为这个函数的参数
-->

demo.html

<script>
    // 在JavaScript中提前定义好 这个函数名称
    function fun(res){
        console.log(res);
        // 接收到的数据就是存储在res中的后端PHP程序的操作结果
        // 之后这个res就便于我们使用了
    }
</script>
<!-- 加载外部php程序,返回这个函数,并且调用执行这个函数 -->
<script src="http://localhost/nz2002/week8_day01/01_jsonp/demo.php"></script>

demo.js

console.log('我是外部的js文件');

demo.php

<?php

// PHP可以定义相应的数据操作
// php中的数组要这样写，和js中的数组写法不一样
// $arr = [
//     ['name'=>'张三','age'=>18,'sex'=>'男','addr'=>'北京'],
//     ['name'=>'李四','age'=>19,'sex'=>'女','addr'=>'上海'],
//     ['name'=>'王五','age'=>20,'sex'=>'不详','addr'=>'广州'],
// ];

// 操作读取数据库
$link = mysqli_connect('127.0.0.1' , 'root' , 'root' , 'nz2002' , 3306);
$sql = "SELECT * FROM `student`";
$result = mysqli_query($link , $sql);
$arr = mysqli_fetch_all($result,MYSQLI_ASSOC);



// 转化成字符串形式
$str = json_encode($arr);
// 输出的是js程序形式
// echo "console.log(JSON.parse('{$str}'))";

// 定义一个函数,函数是JavaScript中已有的函数
// 函数的参数,是PHP中获取到的参数
echo "fun({$str})";


mysqli_close($link);

demo.txt

window.alert('我是txt文件中的js形式代码执行的结果');

console.log('我也是txt文件中的js代码');

document.write('我还是txt文件中的js代码');