Ajax + jsonp 实现跨域请求方法 及 原理

一. 同域与跨域简介:

• 同域请求：
  • 网络协议， 域名，端口号 都一致，则为同域(同源)请求
• 域名组成：http://www.sina.com.cn：8090/index.html
  • 服务名
  • sina 机构名
  • com 机构类型
  • cn 国家名
• 跨域请求：
  • 网络协议， 域名，端口号只要有一个不同，则视为跨域请求
• ajax的同源策略：
  • ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑

 

二. jsonp原理:

• ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了<script> 标签可以跨域链接资源的特性

 

三. 使用jsonp实现跨域请求360索引的数据案例:

<script>
        $(function () {
            // 输入框绑定按键抬起事件
            $('input').keyup(function () {
                // 取得按键抬起时用户输入的数据
                var vals=$(this).val()
                // 清空列表
                $('ul').empty()
                $.ajax({
                    // 跨域请求
                    url: 'https://sug.so.360.cn/suggest',
                    type: 'get',
                    // 使用jsonp实现跨域
                    dataType: 'jsonp',
                    data:{'word':vals,'encodein':'utf-8','encodeout':'utf-8'}
                }).done(function (dat) {
                    console.log(dat)
                    //dat:  {q: "c", p: true, s: Array(10)} 迭代数组 
                    //迭代数组
                    for(var i=0;i<dat.s.length;i++){
                        // 准备一个节点
                        $li=$('<li>'+dat.s[i]+'</li>')
                        // 向ul的子级尾部添加节点
                        $('ul').append($li)
                    }
                })
            })
        })
    </script>
<!-- html部分 -->
<input type="text">
<ul></ul>