资讯专栏INFORMATION COLUMN

对前后端通信的基本了解——如何通信、跨域?

SnaiLiu / 1239人阅读

摘要:表单最原始的是如何通信的基本通信原理浏览器可以发出请求与接收响应,实现在页面不刷新的情况下和服务端进行数据交互。响应的状态为或者。

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原理
利用2.JSONP和AJAX对比
JSONP和AJAX相同,都是客户端向服务器端发送请求,从服务器端获取数据的方式。但AJAX属于同源策略,JSONP属于非同源策略(跨域请求)
3.JSONP优缺点
JSONP优点是兼容性好,可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性
4、GET与post区别?
POST与GET的区别
1、GET请求会被浏览器主动缓存,而POST不会
2、GET请求参数会被完整保留在浏览器历史记录里,而POST中参数不会被保留
3、GET请求在URL中传送的参数是有长度限制的,而POST没有限制
4、GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息
本质上都建立在TCP链接上

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105263.html

相关文章

  • 杂谈:前Web通信

    摘要:作为开发同学的小伙伴客户端的浏览器,有点小调皮还做了一个同源策略的限制,当我们的数据请求遇到不同源的情况下跨域,我们就得尝试其它的通信方法,不能一条道走到黑。 showImg(https://segmentfault.com/img/bVburZO?w=600&h=450); Web2.0以来,Ajax的出世,解决了传统表单提交页面跳转,闪烁白屏等问题。使得Web页面可以实现局部更新,...

    Betta 评论0 收藏0
  • 《前竹节》(1)【跨域通信

    摘要:一同源策略用户浏览网站时难免需要将一些经常用到的信息,缓存在本地以提升交互体验,避免一些多余的操作。无法获得请求不能发送同源策略是必要的,但这些限制有时也会对一些合理的使用带来不便,这便引出了跨域通信的需求。 一、同源策略 用户浏览网站时难免需要将一些经常用到的信息,缓存在本地以提升交互体验,避免一些多余的操作。那么这些信息中难免有些就会涉及用户的隐私,怎么保证用户的信息不在多个站点之...

    Lycheeee 评论0 收藏0
  • 高级前面试题大汇总(只有试题,没有答案)

    摘要:面试题来源于网络,看一下高级前端的面试题,可以知道自己和高级前端的差距。 面试题来源于网络,看一下高级前端的面试题,可以知道自己和高级前端的差距。有些面试题会重复。 使用过的koa2中间件 koa-body原理 介绍自己写过的中间件 有没有涉及到Cluster 介绍pm2 master挂了的话pm2怎么处理 如何和MySQL进行通信 React声明周期及自己的理解 如何...

    kviccn 评论0 收藏0

发表评论

0条评论

SnaiLiu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<