网络与ajax
一、网络
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
- 当输入域名时,首先找的不是DNS服务器而是本地的一个文件C:\Windows\System32\drivers\etc\hosts 查看有无对应关系,如果有,就直接使用,若没有再去找DNS服务器。可以通过更改本机文件中的对应关系,屏蔽一些网站。
- 家里路由器
- 上级路由,直到DNS服务器
- 浏览器根据请求的URL交给DNS域名解析,找到真实IP;
- 浏览器根据 IP 地址向服务器发起 TCP 连接,与浏览器建立 TCP 三次握手
a.客户端向服务器发送一个建立连接的请求
b.服务器接到请求后发送同意连接的信号
c.客户端接到同意连接的信号后,再次向服务器发送了确认信号,然后客户端与服务器的连接建立成功 - 浏览器发送HTTP请求
浏览器根据 URL 内容生成 HTTP 请求,请求中包含请求文件的位置、请求文件的方式等等; - 服务器处理请求并返回HTTP报文(HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。):
a.服务器接到请求后,会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件;
b.服务器将得到的 HTML 文件发送给浏览器;
c.在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页;
d在执行 HTML 中代码时,根据需要,浏览器会继续请求图片、CSS、JavsScript等文件,过程同请求 HTML 。
8.断开连接
4.五层网络模型
5.GET和POST区别
- 是基于什么前提的?如果什么前提都没有,不使⽤任何规范,只考虑语法和理论上的
HTTP协议。
GET和POST几乎没有什么区别,只有名字不⼀样。 - 如果是基于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
- 如果我们⽤JS的变量来存数据,那么在⻚⾯关闭的时候,数据就消失了。
- 保持登录状态是怎么做到的呢?
按照正常的HTTP协议来说,是做不到的。
因为HTTP协议,上下⽂⽆关协议。 - 所以说前端页面上,有可以持久化存储数据的东⻄。⼀旦登录成功,我就记载在这个里面(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负责提供内容。
- index.html 页面的本质是什么? 页面的本质就是⼀个字符串。带有HTML格式的字符串。
- 浏览器 向服务器 请求⼀个⻚⾯的本质是什么?
(1)www.baidu.com
(2)服务器接收到这个请求后,服务器想要把这个页面的内(HTML格式的字符串)返回给浏览器。
(3)页面的字符串存在哪⾥呢?存在HTML文件里。例如:index.html
(4)服务器端要读取⽂件。
(5)将读取出来的内容返回给浏览器。 - 最后返回的是⼀个字符串,这个字符串的来源可能是⽂件,可能是缓存,可能来自于数据库。
- 服务器:严格的说,服务器是⼀台计算机,这台计算机,只提供服务。(不是用户用的)
- 但是,我们常说的这个服务器,指的是服务容器,不是服务器。
- 服务容器:是⼀个程序。程序可以监听⼀个端口。读取⽂件,并且返回。
- 如果我们想通过访问服务器(服务容器)的方式,来访问我们自己写的页面。我们就得装⼀个服务容器的程序。
8.HTTP和HTTPS的区别
- HTTPS 协议需要到 CA (Certificate Authority,证书颁发机构)申请证书,一般免费证书较少,因而需要一定费用
- HTTP 是超文本传输协议,信息是明文传输,HTTPS 则是具有安全性的 SSL 加密传输协议。
- HTTP 和 HTTPS 使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
- HTTP 的连接很简单,是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议,比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)
二、ajax请求
1.网络请求
- 在浏览器中直接输入网址(无法用代码控制)
- location.href=“url”,可以发出网络请求,但是页面会发生跳转。(页面会跳转)
- 带有src属性的标签()。请求是可以发出的,服务端是可以处理的也是可以返回的。但是返回之后,能否被应用,还要看浏览器。(页面无法处理返回结果)
- 带有href属性的标签()。请求是可以发出的,服务端是可以处理的也是可以返回的。但是返回之后,能否被应用,还要看浏览器。(页面无法处理返回结果)
- 带有action属性的标签。例如form表单,也可以向后端发出请求。但是form表单发出请求之后,也会页面跳转。(页面会跳转)
希望有一种方式,可以用代码控制,页面不会跳转,服务端返回的结果我可以用js继续处理。 - 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资源⼤部分都是可以被
跨域请求的。
哪些资源算跨域请求的资源?
- 后端接口的数据。
- 其它域的cookie
- 其它域的缓存
什么是其它的域?怎么样算跨域?
页面本身:有协议(http/https),域名,端口
要请求的数据:http://www.baidu.com:80
协议,域名,端口这三个,有任意⼀个不⼀样就算跨域。
跨域这个行为,发生在哪⾥?
答案: - 即使跨域了(协议,域名,端⼝号有不⼀样的),请求也可以发出。
- 服务器端也是可以接收的。
- 服务器端也是可以正常处理的。
- 服务器端也是可以正常返回数据。
- 浏览器也能接收到这些数据。
- 接收到之后,发现当前页面的域和请求的域不同,所以判定为跨域。
- 我们的代码在这等着结果呢,但是因为浏览器判定跨域了,不会把结果传递给我们的代码。
虽然跨域了,但是我们依然需要这个数据,怎么办?
解决跨域问题: - 后端(别⼈家的)配合我们进⾏跨域。
pan.baidu.com ——> zhidao.baidu.com,即使都是百度,也算跨域。
(1)JSONP(正常的情况,返回的数据都是JSON格式。JSONP是⼀种特殊的格式。)
(2)后端设置Access-Control-Allow-Origin属性以⽀持跨域。(知识较深,需要了解nodejs) - 后端不配合我们进行跨域。
(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格式哪里特殊?
- 发送的时候,会带上一个参数callback
- 返回的结果不是json格式
- 返回callback的名 + ( + json + );
$.ajax({//提前引入jq文件
url: "http://developer.duyiedu.com/edu/testJsonp",
type: "post",
dataType: "jsonp",
success: function (data) {
console.log(data);
}
});
- jsonp跨域,只能使用get方法,如果我们设置的是post方法,jquery会自动转为get方法。
- 是不是在jsonp里面我只能使用get方法?是不是我设置的post方法都会转为get方法?不是。
- jquery会先判断是否同源,如果同源,那么设置的是get就是get,设置的post就是post如果不是同源,无论设置的什么,都改为get。
2.jsonp原理
- 如果我想从一个接口获取一个数据,不过这个接口和当前页面不是同源的(也就是跨域了)。且这个接口是支持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对象作为参数。
- 判断请求与当前页面的域,是否同源,如果同源则发送正常的ajax,就没有跨域的事情了。
- 如果不同源,生成一个script标签
- 生成一个随机的callback名字,还得创建一个名为这个的方法。
- 设置script标签的src,设置为要请求的接口。(例如通过标签的src、href等属性发送请求都是get请求,且可以跨域)
- 将callback作为参数拼接在后面。
以上是前端部分 - 后端接收到请求后,开始准备要返回的数据
- 后端拼接数据,将要返回的数据用callback的值和括号包裹起来
例如:callback=asd123456,要返回的数据为{“a”:1, “b”:2},
就要拼接为:asd123456({“a”:1, “b”:2}); - 将内容返回。
以上是后端部分 - 浏览器接收到内容,会当做js代码来执行。
- 从而执行名为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);
};
};
};
};