AJAX跨域解决方案——JSONP-优快云博客

一、跨域的产生

域：域名

跨域请求（访问）：一个域名下的文件请求另外一个域名下的资源，就产生了跨域

二、跨域的解决

1、Jsonp : json padding

2、本地服务代理

-- 用服务端的问题件来请求资源，通过访问同域名地下的服务端文件，就可以得到资源。

3、FLash

三、JSONP

1、script标签 : <script>标签 src的作用：加载（包含指定的外部文件）可以跨域包含被包含的资源可以是任何类型的文件(可以是txt,php等) 他只关注被包含的文件的内容是否是合法的JS

2、原理

-- 定义函数

-- 包含外部文件，在被包含的文件中执行调用定义好的函数

-- 参数的（数据）的实现问题：包含就调用，通过动态创建<script>实现按需调用问题：包含动态文件时可以通过一个接口实现按需生成调用函数名称

 function fn(data) {
    var oUl = document.getElementById('ul1');
    var html = '';
    if (data.s.length) {
        oUl.style.display = 'block';
        for (var i=0; i<data.s.length; i++) {
            html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';
        }
        oUl.innerHTML = html;
    } else {
        oUl.style.display = 'none';
    }
 
}
window.onload = function() {
    var oQ = document.getElementById('q');
    var oUl = document.getElementById('ul1');
 
    oQ.onkeyup = function() {
 
        if ( this.value != '' ) {
            var oScript = document.createElement('script');
            oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=fn';
            document.body.appendChild(oScript);
        } else {
            oUl.style.display = 'none';
        }
 
    }
}