当前位置: 首页 > Web前端 > HTML5

前后端通信的基本认识——如何通信,跨域?

时间:2023-04-05 14:53:53 HTML5

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