黑马ui学费,创业黑马学院 学费多少 黑马ui设计学多久 黑马程序员学ui学费
序
从Web2.0开始，Ajax的诞生解决了传统表单提交页面跳转和白屏闪烁的问题。网页可以本地更新，既减少了网络带宽，又大大提升了用户体验。
但是Ajax不是万能钥匙，不足以打开Web交流的大门。当请求遇到跨域通信时，Ajax束手无策。
(作为一个众所周知的问题，Ajax在没有跨域权限的情况下直接请求普通文件。不管你是静态页面、动态网页、web服务还是WCF，只要是跨域请求，都是不允许的。)
随着Web的快速发展，开发变得工程化，同时为了扩展和维护日益复杂和庞大的项目需求，需要划分工作维度(前端和后端划分细节)。前端分离的开发方式就是从这个需求背景衍生出来的产品。(我不想再看到混合代码了。)
如何进行数据通信，是开发人员用前后端分离的开发方法绕不开的问题。作为开发同学小伙伴客户端的浏览器，有点调皮，也受到了一个对应策略的限制。当我们的数据请求遇到不同的来源(跨域)时，我们不得不尝试其他的通信方式，Ajax不可能一路走到黑。
相应的策略和限制
同源策略限制从一个源加载的文档或脚本如何与另一个源的资源一起导入。
线路交互。这是隔离潜在恶意文件的关键安全机制。
要求同源协议、域名和端口(默认为80)相同；否则，它就不是同源的。
相应的政策限制：
*无法读取Cookie、LocalStorage和IndexDB。
*无法获取Dom。
*不能发送Ajax请求。
前后方如何沟通？
* Ajax(仅支持同源)
* WebSocket(不受同源性限制)
* CORS(都支持新的W3C通信标准)
如何创建Ajax
* xmlhttprequest对象的工作流程
*兼容性处理
*事件的触发条件
*触发事件的顺序
代码：
var xhr=XMLHttpRequest？新款XMLHttpRequest(:)新款
窗户。活动对象('微软')
var data=opt.data，
url=opt.url，
type=opt.type.toUpperCase()，
dataArr=[]；
for(数据中的var k){ 0
dataarr . push(k '=' data[k])；
if(类型===' GET '){ 0
url=url '？'dataarr . join(“”)；
xhr.open(类型，url.replace(/？$/g ' '，true)；
xhr . send()；
if(type===' POST '){ 0
xhr.open(类型，url，true)；
xhr . setrequestheader(' Content-type '，' application/x-www-form-URL encoded ')；
xhr . send(data . join(“”))；
xhr . onload=function(){ 0
if(xhr . status===200 | | xhr . status===304){ 0
var res
if(opt . success opt . success instance of Function){ 0
res=xhr.responseText
if(RES===' string '){的类型
RES=JSON . parse(RES)；
opt.success.call(xhr，res)
} else {
if(opt . error opt . error instance of Function){ 0
opt.error.call(xhr，RES)；
同源的，我们可以直接用Ajax和后端的同学做数据通信，但是遇到跨域请求的时候，就要换到手里的Ajax密钥重新匹配密钥才能开锁。
跨域通信的几种方式
* JSONP
*哈希
*邮件后(HTML5)
* WebSocket
* CORS(新的W3C通信标准)
JSONP
* JSONP原理：客户端可以动态创建脚本标签异步加载，服务器回调返回客户端定义的方法名，让客户端调用获取数据。
仅支持获取请求(获取和发布之间的区别暂时不在此详述)
代码：
//来自客户端
送请求
Hash
* Hash原理：通过window.onhashchange事件监听来获取url中hash值来实现数据传输。与Get一样，有Url长度限制
代码：
// A中代码
var B = document.getElementdByTagName('iframe');
B.src = B.src + '#' + 'data';
// B中代码
window.onhashchange = function(){
var data = window.location.hash;
postMessage
* postMessage是HTML5的API，可参考开发文档window.postMessage
代码：
// A.com向B.com发送信息
Bwindow.postMessage('data','http://B.com')
// B中监听
window.addEventListener('message', function(event){
console.log(event.origin); // http://A.com
console.log(event.source); // Bwindow
console.log(event.data); // data
}, false)
项目中应用场景：
* 页面和其打开的新窗口的数据传递
* 多窗口之间消息传递
* 页面与嵌套的iframe消息传递
* 上面三个问题的跨域数据传递
WebSocket
* WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，本身不受同源限制。
代码：
// WebSocket代码示例
var ws = new WebSocket('wss://echo.websocket.org');
ws.onopen = function (evt) {
console.log('Connection open ...');
ws.send('Hello WebSocket!');
};
ws.onmessage = function (evt) {
console.log('Received Message: ' + evt.data);
ws.close();
ws.onclose = function (evt) {
console.log('Connection closed.');
CORS
* CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
* 浏览器兼容在XHR(IE8/9)及XHR2(>=IE10)下需要做兼容处理。
代码：
// CORS代码示例
fetch('/url', {
method: 'get'，
}).then(function(res){
...
}).catch(function(err) {
// 错误
})
总结
* JSONP有更好的兼容性，能兼容低版本浏览器，但是基于Get传输数据，会因为浏览器Url长度限制而限制数据大小。CORS在不考虑低版本浏览器时，无疑是目前最好前后端通信方案（单向），双向选择WebSocket，而多个页面之间的数据通信，如内嵌iFrame等，则推荐postMessage。
* 每种方案有不同的应用场景，解决问题不只有一种解决方案，实际项目开发中，需根据实际需求来挑选最优的方案。
黑马程序员成都java基础班 28期 2019.6.24开班
黑马程序员成都java基础班 29期 2019.7.10开班
黑马程序员成都java基础班 30期 2019.7.28开班
黑马程序员成都前端基础班 3期 2019.7.10开班
黑马程序员成都UI/UE基础班 首期 2019.7.5开班 首期学费优惠
黑马程序员成都python基础班 2期 2019.7.20开班