同域与跨域请求
-
同域请求:
网络协议, 域名,端口号都一致,则为同域(同源)请求
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>