当用户在地址栏输入URL,搜索美女,点击回车后发生了什么?这其中的道理知道吗?


当用户在地址栏输入URL点击回车后发生了什么?

  1. 用户输入URL地址

  2. 对URL地址进行DNS域名解析

    1. 览器收到URL后,先去本地host文件中查找是否有对应的域名IP关系,如果有即向IP地址发起请求;如果没有,将到DNS服务器中查找。

      • 浏览器就会发起一个DNS的系统调用,就会向本地配置的首选DNS服务器(一般是电信运营商提供的,也可以使用像Google提供的DNS服务器)发起域名解析请求。还没有查找到就会进行轮询。
      • 先是会找根域的DNS的IP地址(这个DNS服务器都内置13台根域的DNS的IP地址),找打根域的DNS地址,就会向其发起请求。
      • 根域发现这是一个顶级域com域的一个域名,于是就告诉运营商的DNS我不知道这个域名的IP地址,但是我知道com域的IP地址,你去找它去,于是运营商的DNS就得到了com域的IP地址,又向com域的IP地址发起了请求。
      • 是就把找到的结果发送给运营商的DNS服务器,这个时候运营商的DNS服务器就拿到了www.linux178.com这个域名对应的IP地址,并返回给Windows系统内核,内核又把结果返回给浏览器,终于浏览器拿到了www.linux178.com对应的IP地址,该进行一步的动作了
    2. DNS分为本地DNS服务器,根DNS服务器和各个子DNS服务器。

    3. DNS查询过程:

      1. 查看浏览器内部缓存

      检测域名是否存在于浏览器缓存中,如果有缓存直接使用,没有则下一步。打开 chrome://net-internals/#dns 即可查看本机浏览器的 dns 缓存。

      1. 系统缓存

      浏览器会调用一个类似 gethostbyname 的库函数,此函数会先去检测本地 hosts 文件,查看是否有对应 ip。

      PS: 这里有一个点,localhost 默认 ip 是 172.0.0.1,这是一个回路段,也叫换回接口。也就是不会发往服务器,是直接在本地打开的。

      1. 路由器缓存、ISP 缓存

      如果浏览器和系统缓存都没有,系统的 gethostname 函数就会像 DNS 服务器发送请求。而网络服务一般都会先经过路由器以及网络服务商(电信),所以会先查询路由器缓存,然后再查询 ISP 的 DNS 缓存。

      1. 本地 DNS 服务器

      通常为自己计算机搭建的小型 DNS 服务器,自我使用,属于 DNS 优化的一部分。

      1. 域名服务器
  3. 建立TCP连接(三次握手)

    1. 客户端发送连接请求报文段,将SYN位置为1,Seq为x;然后,客户端进入SYN_SEND状态,等待服务器的确认;
    2. 服务器收到SYN报文段。服务器收到客户端的SYN报文段,需要对这个SYN报文段进行确认,设置ACK为x+1;同时,自己自己还要发送SYN请求信息,将SYN位置为1,Seq为y;服务器端将上述所有信息放到一个报文段(即SYN+ACK报文段)中,一并发送给客户端,此时服务器进入SYN_RECV状态;
    3. 客户端收到服务器的SYN+ACK报文段。然后将ACK设置为y+1,向服务器发送ACK报文段,这个报文段发送完毕以后,客户端和服务器端都进入ESTABLISHED状态,完成TCP三次握手。

  • 为什么是三次握手而不是两次,四次呢?

    1. 为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误。
    2. “已失效的连接请求报文段”的产生在这样一种情况下:client发出的第一个连接请求报文段并没有丢失,而是在某个网络结点长时间的滞留了,以致延误到连接释放以后的某个时间才到达server。本来这是一个早已失效的报文段。但server收到此失效的连接请求报文段后,就误认为是client再次发出的一个新的连接请求。于是就向client发出确认报文段,同意建立连接。假设不采用“三次握手”,那么只要server发出确认,新的连接就建立了。由于现在client并没有发出建立连接的请求,因此不会理睬server的确认,也不会向server发送数据。但server却以为新的运输连接已经建立,并一直等待client发来数据。这样,server的很多资源就白白浪费掉了。采用“三次握手”的办法可以防止上述现象发生。例如刚才那种情况,client不会向server的确认发出确认。server由于收不到确认,就知道client并没有要求建立连接。”
  1. 浏览器发送HTTP请求报文

  2. 服务器返回HTTP响应报文

  3. 关闭TCP连接(四次挥手)

    1. 主机1(可以使客户端,也可以是服务器端),设置Seq和Ack,向主机2发送一个FIN报文段;此时,主机1进入FIN_WAIT_1状态;这表示主机1没有数据要发送给主机2了;
    2. 机2收到了主机1发送的FIN报文段,向主机1回一个ACK报文段,Ack为Seq加1;主机1进入FIN_WAIT_2状态;主机2告诉主机1,我“同意”你的关闭请求;
    3. 主机2向主机1发送FIN报文段,请求关闭连接,同时主机2进入LAST_ACK状态;
    4. 主机1收到主机2发送的FIN报文段,向主机2发送ACK报文段,然后主机1进入TIME_WAIT状态;主机2收到主机1的ACK报文段以后,就关闭连接;此时,主机1等待2MSL后依然没有收到回复,则证明Server端已正常关闭,那好,主机1也可以关闭连接了。
    5. img
    6. 为什么需要四次挥手,而不是三次?
      1. 关闭连接时,当Server端收到FIN报文时,很可能并不会立即关闭SOCKET,所以只能先回复一个ACK报文,告诉Client端,“你发的FIN报文我收到了”。只有等到我Server端所有的报文都发送完了,我才能发送FIN报文,因此不能一起发送。故需要四步握手。。
  4. 浏览器解析文档资源并渲染页面

AJAX:

  • 概述:AJAX用户端可以向服务器端悄悄的发起上行请求,服务器端悄悄的做出相应的下行响应。在页面没有重新加载情况下实现页面局部更新。
  • Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。

JQuery使用AJAX:

  • //给按钮绑定单击事件
     $("button:eq(0)").click(function () {
         //向服务器端悄悄发起上行请求----GET,拉去服务器数据
         //第一个参数向向服务器端请求path
         //第二个参数:客户端向服务器端额外传递一些数据(可有可无)
         //第三个参数:当服务器响应数据成功的时候会立即执行一次
         $.get("./data.txt", {
             "name": "小明",
             'ps': 123
         }, function (data) {
             //data:就是服务器端响应数据
             //修改H1标题
             $("h1").html(data);
         });
     });
     //第二个按钮发起POST请求
     $("button:eq(1)").click(function () {
         //向服务器端去悄悄的发起上行请求----POST,拉去服务器数据
         $.post("./data.txt", function (data) {
             //在页面没有重新加载情况下实现页面局部跟新
             $("h1").html(data);
         });
        
     });
        
     //第三个按钮单击事件
     $("button:eq(2)").click(function () {
         //向服务器端发起POST请求
         //当前这个方法可以发起GET、POST,请求参数配置务必是一个JSON数据格式
         $.ajax({
             // 请求网址
             "url": "./data.txt",
             //请求方式
             "type": "post",
             //给服务器额外传递数据
             "data": {
                 "a": 1
             },
             //回调函数:可以接受服务器数据
             "success": function (data) {
                 //当服务器响应成功的时候会立即执行一次
                 $("h1").html(data);
        
             }
        
         });
        
     });
    

原生AJAX技术

  • <body>
        <h1>我是默认文本</h1>
        <button>单击我悄悄发起上行请求----GET</button>
    </body>
    
    </html>
    <script>
        //获取标签
        var h1 = document.querySelector("h1");
        var btn = document.querySelector("button");
        //单击按钮发起上行请求
        btn.onclick = function () {
            //悄悄发起上行请求
            if (window.XMLHttpRequest) {
                //高级浏览器写法
                var xhr = new XMLHttpRequest();
            } else {
                //IE低版本写法
                var xhr = new ActiveXObject("msxml2.0xmlhttp");
            }
            //设置请求方式
            xhr.open("get", "./data.txt", true);
            //发送请求
            xhr.send();
            //监听就绪状态
            xhr.onreadystatechange = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    //在页面没有重新加载情况下实现页面局部跟新
                    h1.innerHTML = xhr.responseText;
                }
            }
    
        }
    </script>
    

状态码

  • 200 请求成功

    404 请求失败

    500 服务器端错误

    301是永久重定向,而302是临时重定向**

GETPOST区别

相同地方:GET、POST都属于上行请求

不同地方:

GETPOST
相对而言不安全相对而言安全一些
给服务器额外传递数据是由上限的相对而言没有上限
便于分享不便于分享

AJAX技术不能跨域请求数据

  • 当用户发起多次请求的时候,如果协议|域名|端口号不同情况下,

    称之为跨域。

第一次请求第二次请求是否跨域
http://www.baidu.comhttp://www.sina.com跨域(域名不同)
http://www.baidu.com:80http://www.baidu.com:8080跨域(因为端号不同)
http://127.0.0.1/index.htmlhttp://127.0.0.1/01.php没有跨域
http://127.0.0.1http:127.0.0.2跨域(域名不同)

JSONP可以跨域请求数据

  • JSONP数据格式跨域so easy:实现原理是如下:

    • 利用script标签src属性(本身就可以跨域请求数据)
    • 利用的是将一个函数执行部分放置另外一个服务器上面
  • 跨域拉去京东数据

    <body>
        <select></select>
    </body>
    
    </html>
    <script>
        //获取下拉框
        var select = document.querySelector("select");
        //声明一个同名函数
        function jQuery4494404(arr) {
            //遍历数组
            for (var i = 0; i < arr.length; i++) {
                //创建节点
                var op = document.createElement("option");
                op.innerHTML = arr[i].name;
                select.appendChild(op);
            }
        }
    </script>
    <!-- 将京东服务器调用部分引入 -->
    <script src="https://fts.jd.com/area/get?fid=72&callback=jQuery4494404&_=1578732186910"></script>
    
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付 59.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值