Ajax跨域请求与解决方案

同域与跨域请求

• 同域请求：

  网络协议， 域名，端口号都一致，则为同域(同源)请求

  http://www.sina.com.cn：8090/index.html

• 跨域请求:

  浏览器对于javascript的同源策略的限制,网络协议， 域名，端口号只要有一个不同，则视为跨域请求

• ajax的同源策略

  ajax请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.不能是其他域的资源，这是在设计ajax时基于安全的考虑

jsonp(了解)

ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了<script>标签可以跨域链接资源的特性,一种非官方跨域数据交互协议。
一个是描述信息的格式，一个是信息传递双方约定的方法。

jsonp的产生:

• 1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.

• 2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候

• 3.凡是拥有scr这个属性的标签都可以跨域例如<script><img><iframe>

• 4.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.

• 5.而json又是一个轻量级的数据格式,还被js原生支持

• 6.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback 参数给服务端，

跨域请求360索引的数据

 <script>
     $(function () {
         // 输入框绑定按键抬起事件
         $('input').keyup(function () {
             // 取得按键抬起时用户输入的数据
             
             var vals=$(this).val()
             // 清空列表
             $('ul').empty()
             
             $.ajax({
                 // 跨域请求
                 url: 'https://sug.so.360.cn/suggest',
                 type: 'get', 
                 dataType: 'jsonp',  // 使用jsonp实现跨域
                 data:{'word':vals,'encodein':'utf-8','encodeout':'utf-8'}
             })
             .done(function (dat) {
                 console.log(dat)
                 //dat:  {q: "c", p: true, s: Array(10)} 迭代数组 
                 //迭代数组 s为数据列表
                 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>