互联网原理

1互联网原理

问题：从浏览器输入百度网址，到最终网页的显示，整个过程是什么样？

浏览器输入网址--->http://www.baidu.com:80 --->域名解析（电脑，路由器，运营商DNS服务器）--->http://202.2.2.2:80，请求包--->百度网关服务器 --->分发给相对应的服务器 ----> 程序（Java）处理请求 ---> 请求登录校验，数据库连接和获取。。。--->服务器程序返回（响应头）百度页面（html）--- 浏览器解析响应头和html页面，重复请求html页面所需要的资源,发送--->http://202.2.2.2/css/style.css:80--->html渲染页面过程，先根据html渲染出dom树，然后在根据css样式，渲染出样式树，最终完成渲染。

修改当前主机的域名解析：

C:WindowsSystem32driversetchost

修改方式：

127.0.0.1 www.xxx.com

127.0.0.1 www.boidu.com

127.0.0.1 www.taoboo.com

2 HTTP协议详解

互联网的发展非常迅速，但是万变不离其宗。学习 web 开发，需要我们对互联的交互机制有一定的了解。需要对 web 开发中客户端和服务器的交互机制以及所涉及的规范(HTTP)进行学习。

HTTP 协议详解

1、 web 交互的基本流程

图片介绍：

客户端根据用户输入的地址信息请求服务器，服务器在接收到用户的请求后进行处理，然后将处理结果响应给客户端，客户端将响应结果展示给用户。

专业术语:

请求：客户端根据用户地址信息将数据发送给服务器的过程

响应：服务器将请求的处理结果发送给浏览器的过程

问题：

客户端也就是浏览器的版本是有很多的，服务器的版本也是有很多的，如何实现不同版本的浏览器和不同版本的服务器之间的数据交互呢？

HTTP协议中提供了好多状态码，列举我们常用的：

200 返回正常

304 服务端资源无变化，可使用缓存资源

400 请求参数不合法401 未认证

403 服务端禁止访问该资源

404 服务端未找到该资源

500 服务端异常

解决：

规范浏览器和服务器的数据交互的格式。

实现：

HTTP 协议

2、 HTTP 的概念和介绍

概念：

超文本传输协议（Hyper Text Transfer Protocol）作用：

规范了浏览器和服务器的数据交互特点：

简单快速：客户向服务器请求服务时，只需传送请求方法和路径。

请求方法常用的有 GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于 HTTP 协议简单，使得 HTTP 服务器的程序规模小，因而通信速度很快

灵活：HTTP 允许传输任意类型的数据对象。正在传输的类型由Content-Type 加以标记。

无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

无状态：HTTP 协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。

缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。

3 Ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

整个过程是异步，不需要等待服务器返回数据，才执行后面的内容。

3-1 创建Ajax

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //1创建xhr对象
            var xhr = new XMLHttpRequest()
            
            //2设置发送的服务器的地址和方法
            xhr.open("GET","helloworld.txt")
            
            //3发送
            xhr.send();
            
            //4 xhr状态改变的事件进行监听
            xhr.onreadystatechange = function(){
                console.log("readyState"+xhr.readyState)
                console.log("status"+xhr.status)
                
                //显示在网页上
                if(xhr.status==200&&xhr.readyState==4){
                    var h1 = document.createElement("h1")
                    h1.innerHTML = xhr.responseText;
                    document.body.appendChild(h1)
                }
            }
            /* 返回的结果如下：
             *                 readyState2
                index.html:21 status200        状态200表示OK
                index.html:20 readyState3      响应已经开始
                index.html:21 status200        
                index.html:20 readyState4   完全接收到服务器文件，表示已经完成
                index.html:21 status200
            */
            
            //将AJAX封装成一个方法
            function ajax(){
                
            }
            
        </script>
    </body>
</html>

3-2 封装Ajax

<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <script type="text/javascript">
            //将AJAX封装成一个方法
            function ajax(url,fn) {
                //创建xhr对象
                var xhr = new XMLHttpRequest()

                //设置发送的服务器的地址和方法
                xhr.open("GET", url)

                //发送
                xhr.send()

                //xhr状态改变的事件进行监听
                xhr.onreadystatechange = function() {
                    console.log("readyState" + xhr.readyState)
                    console.log("status" + xhr.status)
                    /* 返回的结果如下：
                     *                 readyState2
                        index.html:21 status200        状态200表示OK
                        index.html:20 readyState3      响应已经开始
                        index.html:21 status200        
                        index.html:20 readyState4   完全接收到服务器文件，表示已经完成
                        index.html:21 status200
                    */

                    //显示在网页上
                    if(xhr.status == 200 && xhr.readyState == 4) {
                        fn(xhr)
                        /*封装成一个函数fn()
                         * var h1 = document.createElement("h1")
                         * h1.innerHTML = xhr.responseText;
                         * document.body.appendChild(h1)
                         */
               

                    }
                }

            }

//JSON数据转换成对象，JSON.pause(josn数据)

ajax("./recommend.json",function(xhr){
                console.log(xhr)
                var jsonObj = JSON.parse(xhr.responseText)
                console.log(jsonObj)//在页面生成得到的对象
                var arr = jsonObj.list;
                arr.forEach(function(item,index){
                    var div = document.createElement("div")
                    div.innerHTML = `<h3>${item.title}</h3><p>${item.description}</p><p>${item.author}</p>`
                    document.body.appendChild(div)
                })
            })

实例：用聚合数据作一个查找天气的应用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <input type="text" name="weather" id="weather" value="" placeholder="请输入要查找天气的城市"/>
        <div class="weather">
            
        </div>
        
        <!--用聚合数据作一个查找天气的应用-->
        <script src="js/weather.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            var inputSearch = document.querySelector("#weather")
            inputSearch.onkeypress = function(e){
                if(e.key=="Enter"&&inputSearch.value!=""){
                    var urlHttp = `https://free-api.heweather.net/s6/weather/now?location=${inputSearch.value}&key=c8b18212397748599a7fb0bfa1022b56`
                    ajax(urlHttp,function(xhr){
                        //console.log(xhr)
                        var jsonObj = JSON.parse(xhr.responseText)
                        console.log(jsonObj)
                        var basic = jsonObj.HeWeather6[0].basic
                        console.log(basic)
                        var now = jsonObj.HeWeather6[0].now
                        console.log(now)
                        var update = jsonObj.HeWeather6[0].update
                        console.log(update)
                        
                        var weather = document.querySelector(".weather")
                        weather.innerHTML = `
                        <h1>城市:${basic.location}</h1>
                        <h3>时间:${update.loc}</h3>
                        <h2>温度:${now.tmp}</h2>
                        <h3>体感温度:${now.fl}</h3>
                        <h3>天气状况:${now.cond_txt}</h3>
                        <img src="https://cdn.heweather.com/cond_icon/${now.cond_code}.png"/>
                        <h3>风向:${now.wind_dir}</h3>`
                        
                        //通过地址从后台得到相应
                        var lifestyleUrl = `https://free-api.heweather.net/s6/weather/lifestyle?location=${inputSearch.value}&key=c8b18212397748599a7fb0bfa1022b56`
                        ajax(lifestyleUrl,function(xhr){
                            //console.log(xhr)
                            var jsonObj = JSON.parse(xhr.responseText)
                            console.log(jsonObj)
                            var lifestyle = jsonObj.HeWeather6[0].lifestyle
                            console.log(lifestyle)
                            
                            weather.innerHTML += `
                            <h2>生活指数:${lifestyle[0].brf}</h2>
                            <h3>生活指数详细:${lifestyle[0].txt}</h3>`
                    
                    })
                        
        
                    })
                
                    
                
                }
            }
            

        </script>
    </body>
</html>