jsonp和GET、POST的跨域原理解析及GET和POST的区别

本文介绍了浏览器的同源策略及其对前端开发的影响,并详细解释了两种常用的跨域请求方法:JSONP和CORS(包括GET、POST请求)。探讨了它们的工作原理、特点及应用场景。
同源策略:
    同源策略是1995年 Netscape 公司引入浏览器的,目前浏览器都是实行这个策略,
    同源策略是为了保证用户信息的安全,防止恶意的网站窃取数据的。
    同源指的是三个相同:协议相同、域名相同、端口号相同
但是也是因为浏览器同源策略的原因,前端页面不能跨域请求所需资源
但是在日常的WEB开发中,需要进行跨域请求,常用有两种方式可以跨域请求所需资源
1:JSONP
    JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,
    服务器改造非常小。
    JSONP的原理是利用script标签的src属性可以进行不受同源策略的限制,进行跨域请求数据的属性,在
    HTML页面中添加一个script标签,向服务器发送请求,服务器收到请求后,返回数据,
    将数据放在指定的回调函数中,回调函数中可以对数据进行操作

2:GET、POST
CORS是W3C标准,它允许浏览器向跨源服务器发送AJAX请求,当浏览器发送请求的时候,会在请求头自动添加上origin字段,值为发送请求的页面的所在域名,请求到达服务器,服务器会根据这个字段校验,如果这个源不在许可范围内,会有一个正常的响应,但是响应头部没有Access-Control-Allow-Origin,浏览器报抛出一个错误,会被xhr的onerror函数捕获,但是HTTP的状态码也有可能是200;如果请求的类型是PUT或者DELETE等特殊的请求方法,或者content-type:application/json,那么,这个请求为非简单请求,浏览器会在发送正式请求前先发送一个预检请求,预检请求中的请求头部信息除了origin源字段以外,还有Access-Control-Allow—Method和Access-Control-Allow—Header,预检请求是一个OPTION类型的请求,只要服务端通过了预检请求,之后的请求就和简单请求是一样的
GET、POST是ajax请求,ajax请求是基于XMLHttpRequest对象的跨域请求方式(低版本的ie是   
 ActiveXObject对象),XMLHttpRequest是ajax的核心机制,
它是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,
而不阻塞用户。达到无刷新的效果。
GET和POST的区别:
    1.post更安全(不会作为url的一部分,不会被缓存、保存在服务器日志、以及浏览器浏览记录中)
    2.post发送的数据量更大(get有url长度限制)
    3.post能发送更多的数据类型(get只能发送ASCII字符)
    4.post比get慢
    5.get是幂等的,而post不是幂等的
    6.get可以被缓存,post不可以被缓存   

因为get请求的请求参数是放在header中(添加在链接后面),而post请求的参数是放在body中,其实url的长度限制不是get和post所决定的,而是浏览器有所限制,和get、post没有基本没有关系
get和post相比,要快,是因为get和post的请求过程不同,不多前三步都是一样的,都是要先经过和服务器的三次握手:
1.浏览器请求tcp连接(第一次握手)
2.服务器答应进行tcp连接(第二次握手)
3.浏览器确认,并发送get请求头和数据(第三次握手,这个报文比较小,所以http会在此时进行第一次数据发送)
  get请求在第四步就会接收到了服务器返回的数据,而post请求在第四步是接收到服务器发送的100 continue指令,客户端在发送数据请求服务端,服务端才会去返回数据,
  就是说POST比GET多进行了一次客户端和服务器的打交道,GET请求产生了一个TCP数据包,而POST请求产生了两个TCP数据包

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值