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 ...
随机推荐
- 3. 无重复字符的最长子串(O(N))
给定一个字符串,找出不含有重复字符的 最长子串 的长度. 示例: 给定 "abcabcbb" ,没有重复字符的最长子串是 "abc" ,那么长度就是3. 给定 ...
- Jsp电子商务之七 订单篇2
从View页面,点击超链接查询订单,进入到控制器 OrderlistServlet package com.cart.web; import java.io.IOException; import j ...
- 四连测Day3
题目链接:https://pan.baidu.com/s/1_vsHfMI_qO-9IDxmFLkHfg 密码: uza8 T1: 小奥的一笔画,判连通性,查奇偶点即可 #include<ios ...
- pandas模块（数据分析）------dataframe
DataFrame DataFrame是一个表格型的数据结构,含有一组有序的列,是一个二维结构. DataFrame可以被看做是由Series组成的字典,并且共用一个索引. 一.生成方式 import ...
- selenium - webdriver - ActionChains类(鼠标操作)
ActionChains 类提供了鼠标操作的常用方法: perform(): 执行所有 ActionChains 中存储的行为: context_click(): 右击: double_click() ...
- [mysql]数据库引擎查看
1.查看数据库引擎 全局下,show engines; 2.察看数据库引擎 show variables like '%engine%'; 或者show create table xxx\G 会显示默 ...
- HDU3585 最大团+二分
maximum shortest distance Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Jav ...
- React Mixin
为什么使用 Mixin ? React为了将同样的功能添加到多个组件当中,你需要将这些通用的功能包装成一个mixin,然后导入到你的模块中. 可以说,相比继承而已,React更喜欢这种组合的方式. 写 ...
- Java设计模式の装饰者模式
目录 一.问题引入 二.设计原则 三.用装饰者模式解决问题 四.装饰者模式的特点 五.装饰者模式的定义 六.装饰者模式的实现 七.java.io包内的装饰者模式 一.问题引入 咖啡店的类设计: 一个饮 ...
- 如何在阿里云服务器部署Django
这段时间一直在搞我的网站——大学易,一个大学生评课网站,主要是提供课程的详尽信息(比如老师会不会经常点名,有没有期中考试),课程资料的下载等等. 这篇文章主要是分享给那些菜鸟,就是像我一样完全没有搞过 ...