同源及跨域
同源
同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同。
URL | 说明 | 是否允许通信 |
---|---|---|
http://www.a.com/a.js,http://www.a.com/b.js | 同一域名下 | 允许 |
http://www.a.com/lab/a.js,http://www.a.com/script/b.js | 同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js,http://www.a.com/b.js | 同一域名,不同端口 | 不允许 |
http://www.a.com/a.js,https://www.a.com/b.js | 同一域名,不同协议 | 不允许 |
http://www.a.com/a.js,http://70.32.92.74/b.js | 域名和域名对应ip | 不允许 |
http://www.a.com/a.js,http://script.a.com/b.js | 主域相同,子域不同 | 不允许 |
http://www.a.com/a.js,http://a.com/b.js | 同一域名,不同二级域名(同上) | 不允许(cookie这种情况下也不允许访问) |
http://www.cnblogs.com/a.js,http://www.a.com/b.js | 不同域名 | 不允许 |
跨域方案
- 顶级域名相同的可以通过domain.name来解决,即同时设置 domain.name = 顶级域名(如example.com)
- document.domain + iframe
- window.name + iframe
- location.hash + iframe
- window.postMessage()
- 可以看这里:浏览器中跨域请求方案
- 更全的解决方案可以查看这里:跨域最全解决方案
JSONP
- JSON with Padding其本质是利用了
<script src=""></script>
标签具有可跨域的特性,由服务端返回一个预先定义好的Javascript函数的调用,并且将服务器数据以该函数参数的形式传递过来,此方法需要前后端配合完成。 - 只能以GET方式请求
<?php
$callBack = $_GET['callback'];
$arr = array(
'name' =>'xiaoming' ,
'color' =>'red'
);
echo $callBack."(".json_encode($arr).")";
?>
```html
//注意,域名不同
//核心是 通过script标签的src属性提交get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function fn(data){
console.log(data);
}
</script>
<script type="text/javascript" src='http://www.section02.com/seciton02_jsonP.php?callback=fn'></script>
</head>
<body>
<h1>区域1的页面_jsonP演示</h1>
</body>
</html>
jQuery 的$.ajax()
- 方法当中集成了JSONP的实现,可以非常方便的实现跨域数据的访问。
- dataType: 'jsonp' 设置dataType值为jsonp即开启跨域访问
- jsonp 可以指定服务端接收的参数的“key”值,默认为callback
- jsonpCallback 可以指定相应的回调函数,默认自动生成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src='jquery/jquery-3.0.0.min.js'></script>
</head>
<body>
<h1>区域1的页面</h1>
<input type="button" name="" onclick='sendAjax()' value="jquery区域请求">
</body>
</html>
<script type="text/javascript">
function sendAjax(){
$.ajax({
url:'http://www.section02.com/sectcion02_jqJsonp.php',
type:'post',
dataType: 'jsonp',
data:{name:'xiaoming'},
success:function(data){
console.log(data);
}
})
}
</script>
天气预报
一些平台为我们提供了可以直接使用的接口,我们只需要按照他们提供的格式提交数据即可。
- 百度车联网api 开发者秘钥ak:0A5bc3c4fb543c8f9bc54b77bc155724
注意点
- $.ajax({ url:'xxx.php',beforeSend:function(ajaxObj){console.log(ajaxObj);return false} }) return false:阻止取消本次ajax请求。
- 其他属性:complete:function(){console.log("请求完成");}
- error:function(){}:请求失败后的回调函数
- header:{}会覆盖原本ajax异步对象的属性,如果随意设置会出现无法发送的问题,应用少。
- jquery_form: $("#btnAjax"){url:'xxx.php',data:$("#dataForm").serialize};
- 表单元素:快速读取form表单并格式化为数据格式的方法(拥有name属性的表单元素的数据)
- 在php中,不能使用echo输出boolean类型,使用pring_r也不能输出,使用var_dump($result)可以直接将类型和类型对应的值输出
- artTemplate 不支持传入数组,只支持传入对象
- 自定义模板:模板中除了模板的内容外不要写其他任何的东西了,因为获取的时候,都会拿到,对标签而言都是内容。
- 瀑布流:宽度一致,高度参差不齐
- 瀑布流插件核心:放置的每一个元素,都需要在之前那一行高度最小的元素下方。
- 模板引擎altTmeplate不依赖于jQuery;
- php中随机获取的多个值,如果不止一个,返回的是数组。
- 使用随机的数组获取对应的值的索引。
- jquery插件写法:jQuery.fn.extend:添加了之后使用时,需要通过$(selector)使用。
- jQuery.extend:直接扩充给$(或者jqury)对象,使用较少。
- return this:支持链式编程
- jquery中有each方法,function有两个参数:索引值和当前的DOM对象。
怎么样,ajax的这些技能,你get到了吗?