关于http和https还有跨域问题与JSONP

11/14/2017 1 条评论 1.15k 次阅读 1 人点赞

URL和URI

URI:统一资源标识符
作用:用于标识某一互联网资源名称的字符串。
URL:统一资源定位符
作用:标识资源的地点。
URL其实是URI的子集


还是先想一个问题~~

在浏览器输出了一个URL之后,都发生了什么事情?

1.浏览器通过DNS把域名解析到服务IP
2.客户端通过TCP协议建立到服务器的TCP连接。
三次握手四次挥手
3.客户端(浏览器)向web服务端(HTTP服务器)发送HTTP协议包,请求服务器里面的资源文档。
4.服务器向客户端发送HTTP协议应答包。
5.客户端和服务器断开,客户端开始解释处理HTML文档。

上边那几句话可能有很多你不了解的名词,那么就一一说一下吧😊

  • DNS:
    简单来说,我们看到的每一个网页一开始都是一个单独的ip地址, 比如61.135.169.125这个ip地址对应的就是百度首页,但输入www.baidu.com也可以找到同一个网页。
    这是由于DNS解析服务帮我们把这个便于记忆的域名先给转化成了机器可以识别的ip地址,然后再通过ip地址去访问这个页面。
    当DNS解析出现了错误【http状态码105】时候,我们输入www.baidu.com之后就会显示无法找到资源,就是因为这个原因。
    当然我们在url里面直接输入ip地址也是可以跳转了,而且比输入域名要快,因为不需要进行DNS解析过程。
  • TCP协议和UDP协议
    🍉TCP:传输控制协议
    是基于连接的协议,也就是说,在正式收发数据前,必须和对方建立可靠的连接。
    TCP需要 三次握手建立连接,四次挥手关闭连接
    ✨三次握手

    • 客户端先发送一个带有SYN(synchronous建立联机)标志的报文给服务器端。
    • 服务器端收到后,会回传一个ACK(acknowledgement确认)标志的报文,来表示传达确认信息。
    • 最后客户端再回传一个带有ACK标志的报文,表示握手结束。

    ✨四次挥手

    • 客户端向服务器端发送一个带有FIN/ACK(结束确认)标志的报文,告诉服务器要关闭TCP连接。
    • 服务器收到这个报文之后,返回一个带有ACK标志的报文。
      告诉客户端,你的请求我收到了,但是我还没准备好,请继续等我的消息
    • 服务器确认与客户端没有数据传输了,发送一个带有FIN/ACK(结束确认)标志的报文给客户端。
    • 客户端返回一个带有ACK标志的报文,表示挥手结束。

    🍉UDP:用户数据报协议
    面向非连接,就是在正式通信前不必与对方先建立连接,不管对方状态就直接发送。与手机短信非常相似:你在发短信的时候,只需要输入对方手机号就OK了。


HTTP请求方法

上一篇我们说到了,Ajax口可以通过GET或POST方法提交数据,http请求不只有这两个。

HEAD 类似于get请求,只不过返回的响应中没有具体的内容,用于获取报头
DELETE 请求服务器删除指定的页面
OPTIONS 允许客户端查看服务器的性能
TRACE 回显服务器收到的请求,主要用于测试或诊断

HTTP状态码

状态代码有三位数字组成,第一个数字定义了响应的类别,共分五种类别:

响应类别
1xx 接受的请求正在处理
2xx 正确处理请求完毕
3xx 重定向,需要附加操作才能完成请求
4xx 客户端错误--请求有语法错误或请求无法实现
5xx 服务器端错误--服务器未能实现合法的请求

常见状态码

105    //DNS解析失败
200    //请求被正常处理
301    //永久重定向
302    //临时重定向
303    //请求的资源存在另一个URL,由于用了get请求
400    //报文中有语法错误
403    //服务器收到请求,但是拒绝提供服务
404    //服务器上没有该资源
500    //服务器发生不可预期的错误
503    //服务器超负载了,正在维护

HTTP请求报文

HTTP响应报文


跨域问题

Ajax也是通过url来获取数据,同样也会受到同源策略的限制。

以下几个方法可以实现跨域

1.Flash。

这个方法是很久以前使用的,现在不用做考虑。

2.服务器代理中转。

服务器不会受到同源策略的限制。

3.🍉🍉jsonp🍉🍉

原理:

  • Web页面上用<script> 引入 js文件时则不受是否跨域的影响
    (不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如script,iframe,img)
  • 于是我们把数据放到服务器上,并且数据为json形式(因为js可以轻松处理json数据)
  • 因为我们无法监控通过<script>的src属性是否把数据获取完成,所以我们需要做一个处理。
  • 客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理。
  • 为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
    更具体的大家可以点击这里

    4.iframe+document.domain。
  • 只有在主域相同而子域不同的情况下这种方式才可以使用。
    例如百度的主网页是www.baidu.com,下面还有很多像zhidao.baidu.com等网页,他们就是www.baidu.com这个主域下的子域, baidu.com是主域名。document.domain 只能等于主域名
  • 这种方法安全性差,并且,如果一个页面中引入多个iframe,这些iframe,必须都得设置相同的domain,才能正常操作。
5.iframe+location.hash。
  • 改变hash值并不会导致页面刷新,所以可以利用hash值来进行数据传递,hash值放到了url里面会有长度的限制。
6.iframe+window.name。
  • 利用iframe的src属性实现让外域转向本地域,这样数据就由iframe的window.name从外域传递到了本地域,但这样通信的数据量会很小。
7.HTML5 postMessage方法。

otherWindow.postMessage(message, targetOrigin);

  • otherWindow: 其他窗口的一个引用,可以是iframe的contentWindow属性、window.open的返回值、通过name或下标从window.frames取到的值
  • message: 将要发送到其他 window的数据。
  • origin: 属性来指定哪些窗口能接收到消息事件,其值可以是字符串"*"(表示无限制)或者一个URI。
  • 如下出现的一些问题:
  • 信息XMLHttpRequest cannot load https://www.klandmall.com/app/index/index. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8020' is therefore not allowed access.
    

作者:二璇妹妹
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

技术爸爸

技术爸爸,每天学习一点积攒一点时间久了就强大了!

文章评论(1)

  • 技术爸爸

    开发APP,在hbuilder上调试,必须链接手机,在手机上操作,否则会出现跨域问题。不管在浏览器还是hbuilder上,都是显示跨域请求,不可以

    11/14/2017