ajax同源及跨域（百度地图API）

最新推荐文章于 2024-04-28 23:53:03 发布

weixin_33836874

最新推荐文章于 2024-04-28 23:53:03 发布

阅读量331

点赞数

文章标签： php javascript python ViewUI

原文链接：https://my.oschina.net/yxmBetter/blog/837825

版权

2019独角兽企业重金招聘Python工程师标准>>>

同源及跨域

同源

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

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请求。
1. 其他属性：complete:function(){console.log("请求完成");}
2. error:function(){}:请求失败后的回调函数
3. header:{}会覆盖原本ajax异步对象的属性，如果随意设置会出现无法发送的问题，应用少。
jquery_form: $("#btnAjax"){url:'xxx.php',data:$("#dataForm").serialize};
1. 表单元素：快速读取form表单并格式化为数据格式的方法(拥有name属性的表单元素的数据)
在php中，不能使用echo输出boolean类型，使用pring_r也不能输出，使用var_dump($result)可以直接将类型和类型对应的值输出
artTemplate 不支持传入数组，只支持传入对象
自定义模板：模板中除了模板的内容外不要写其他任何的东西了，因为获取的时候，都会拿到，对标签而言都是内容。
瀑布流：宽度一致，高度参差不齐
1. 瀑布流插件核心：放置的每一个元素，都需要在之前那一行高度最小的元素下方。
2. 模板引擎altTmeplate不依赖于jQuery;
3. php中随机获取的多个值，如果不止一个，返回的是数组。
4. 使用随机的数组获取对应的值的索引。
jquery插件写法：jQuery.fn.extend:添加了之后使用时，需要通过$(selector)使用。
1. jQuery.extend:直接扩充给$(或者jqury)对象，使用较少。
2. return this:支持链式编程
jquery中有each方法，function有两个参数：索引值和当前的DOM对象。