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 ...
随机推荐
- 以安装PyTorch为例说明Anaconda在Windows/Linux上的使用
在Windows10上配置完MXNet 1.3.0后,再配置PyTorch 1.0时,发现两者需要依赖的NumPy版本不一致,之前是通过pip安装NumPy,根据pip的版本不同,会安装不同版本的Nu ...
- BZOJ3140：[HNOI2013]消毒——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=3140 https://www.luogu.org/problemnew/show/P3231 最近在 ...
- HDOJ(HDU).1015 Safecracker (DFS)
HDOJ(HDU).1015 Safecracker [从零开始DFS(2)] 从零开始DFS HDOJ.1342 Lotto [从零开始DFS(0)] - DFS思想与框架/双重DFS HDOJ.1 ...
- 浴谷夏令营例题Codeforces827DBest Edge Weight（三个愿望，一次满足~（大雾
这题在浴谷夏令营wyx在讲的最小生成树的时候提到过,但并没有细讲怎么写... 这题可以用三种写法写,虽然只有两种能过...(倍增/倍增+并查集/树链剖分 先跑出最小生成树,分类讨论,在MST上的边,考 ...
- Linux安装cx_Oracle
安装依赖包 yum -y install gcc python-devel 确认以下变量都已经设置好了 export ORACLE_HOME=/home/oracle/app/oracle/produ ...
- Codeforces Round #508 (Div. 2) E. Maximum Matching（欧拉路径）
E. Maximum Matching 题目链接:https://codeforces.com/contest/1038/problem/E 题意: 给出n个项链,每条项链左边和右边都有一种颜色(范 ...
- 题解 【luogu P1541 NOIp提高组2010 乌龟棋】
题目链接 题解 题意: 有一些格子,每个格子有一定分数. 给你四种卡片,每次可以使用卡片来前进1或2或3或4个格子并拾取格子上的分数 每张卡片有数量限制.求最大分数. 分析 设\(dp[i]\)为第前 ...
- bzoj4810 [Ynoi2017]由乃的玉米田 bitset优化+暴力+莫队
[Ynoi2017]由乃的玉米田 Time Limit: 30 Sec Memory Limit: 256 MBSubmit: 917 Solved: 447[Submit][Status][Di ...
- mac之os x系统下搭建nodejs＋express4.x＋mongodb＋gruntjs整套前端工程
第一次在Mac OS X上搭建前端开发环境,做一个小小记录,包括一些与windows系统的区别和常用快捷键 首先,在进行环境搭建之前先来看一下苹果系统的“cmd”,也就是Terminal(终端). 打 ...
- iframe的使用及操作
一.iframe的使用方法: 在一个页面中加入iframe代码,例如: <div class="myiframe"> <iframe src="test ...