面试准备—详解网络与ajax请求(手写jsonp)

一、网络

1.IP地址

IP是相对网络来说的

Internet上的计算机IP是唯一的,一个IP地址对应一个计算机。
一台计算机上面可以有好多个服务,也就是一个ip地址对应了好多个域名,即一个计算机上由好多网站。
IP地址的格式:

IP地址分为四个段:xxx.xxx.xxx.xxx,每个段0~255,每个段,都是由8个0、1组成的。

IP地址的分类:
⼀个IP地址分为两个部分:网络ID,主机ID
A类:0.0.0.0 ~ 127.255.255.255(⼀个网络能有1600+万台)
B类:128.0.0.0 ~ 191.255.255.255(172.16.0.0 ~ 172.31.255.255)
C类:192.0.0.0 ~ 223.255.255.255(192.168.xxx.xxx)
D类:(多播地址)
E类:

2.域名与DNS

域名是相对网站来说的:www.baidu.com

DNS(Domain name system)则是关联IP和域名的域名系统,可以将域名映射到IP地址。
问:能通过域名直接访问到⼀台机器吗?
答:不可以的。

用域名和IP形成对应关系。
首先,计算机是不知道域名对应的IP的。
问路由器,如果路由器认识这个域名,就返回⼀个IP,然后计算机访问这个IP。
如果路由器不认识,他就问上⼀层路由器。
如果问到了城市这个级别的路由器的时候,DNS服务器。
如果DNS服务器不认识这个域名,继续向上级DNS服务器查找。
互联网建立的时候,13台总的DNS服务器。

3.网页访问

当向浏览器的地址栏中输入⼀个url按回⻋之后,网络中都会发⽣什么?
⽐如输⼊的是123.xyz

  1. 当输入域名时,首先找的不是DNS服务器而是本地的一个文件C:\Windows\System32\drivers\etc\hosts 查看有无对应关系,如果有,就直接使用,若没有再去找DNS服务器。可以通过更改本机文件中的对应关系,屏蔽一些网站。
  2. 家里路由器
  3. 上级路由,直到DNS服务器
  4. 浏览器根据请求的URL交给DNS域名解析,找到真实IP;
  5. 浏览器根据 IP 地址向服务器发起 TCP 连接,与浏览器建立 TCP 三次握手
    a.客户端向服务器发送一个建立连接的请求
    b.服务器接到请求后发送同意连接的信号
    c.客户端接到同意连接的信号后,再次向服务器发送了确认信号,然后客户端与服务器的连接建立成功
  6. 浏览器发送HTTP请求
    浏览器根据 URL 内容生成 HTTP 请求,请求中包含请求文件的位置、请求文件的方式等等;
  7. 服务器处理请求并返回HTTP报文(HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。):
    a.服务器接到请求后,会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件;
    b.服务器将得到的 HTML 文件发送给浏览器;
    c.在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页;
    d在执行 HTML 中代码时,根据需要,浏览器会继续请求图片、CSS、JavsScript等文件,过程同请求 HTML 。
    8.断开连接

4.五层网络模型

在这里插入图片描述

5.GET和POST区别

  1. 是基于什么前提的?如果什么前提都没有,不使⽤任何规范,只考虑语法和理论上的
    HTTP协议。
    GET和POST几乎没有什么区别,只有名字不⼀样。
  2. 如果是基于RFC规范的。
    (1)理论上的(Specification):GET和POST具有相同语法的,但是有不同的语义。
    get是用来获取数据的,post是用来发送数据的,其他方面没有区别。
    (2)实现上的(Implementation):各种浏览器,就是这个规范的实现者。
    常见的那些不同:
    1)GET的数据在URL是可⻅的。POST请求不显示在URL中。
    2)GET对⻓度是有限制的,POST⻓度是⽆限的。
    3)GET请求的数据可以收藏为书签,post请求到的数据不可收藏为书签。
    4)GET请求后,按后退按钮、刷新按钮⽆影响,post数据会被重新提交。
    5)GET编码类型:application/x-www-form-url,post的编码类型:有很多种。
    encodeapplication/x-www-form-urlencoded
    multipart/form-data
    6)GET历史参数会被保留在浏览器⾥,psot不会保存在浏览器中的。
    7)GET只允许ASCII.post没有编码限制,允许发⼆进制的。
    8)GET与POST相比,GET安全性较差,因为所发的数据是URL的⼀部分。

6.Cookie和Session

  1. 如果我们⽤JS的变量来存数据,那么在⻚⾯关闭的时候,数据就消失了。
  2. 保持登录状态是怎么做到的呢?
    按照正常的HTTP协议来说,是做不到的。
    因为HTTP协议,上下⽂⽆关协议。
  3. 所以说前端页面上,有可以持久化存储数据的东⻄。⼀旦登录成功,我就记载在这个里面(cookie)。
    Cookie是有限制的,自己只能网自己域名下注cookie。
    Cookie是存在浏览器里的,不是存在某个页面上的。是可以长期存储的。Cookie即使是保存在浏览器⾥,不同cookie存放在不同的域名下的。
    1.Cookie
    初始状态:没有登录
    访问百度的登录,输⼊用户名,密码。
    如果用户名和密码是正确的。百度的后端会向这个域名下,设置⼀个Cookie。写⼊用户的基本信息(加密的)。
    以后每⼀次向百度发送请求,浏览器都会自动带上这些Cookie。
    服务端(后端)看到了带有ID的cookie,就可以解析这个加密的ID,来获取到这个用户本身的ID。
    如果能获取到本身的ID,那么就证明这个用户已经登录过了。所以后端可以继续保留⽤户的信息。
    缺点:如果某个坏⼈,复制了我浏览器里的cookie,他就可以在他的电脑上登录我的账号了。
    2.Session
    在这里插入图片描述
    数据存在Session上也有缺点
    在⽤户量很⼤的时候,服务器端很耗资源的。
    因为后端可能不止⼀台服务器,用户的登录信息,⼀般只存在⼀台服务器上。
    因为用户的登录操作,在哪台机器上执⾏的,就⼀般存在哪台机器上。
    需要通过反向代理。(轮询,IP哈希。)

7.端系统通信方式

B/S结构 C/S结构
Client/Server——Client(app、软件)只负责内容的展示,Server负责提供内容。
Browser/Server——Browser(页面)只负责内容的展示,Server负责提供内容。

  1. index.html 页面的本质是什么? 页面的本质就是⼀个字符串。带有HTML格式的字符串。
  2. 浏览器 向服务器 请求⼀个⻚⾯的本质是什么?
    (1)www.baidu.com
    (2)服务器接收到这个请求后,服务器想要把这个页面的内(HTML格式的字符串)返回给浏览器。
    (3)页面的字符串存在哪⾥呢?存在HTML文件里。例如:index.html
    (4)服务器端要读取⽂件。
    (5)将读取出来的内容返回给浏览器。
  3. 最后返回的是⼀个字符串,这个字符串的来源可能是⽂件,可能是缓存,可能来自于数据库。
  4. 服务器:严格的说,服务器是⼀台计算机,这台计算机,只提供服务。(不是用户用的)
  5. 但是,我们常说的这个服务器,指的是服务容器,不是服务器。
  6. 服务容器:是⼀个程序。程序可以监听⼀个端口。读取⽂件,并且返回。
  7. 如果我们想通过访问服务器(服务容器)的方式,来访问我们自己写的页面。我们就得装⼀个服务容器的程序。

8.HTTP和HTTPS的区别

  1. HTTPS 协议需要到 CA (Certificate Authority,证书颁发机构)申请证书,一般免费证书较少,因而需要一定费用
  2. HTTP 是超文本传输协议,信息是明文传输,HTTPS 则是具有安全性的 SSL 加密传输协议。
  3. HTTP 和 HTTPS 使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
  4. HTTP 的连接很简单,是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议,比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

二、ajax请求

1.网络请求

  1. 在浏览器中直接输入网址(无法用代码控制)
  2. location.href=“url”,可以发出网络请求,但是页面会发生跳转。(页面会跳转)
  3. 带有src属性的标签()。请求是可以发出的,服务端是可以处理的也是可以返回的。但是返回之后,能否被应用,还要看浏览器。(页面无法处理返回结果)
  4. 带有href属性的标签()。请求是可以发出的,服务端是可以处理的也是可以返回的。但是返回之后,能否被应用,还要看浏览器。(页面无法处理返回结果)
  5. 带有action属性的标签。例如form表单,也可以向后端发出请求。但是form表单发出请求之后,也会页面跳转。(页面会跳转)
    希望有一种方式,可以用代码控制,页面不会跳转,服务端返回的结果我可以用js继续处理。
  6. ajax
//创建HTTP请求对象
var xhr = null;
if (window.XMLHttpRequest) {
	xhr = new XMLHttpRequest();
} else {
	xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//(1)请求方式,get,post
//(2)必须有url
xhr.open("get", "http://developer.duyiedu.com/edu/testAjaxCrossOrigin");
xhr.send();//发送ajax请求提示跨域访问

2.跨域访问资源

哪些东西属于资源?
js⽂件算吗?js⽂件肯定是算资源的,但是js⽂件是允许被跨域请求的。
css⽂件,jpg,png等。src属性的资源都是可以被跨域请求的。href资源⼤部分都是可以被
跨域请求的。
哪些资源算跨域请求的资源?

  1. 后端接口的数据。
  2. 其它域的cookie
  3. 其它域的缓存
    什么是其它的域?怎么样算跨域?
    页面本身:有协议(http/https),域名,端口
    要请求的数据:http://www.baidu.com:80
    协议,域名,端口这三个,有任意⼀个不⼀样就算跨域。
    跨域这个行为,发生在哪⾥?
    答案:
  4. 即使跨域了(协议,域名,端⼝号有不⼀样的),请求也可以发出。
  5. 服务器端也是可以接收的。
  6. 服务器端也是可以正常处理的。
  7. 服务器端也是可以正常返回数据。
  8. 浏览器也能接收到这些数据。
  9. 接收到之后,发现当前页面的域和请求的域不同,所以判定为跨域。
  10. 我们的代码在这等着结果呢,但是因为浏览器判定跨域了,不会把结果传递给我们的代码。
    虽然跨域了,但是我们依然需要这个数据,怎么办?
    解决跨域问题:
  11. 后端(别⼈家的)配合我们进⾏跨域。
    pan.baidu.com ——> zhidao.baidu.com,即使都是百度,也算跨域。
    (1)JSONP(正常的情况,返回的数据都是JSON格式。JSONP是⼀种特殊的格式。)
    (2)后端设置Access-Control-Allow-Origin属性以⽀持跨域。(知识较深,需要了解nodejs)
  12. 后端不配合我们进行跨域。
    (3)iframe(只能显示,不能控制)
    (4)通过后端代理(自己的后端)(需要nodejs)

3.原生js发送ajax请求

var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHttp");
}
xhr.open("get","http://developer.duyiedu.com/edu/testAjaxCrossOrigin"true);
//true表示异步,即网页逻辑的家在问题
//该接口设置了Access-Control-Allow-Origin属性
xhr.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
    //readyState存有 XMLHttpRequest的状态
    	document.getElementsByTagName("body")[0].innerHTML=xhr.responseText;
    	var data = JSON.parse(xhr.responseText);//转换成json格式
  	};
};//可以接收数据了
xhr.send();//将send放在onreadystatechange后面,确定状态发生变化执行该方法后

上述代码的onreadystatechange的解析:
在这里插入图片描述
在计算机的世界里,异步与同步和现实世界中是相反的。
在计算机的世界里,同步表示串行。异步表示同时进行。可以理解为同线程和异线程。

4.JSONP使用与原理

1.jsonp使用

jsonp格式哪里特殊?

  1. 发送的时候,会带上一个参数callback
  2. 返回的结果不是json格式
  3. 返回callback的名 + ( + json + );
$.ajax({//提前引入jq文件
    url: "http://developer.duyiedu.com/edu/testJsonp",
    type: "post",
    dataType: "jsonp",
    success: function (data) {
        console.log(data);
    }
});
  1. jsonp跨域,只能使用get方法,如果我们设置的是post方法,jquery会自动转为get方法。
  2. 是不是在jsonp里面我只能使用get方法?是不是我设置的post方法都会转为get方法?不是。
  3. jquery会先判断是否同源,如果同源,那么设置的是get就是get,设置的post就是post如果不是同源,无论设置的什么,都改为get。
    在这里插入图片描述

2.jsonp原理

  1. 如果我想从一个接口获取一个数据,不过这个接口和当前页面不是同源的(也就是跨域了)。且这个接口是支持JSONP的。
    联系九、网络请求中提到的知识
    a)script标签,有src属性,所以可以发出网络请求
    b)script标签,虽然可以引用其他域的资源,浏览器不限制,但是,浏览器会将返回的内容,作为js代码执行。
<script src="http://developer.duyiedu.com/edu/testJsonp?callback=asd"></script>
<script>
    function asd(){
        console.log(123);
    };
</script>

在这里插入图片描述
asd({“status”:“ok”,“msg”:“Hello! There is DuYi education!”}),相当于调用了asd方法,传入了一个json对象作为参数。
在这里插入图片描述

  1. 判断请求与当前页面的域,是否同源,如果同源则发送正常的ajax,就没有跨域的事情了。
  2. 如果不同源,生成一个script标签
  3. 生成一个随机的callback名字,还得创建一个名为这个的方法。
  4. 设置script标签的src,设置为要请求的接口。(例如通过标签的src、href等属性发送请求都是get请求,且可以跨域)
  5. 将callback作为参数拼接在后面。
    以上是前端部分
  6. 后端接收到请求后,开始准备要返回的数据
  7. 后端拼接数据,将要返回的数据用callback的值和括号包裹起来
    例如:callback=asd123456,要返回的数据为{“a”:1, “b”:2},
    就要拼接为:asd123456({“a”:1, “b”:2});
  8. 将内容返回。
    以上是后端部分
  9. 浏览器接收到内容,会当做js代码来执行。
  10. 从而执行名为asd123456的方法。这样我们就接收到了后端返回给我们的对象。

3.jsonp实现

var $ = {
	ajax: function (options){
		var url = options.url;
		var type = options.type;
		var dataType = options.dataType;
		//判断是否同源(协议,域名,端口号)
        //获取目标url的域
        var targetProtocol = "";//目标接口的协议
        var targetHost = "";//目标接口的host,host是包涵域名和端口的
        //如果url不带http,那么访问的一定是相对路径,相对路径一定是同源的。
        if(url.indexOf("http://") == 0 || url.indexOf("https://") == 0) {
        	//
            var targetUrl = new URL(url);//创建url对象
            targetProtocol = targetUrl.protocol;
            targetHost = targetUrl.host;
        }else{
            targetProtocol = location.protocol;
            targetHost = location.host;
        };
        //首先判断是否为jsonp,因为不是jsonp不用做其他的判断,直接发送ajax
        if(dataType == "jsonp"){
            //要看是否同源
            if (location.protocol == targetProtocol && location.host == targetHost) {//表示同源
            	//此处省略。因为同源,jsonp会当做普通的ajax做请求
            }else{//不同源,跨域
                //随机生成一个callback
                var callback = "cb" + Math.floor(Math.random() * 1000000);
                //给window上添加一个方法,成功后执行success回调
                window[callback] = options.success;
                //生成script标签。
                var script = document.createElement("script");
                if(url.indexOf("?") > 0) {//表示已经有参数了
                    script.src = url + "&callback=" + callback;
                }else{//表示没有参数
                    script.src = url + "?callback=" + callback;
                }
                script.id = callback;
                document.head.appendChild(script);
            };
        };
    };
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞羽逐星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值