Cacher is the code snippet organizer for pro developers

什么是JSONP(json with padding || 有补丁的json)？

jsonp就是解决跨域获取数据的一种方式。

jsonp如何获取数据的？

1. 动态创建script标签
2. 通过script标签的src属性发送跨域或者同域请求
3. 获取服务器相应的数据（注意：数据格式是“回调函数”，数据以对象的形式作为实参存在于回调函数中）
4. 响应的内容会在浏览器中执行，执行过程实际上就是调用我们发送请求之前定义的回调函数，那么回调函数就获取到了服务器响应的数据信息
5. 这种回调函数的形式，要求后台返回的函数名必须和我们准备好的函数名相同，所以一般在url后面添加  '?callback=函数名' 形式的键值对，后台人员会提前得知键的名是‘callback’，然后后台获取 callback的值（$.GET('callback')方式获取）作为函数调用的函数名

选择jsonp形式的原因？

1. script具有跨域能力，服务器传输过来的数据会被当成js语句解析
2. 如果传输过来的不是函数调用而是var a = 123;这种赋值语句，就对script标签的位置有要求
3. jsonp因为传输需要时间，所以应该使用异步传输（script标签设置async属性或者动态创建自带异步属性）
4. 函数调用适合异步传输，赋值语句 异步传输会遇到未定义等问题；

jsonp请求方法：

1. 使用静态script标签发送jsonp请求,需要手动设置async属性：

php后台存在文件：

<?php
    echo 'foo({name:"xixi",age:18})';   
?>

html文件：

<script async src='a.php'></script>
<script>
    function foo(data){
        console.log(data); 
    }
</script>

2. 动态创建script标签，（所有动态创建的script标签必然是异步的，不可以设置为同步的）

php后台存在文件：

<?php
    echo 'foo({name:"xixi",age:18})';   
?>

html文件：

var scr = document.creatElement('script');
scr.setAttrbute('src','a.php');
document.getElementByTagName('head')[0].appendChild(scr);
<script>
    function foo(data){
        console.log(data);
    }
</script>