摘要:表单最原始的是如何通信的基本通信原理浏览器可以发出请求与接收响应,实现在页面不刷新的情况下和服务端进行数据交互。响应的状态为或者。
1、什么是浏览器的同源政策限制?
端口,域名,协议 ,只要一个不一样就跨域2、前后端如何通信?
常见通信的几种方式
Ajax : 短连接
Websocket : 长连接,双向的。
CORS fetch()
Form表单(最原始的)
Ajax是如何通信的
基本通信原理:
浏览器可以发出HTTP请求与接收HTTP响应,实现在页面不刷新的情况下和服务端进行数据交互。
实现过程:
1) 创建XMLHttpRequest对象(异步调用对象)
var xhr = new XMLHttpRequest();
2) 创建新的Http请求(方法、URL、是否异步)
xhr.open(‘get’,’example.php’,false);
3) 设置响应HTTP请求状态变化的函数。
onreadystatechange事件中readyState属性等于4。响应的HTTP状态为status==200(OK)或者304(Not Modified)。
4) 发送http请求
xhr.send(data);
5) 获取异步调用返回的数据
优点:
提高用户体验,较少网络数据的传输量
Fome表单是如何通信
基本通信原理:
通过form表单以post/get方式提交数据。
实现过程:
当你点击submit按钮时,浏览器会默认把你在input里面输入的数据,以post或get的方式提交到form表单中的action这个地址。相当于你提交表单时,就会向服务器发送一个请求,然后服务器会接受并处理提交过来的form表单,最后返回一个新的网页。
缺点:
1、单项提交,页面会发生跳转或刷新,导致用户体验不好
3、浪费宽带。
改用ajax。
了解Websocket
建立在TCP协议之上,与HTTP协议有着良好的兼容性3、跨域通信有几种?
引JSONP
Hash(url#后面的,改变页面不刷新)
postMessage(H5中新增的)
WebSocket
CORS
介绍以下最常用的JSONP
1.JSONP原理
利用