HTML5API(3)
十一、ajax同源操作
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
- 域名和域名对应ip不允许
- http://www.a.com/a.js
- http://70.32.92.74/b.js
- 主域相同，字域不同不允许
- http://www.a.com/a.js
- http://script.a.com/b.js
- 同一域名，不同二级域名（同上）不允许（cookie这种情况下也不允许访问）
- http://www.a.com/a.js
- http://a.com/b.js
- 不同域名不允许
- http://www.cnblogs.com/a.js
- http://www.a.com/b.js
1、定义
- ajax要求客户端的协议、主机名、端口号与服务端必须一致
- 同源测试是客户端的限制
什么时候需要跨域
- ajax发送请求时，两个URL的协议，域名，端口相同，才允许访问否则需要跨域
2、解决方案
- CORS(跨域资源共享)
- 设置响应头Access---Control---Allow---Origin
- 使用jsonp
- 让网页从别的域名那获取资料，即跨域读取数据
- 动态添加
<script>标签来调用服务器提供的js脚本，通过JavaScript callback的形式实现跨域访问
HTML结构
'搭建服务器'
'浏览器显示'
3、CORS实现思路
- 设置响应头"Access-Control-Allow-Origin"为允许访问的客户端地址（协议、主机名、端口号）。可以设置为*
HTML结构
'搭建服务器'
'浏览器显示'
4、JSONP
- 利用script元素的src加载url
- 可以实现跨域访问
5、CORS和JSONP的不同
- CORS还是标准的ajax，可以进行ajax的各种操作
- jsonp只能发起get请求
6、jQuery中使用JSONP
- $.getJSON()
- jquery.getJSON(url,[data],[callback])
- $getScript()
- jQuery.getScript(url,[callback]
十二、WebRTC
navigator.getUSERmedia(options,successCallback,errCallback)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索</title>
<style>
.container{
margin:100px auto;
width: 500px;
}
.container input{
width: 378px;
float:left;
border:1px solid #ccc;
padding:10px;
font-size:16px;
line-height:18px;
}
.container button{
width: 100px;
padding:10px;
font-size:16px;
line-height:18px;
float:right;
border:1px solid #ccc;
border-left:none;
background:#f5f5f5;
}
</style>
</head>
<body>
<div class="container">
<form action="https://www.baidu.com/s">
<input type="text" name="wd" list="myList" autocomplete="off">
<!-- autocomplete不让显示出历史纪律 -->
<datalist id="myList"></datalist>
<button>搜索</button>
</form>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function(){
$(".container input").keyup(function(){
var keywords=$(this).val();
var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+keywords+"&cb=?";
$.getJSON(url,function(res){
$("#myList").empty();
$.each(res.s,function(index,item){
$("<option>").val(item).appendTo("#myList");
})
});
})
})
</script>
</body>
</html>
十三、服务器推送
解决方案
- ajax轮询
- Server-Send-Event
- WebSocket
HTML5API(3)的更多相关文章
- HTML5入门总结 HTML5API
w3cshools MDN英文 MDN中文 HTML5 HTML5 is the latest evolution of the standard that defines HTML. The t ...
- HTML5API之获取地理位置详解
在使用地理位置API之前先来了解一下什么是经度和纬度以及地理位置获取的原理 首先经度指的是南北极的连接线,纬度指的是东西的连接线 地理位置的获取原理是通过IP地址(基于ISP记录,能够知道这个IP地址 ...
- 山寨HTML5API classList类
preface 认为自己去写一些类,你真的会找到自己不足的地方.事实上厉害不是你实现一个类.而是你怎样去设计一个类,能让开发人员更加easy操作. 对于这个操作样式,能够通过javascript訪问s ...
- HTML5API(5)
一.SVG 1.svg与canvas的区别 canvas绘制的是位图,svg绘制的是矢量图 canvas使用JavaScript绘制,svg使用xml绘制 canvas不能给每个图形绑定事件,svg可 ...
- HTML5API(4)
十三.服务器推送 服务器主动向客户端推送信息 传统的HTTP协议传输,服务器是被动相应客户端的请求 1.解决方案 ajax轮询.ajax长轮询 Server-Send-Event WebSocket ...
- HTML5API（2）
四.文件API 1.概述 H5允许JS有条件的读取客户端文件 允许读取的文件:1.待上传的文件2.拖进浏览器的文件 多文件上传设置属性multiple 过滤上传文件类型 设置accept属性 acce ...
- HTML5API
H5新API 一.地理位置API 1.navigator.geolocation对象 getCurrentPosition(callback,errCallback,options)获取当前位置 wa ...
- 浏览器桌面通知Notification探究
首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...
- 利用javascript和WebGL绘制地球 【翻译】
利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...
随机推荐
- CentOS 安装MariaDB
1.安装 #同时安装mariadb和mariadb-server [root@bigdata-senior01 yum.repos.d]# yum -y install mariadb mariadb ...
- CentOS 文本操作命令
1.cat 用于查看纯文本文件,显示行号,加-n参数,适合内容较少的情况 2.more 用于查看纯文本文件,适合内容较多的情况 3.less 用于查看纯文本文件,可以上下翻页 4.head 用于查看纯 ...
- [JSOI2008]小店购物 & bzoj4349:最小树形图 最小树形图
---题面(洛谷)--- ---题面(bzoj)--- 其实是同一道题,,,样例都一模一样 题解: 一开始看想了好久,,,还想到了最短路和最小生成树,,然而写的时候才意识到最小生成树应该要用无向边 其 ...
- POJ3581：Sequence——题解
http://poj.org/problem?id=3581 给一串数,将其分成三个区间并且颠倒这三个区间,使得新数列字典序最小. 参考:http://blog.csdn.net/libin56842 ...
- BZOJ3427 Poi2013 Bytecomputer 【dp】
题目链接 BZOJ3427 题解 容易发现最终序列一定是\(\{-1,0,1\}\)组成的 因为如果有一个位置不是,那么这个位置一定大于\(1\),那么上一个位置一定为\(1\),所以该位置一定加到过 ...
- 洛谷 P4495 [HAOI2018]奇怪的背包 解题报告
P4495 [HAOI2018]奇怪的背包 题目描述 小\(C\)非常擅长背包问题,他有一个奇怪的背包,这个背包有一个参数\(P\),当他 向这个背包内放入若干个物品后,背包的重量是物品总体积对\(P ...
- 数据库sharding,横向扩展
学习资料如下: http://www.cnblogs.com/skyme/p/3459765.html http://my.oschina.net/anthonyyau/blog/307165 htt ...
- 史上最全Linux提权后获取敏感信息方法
http://www.freebuf.com/articles/system/23993.html 在本文开始之前,我想指出我不是专家.据我所知,在这个庞大的区域,没有一个“神奇”的答案.分享,共享( ...
- Spring面试，IoC和AOP的理解（转）
spring 的优点?1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦 2.可以使用容易提供的众多服务,如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它很容易实 ...
- 微服务与devops的文章推荐
http://www.sohu.com/a/125040520_355140 http://www.csdn.net/article/2015-11-18/2826253 http://www.cnb ...