通信类-优快云博客

本文链接：https://blog.youkuaiyun.com/s_x_c520/article/details/88652284

博客围绕前后端通信展开，介绍了同源策略及其限制，如Cookie等无法读取、DOM无法获取、AJAX请求不能发送。还阐述了前后端通信方式，包括Ajax、WebSocket、CORS等，以及创建Ajax的流程和跨域通信的几种方式，如JSONP、postMessage等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通信类

什么时同源策略及限制

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制
限制：
Cookie、localStorage和IndexDB无法读取
DOM无法获取
AJAX请求不能发送

前后端如何通信

Ajax
WebSocket
CORS

如何创建Ajax

XMLHttpRequqest对象的工作流程
兼容性处理
事件的触发条件
事件的触发顺序

util.json = function(options){
	var opt = {
		url:'',
		type:'get',
		data:{},
		success:function(){},
		error:function(){}
	}
	util.extend(opt,options)
	if(opt.url){
		var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft')
		var data = opt.data,url = opt.url,type = opt.type.toUpperCase(),dataArr = []
		for(var k in data){
			dataArr.push(k+'='+data[k])
		}
		if(type=='GET'){
			url = url+'?'+dataArr.join('&')
			xhr.open(type,url.replace(/\?$/g,''),true);
			xhr.send()
		}
		if(type=='POST'){
			xhr.open(type,url,true);
			xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
			xhr.send(dataArr.join('&'))
			
		}
		xhr.onload = function(){
			if(xhr.status==200||xhr.status===304){
				var res;
				if(opt.sucess&&opt.success instanceof Function){
					res = xhr.responseText;
					if(typeof res=='string'){
						res = JSON.parse(res)
						opt.success.call(xhr,res)
					}
				}else{
					if(opt.error&&opt.error instanceof Function){
						opt.error.call(xhr.res)
					}
				}
			}
		}
	}
}