您的位置: 首页  >  文章  >  HTTP协议学习

HTTP协议学习

分类: 文章 • 2024-07-06 07:44:16

1、HTTP协议学习目标：

(1)、调试AJAX应用"看不见摸不着"的错误

(2)、进行Web访问优化---高阶面试题\

 

2、面试题：用户在浏览器中输入www.taobao.com直到看到页面之间发生了什么？

(1)、操作系统访问网络上的DNS服务器，把域名转换为IP地址

(2)、浏览器发起HTTP请求消息

(3)、Web服务器接收并解析请求消息，查找指定的资源，可能访问数据库，构建并返回HTTP响应消息

(4)、浏览器接收并解析响应消息

(5)、浏览器缓存接收到响应内容，并解析和渲染响应内容

 

3、URL统一资源定位符，互联网任何资源都有一个URL才能被访问

http://www.baidu.com 网站

https://www.baidu.com/img/bd_logo1.png  图片

http://127.0.0.1/01.php　文件

URL参数及解析:

<scheme>://<user>:<pwd>@<host>:

<port>/<path>;<params>?<query>

(1)、scheme:方案 指定以哪种协议从服务器获取指定资源

常见方案:http/https/ftp/mailto/file/telnet....，以前两种最为常用

①、http:获取网络资源{明文}　--->http://www.ccb.com/cn     建行

②、https:获取网络资源{加密} --->https://ibsbjstar.ccb.com.cn  建行登录

(2)、host 主机名:资源在服务器ip地址或者域名

http://127.0.0.1           ip地址

http://www.baidu.com    域名(DNS 域名->ip)

http://tmooc.cn          域名

(3)、port 端口号，每一项网络服务在服务器都对应一个端口号

①、ftp    　21(文件上传下载)

②、ssh    　22(安全远程登录)

③、telnet    23(远程登录)

④、smtp    25(邮件传输发送)

⑤、dns      53(域名解析)

⑥、http   　80(超文本传输apache)

⑦、pop3    110(邮件接收)

⑧、https    443(加密传输)

(4)、path＝＝>http://127.0.0.1/ajaxday03/01.php

(5)、<query>

http://127.0.0.1/ajaxday03/01.php?id=10&age=10

$id = $_REQUEST['id'];

$age = $_REQUEST['age'];

 

4、分清概念:URL/URN/URI(了解)

(1)、URL:统一资源定位符

URL:<a href="login.html">....</a>

URL:<img src="http://tmoo.cn/logo.jpg">....</a>

(2)、URN:统一资源命名符

URN:<a href="mailto:[email protected]">..</a>

URN:<a href="javascript:void(0)">..</a>

(3)、URI:统一资源标示符 (URI==URL+URN)

            

5、HTTP协议概述(传输网页),国际互联网任务组(IETF)制定http协议标准

(1)、1991: HTTP/0.9 有严重缺陷

(2)、1996: HTTP/1.0 正式版本

(3)、1999: HTTP/1.1 当前主流版本(***)

 

6、HTTP协议工作原理方式:请求和响应

(1)、客户端浏览器发送请求 (google->apache)

(2)、服务器响应请求并且返回数据(apache->google)

 

7、面试题:HTTP/1.1比HTTP/1.0改进哪些地方?

(1)、支持虚拟主机技术，在一个web服务器上同时并存多个不同域名的网站

(2)、支持持久连接技术，不支持持久边接技术情况，每次客户端与服务器数据传输

固定流程 101(300握 400挥)

三次握手 3＝＝>1＝＝>4四次挥手

http: keep-alive  (3)--101--(4)

(3)、支持代理连接：Proxy:xxx

 

8、HTTP的作用是传输网页，HTTP工作方式为请求与响应

(1)、请求(Request) --客户端浏览器发送web服务器

请求方式:{GET/POST/PUT/DELETE/HEAD/CONNECT/TRACE/OPTIONS}

(2)、响应(Response)--web服务器发送客户端浏览器

①、响应状态码：

A、100-199 提示消息

B、200-299 响应成功   200

C、300-399 重定向     304

D、400-499 客户端请求错误 404

E、500-599 服务器错误  500

Message：消息/报文，是在http客户端和服务器传递数据块

http协议规定：消息必须符合特定格式才能理解

②、响应消息类型:

A、text/plain

B、text/html

C、text/css

D、application/javascript

E、application/json

 

9、面试题:GET/POST区别?

(1)、标签语义

①、GET：客户端获取服务器上资源

②、POST：客户端将数据提交服务器

(2)、安全级别

①、GET：不安全 

②、POST：不安全 {https}

(3)、数据长度

①、GET：通过浏览器地址栏请求起始行1KB,汉字约20-30 

②、POST：通过http响应主体长度没限制

(4)、数据编码

①、GET：不会自动编码->可能出现中文乱码

②、POST：自动编码---->不会中文乱码

(5)、数据发起

①、GET

A、浏览器地址栏输入地址回车

B、标签：

href ＝＝><a>＝＝>击发GET 

src ＝＝><img>＝＝>自动发GET

css＝＝>link＝＝>自动发GET

script＝＝>src＝＝>自动发GET

C、JS自动跳转location.href = "1.html";

D、表单：

<form method="get" action="">

<form action="1.php">

E、Ajax  get   

②、POST

A、表单：<form action="" method="post">

B、Ajax post

 

10、如何使用HTTP协议相关知识进行web优化?可从以下方面考虑：

(1)、优化数据库

(2)、优化php

(3)、优化web服务器(apache/nginx)

(4)、网速

(5)、传输数据

(6)、浏览器解析速度(html/css/js)

下面从http请求和响应角度考虑相关优化：

(1)、域名解析，减少域名解析次数，减少跨站外，资源引用尽可能的来自同一地址

(2)、创建连接，努力减少连接创建次数-Connection:keep-alive，启用持久连接

(3)、减少发送请求次数，尽量减少请求次数--合理进行资源合并，合理使用缓存

(4)、等待响应时间，提高服务器运行速度，提高数据运算及查询速度

(5)、接收响应，尽可能减少响应数据长度--删除空白字符，启压缩

    

11、HTTP协义详解

(1)、请求消息

①、请求起始行(Start line)

 A、请求方法

 a、GET(客户端想获得服务器端的信息)

 b、POST(客户端想传递数据给服务器)

 c、PUT(客户端想放置文件到服务器上——RESTful编程)

 d、DELETE(客户端想删除服务器上指定的文件——RESTful编程)

 e、HEAD(客户端想获得服务器上指定资源的响应头部)

 f、CONNECT(连接测试)

 g、TRACE(追踪)

 h、OPTIONS(选项，保留以后使用)

 B、空格

 C、请求URI

 D、空格

 F、协议版本

②、请求头(Headers)

A、请求消息专用头

a、Host:127.0.0.1，告诉服务器请求的是哪一个虚拟主机   

b、Accept:text/html,告诉服务器端可以接受的响应内容类型

c、Orgin:http://127.0.0.1 ,告诉服务器当前请求来源于哪个域名

d、Referer:http://127.0.0.1/index.html ,引用页,即请求来源页面,可防止盗用

e、User-Agent:Mozilla，客户端在告诉服务器自己的类型

f、Accept-Encoding:gzip,浏览器在告诉服务器自己接受的响应数据编码类型

h、Accept-language:zh-cn,告诉服务器自己可以接受的自然语言(实现国际化)

B、请求/响应消息通用头

a、Connection:keep-alive , 启用持久链接

b、Cache-Control:no-cache, 告诉对方如何缓存当前消息主体中的数据

c、Pragma:no-cache , 此为HTTP/1.0版本的Cache-Control

e、Date: Tue, 11 Jul 2017 10:25:55 GMT 消息的创建时间

C、请求主体描述头

a、Content-Length:36　请求消息主体内容的长度

b、Content-Type:描述请求主体内容类型

text/plain  普通文本，未经编码,有的服务器直接拒绝接受(ajax默认项)

application/x-www-form-urlencoded 请求主体是经过编码后的表单数据

multipart/form-data 表单中包含上传的文件数据

D、客户端自定义头部

③、CRLF

④、请求主体(Body)

(2)、响应消息

①、响应起始行(Start line)

A、协议版本

B、空格

C、响应状态码

a、1xx:为提示信息

100(Continue继续)

101(Switching Protocols 切换协议)

 b、2xx:成功的响应

200(OK,响应成功)

201(Created,创建好了，适用Put请求)

c、3xx:需要客户端重定向

300（Multiple Choices　可选重定向）

301(Moved Permanently　永久重定向)

302(Moved Temporarily 临时重定向)

303(see other 重定向 )

304(Not Modified 没有修改,使用缓存即可 )

d、4xx:客户端请求错误

400 (Bad Repuest 错误请求)

403(Forbidden 不能访问的文件)

404(Not Found 请求文件不存在)

405(Method Not Allowed 请求方法不允许)

e、5xx:服务器端运行错误

500(Internal Server Error 服务器代码里面运行有误,如java里面10/0)

501(Not Implemented 服务器无法处理正常的请求)

503(Service Unavaiable 服务不可用,分布式DOS攻击会导致服务不可用)

D、空格

F、原因短句

②、响应头(Headers)

A、响应消息专用头

a、Server:Apache:告诉客户端服务器类型

b、Last-Modified:Tue, 11 Jul 2017 08:15:29 GMT 指定资源的最后一次修改时间

c、Content-Encoding:gzip 告诉客户端内容经过了gzip压缩

B、请求/响应消息通用头

a、Connection:keep-alive , 启用持久链接

b、Cache-Control:no-cache, 告诉对方如何缓存当前消息主体中的数据

c、Pragma:no-cache , 此为HTTP/1.0版本的Cache-Control

e、Date: Tue, 11 Jul 2017 10:25:55 GMT 消息的创建时间

C、响应主体描述头

a、Content-Length:4373 响应主体内容长度

b、Content-Type:application/javascript 响应主体的内容类型(类型上100种),如果要精准的描述一段数据的内容类型，不能使用后缀名，可以借鉴MIME中定义的文件类型名称

D、服务器自定义头

③、CRLF

④、响应主体(Body):html/css/js的主体内容均在Response里面,而响应图片在preview里面

 

12、缓存工作原理

客户端可以自动保存已经访问过的文档的副本，这些副本就成为“文档缓存”

当客户端再次发送针对同一个URL的请求时，如果本地有“已缓存的副本”就可以直接从本地存储设备面不是远程服务提取该文档了

数据缓存有下列优点:

(1)、减少了冗余的数据传输，节省客户端流量使用

(2)、缓解服务器宽带瓶颈的问题，服务器可以节省出更多的带宽

(3) 、降低对服务器的资源消耗和运行要求

(4)、降低了由于远距离而造成的加载延时

HTTP协议学习

 

13、Cache-Control头

Cache-Control:max-age头部表示从服务器将文档传来之时起，可以认为此文档处于新鲜状态的秒数

Cache-Control:max-age=3600;

服务器端可以请求客户端不要缓存文档,或者将最大使用期设置为零，从而在每次访问的时候都进行刷新

Cache-Control:max-age=0;

客户端在事先没有跟原始服务进行再验证的情况下，不能提供对应数据的陈旧副本，但缓存仍然可以提供新鲜的副本

Cache-Control:must-revalidate

 

14、Expires头

Expires头部指定缓存的确切过期时间,HTTP设计者认为，由于很多服务器的时钟不能同步，所以推荐最好用剩余秒数来代替过期的绝对时间

Expires:Sun,15 Mar 2014 ,08:00:00 GMT

若希望客户端不要缓存资源，可以将过期的时间设置为一个过去的时间，如:

Expries:Sat,01 Jan 1970,08:00:00 GMT

Expries:0此为不符合标准的写法，可能某些软件不支持，但确实有些服务器会返回这样的头部

 

15、如何修改响应消息的头部

(1)、修改web服务器的配置文件

比较复杂，有些情况下无法修改，如新浪云服务器

(2)、若响应文件是HTML,则可以声明<meta http-eqiv=“响应头部”>

仅适用于HTML文件，且只是“等价物”,并非真正的响应头部

(3)、使用动态语方代码来控制响应消息头部

如php:设置一个响应消息头部

header(‘Cache-Control:no-cache’ );

header(‘Content-Type:image/png’);

 

16、Ajax即异步javascript and xml，该技术由google 推出，最大不同：发送请求和接收数据都由Js完成，以下为Ajax代码固定Js，请求并且接收响应4步:

(1)、创建ajax对象

var xhr = new XMLHttpRequest();

(2)、绑定事件：监听xhr对象状态

xhr.onreadystatechange = function(){}

(3)、连接web服务器php程序

xhr.open(请求方式,请求地址,是否异步);

xhr.open('GET','add_user.php?',true);

(4)、发送请求消息

xhr.send(null);

 

17、Ajax原理

(1)、2002年由Google搜索引擎，提出建议

AJAX=HTML/CSS/JS/DOM/XML/HTTP

(2)、ajax作用：实现在'无刷新''无提交''无跳转'的情况下完成页面局部更新

(3)、ajax应用常见场合：聊天室，在线走势图,搜索建议..

(4)、ajax的异步相关

①、异步请求:XHR

②、同步请求:(Ajax绝对不能用表单提交,否则为同步)

A、地址栏输入地址回车

B、表单 submit

C、<a href="1.php">

D、<img src="1.jpg">

E、location.href = '1.php'

 

18、Ajax常用对象和属性事件方法

(1)、xhr对象：向web服务器发送请求，并接收返回响应消息

var xhr = new XMLHttpRequest();

注意:产品兼容性，老IE8- 不支持xhr

new ActiveXObject("Microsoft.XMLHTTP");

兼容性写法：

var xhr = null;

      if(window.XMLHttpRequest){

             xhr = new XMLHttpRequest();

         }else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

alert(xhr);

 

(2)、xhr对象常用属性

①、readyState xhr对象当前状态

不能手工赋值，可以取值，其值会随着(请求-响应)过程进行自动改变

A、0＝＝>UNSENT＝＝>  请求消息未发送

B、1＝＝>OPENED＝＝> XHR己经打开web服务器连接

C、2＝＝>HEADERS_RECEVIED＝＝> xhr己经接收服务器响应消息头部

D、3＝＝>LOADING XHR＝＝>正在加载响应消息主体

E、4＝＝>DONE＝＝>    XHR接收完成响应消息主体

②、xhr.readyState状态改变

A、0＝＝>UNSEND＝＝>xhr.open();

B、1＝＝>OPENED＝＝>xhr.send();

C、2＝＝>HREADERS_RECEIVED＝＝>自然(不能控制)

D、3＝＝>LOADING＝＝>自然(不能控制)

E、4＝＝>DONE

(3)、status：服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误，当 readyState 为2才有，小于 3 的时候读取这一属性会导致一个异常

(4)、statusText:用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"，和 status 属性一样，当 readyState为2才有,小于 3 的时候读取这一属性会导致一个异常

 (5)、responseText:存储从服务器返回的数据，如果 readyState 小于 3，这个属性就是一个空字符串，当 readyState 为 3，这个属性返回目前已经接收的响应部分，如果 readyState 为 4，这个属性保存了完整的响应体

 

19、Ajax 原理与Ajax接收不同类型数据

在客户端浏览网页的同时，浏览器底层使用XMLHttpRequest对象，向服务器发起HTTP请求，并接收服务器的响应消息—浏览的同时服务器也在工作

(1)、核心 XMLHttpRequest

①、创建对象

function getXHr(){

    var xhr = null;

    if(window.XMLHttpRequest){

        xhr = new XMLHttpRequest();

   }else{

        xhr = new ActiveXObject("Microsoft.XMLHTTP");

   }

    return xhr;

}

②、xhr属性

A、xhr.readyState 表示xhr状态

a、0＝＝>未发送      UNSENT

b、1＝＝> 打开连接    OPENED

c、2＝＝> 己经接收服务器返回头信息HEADERS_RECEIVED

d、3＝＝> 接收服务器数据LOADING

e、4＝＝> 接收完成 DONE

B、status  表示服务器返回状态码===200

C、responseText 表示服务器返回文本

D、responseXML  表示服务器返回XML文本 

③、方法

A、open(method,url.isAsyn)：创建请求

Method：请求方式 GET POST

url：请求url地址(程序地址)

isAsyn：请求方式是异步true同步false

B、send(data)发送请求

data：请求消息主体内容

GET＝＝>内容为null 

send(null);

POST＝＝>请求数据放在里面

send('id=10&name=tom&age=19');

④、事件

A、onreadystatechange 发生任何状态变化时的事件控制对象

B、xhr.readyState 表示请求的状态，每次改变时候触发事件0 /1 /2 /3 /4

(2)、ajax 接收很多数据类型

①、php  echo "添加成功";

②、php  echo "<li></li><li></li>";

 

20、AJAX post 标准语法

(1)、创建ajax对象 xhr

(2)、绑定事件  xhr.onreadystatechange

(3)、打开连接  xhr.open('POST','book_add.php',true);

修改请求头信息(将参数编码)

xhr.setRequestHeader('Content-Type',

'application/x-www-form-urlencoded');

(4)、xhr.send(`id=10&name=tom&age=19`);

(5)、ajax输出

①、创建php     地址栏输入回车     

http://127.0.0.1/ajaxday06/dangdang/book_add.php?

name=1&pic=2.jpg&price=100&pubDate=2010-10-10

②、创建html/js console.log("1"+变量);

③、F12/network

 

21、后端响应文本输出类型,以PHP为例

(1)、text/plain  纯文本

PHP第一行header("Content-Type:text/plain");

html＝＝>ajax

xhr.responseText

(2)、text/html  (默认)

PHP第一行header("Content-Type:text/html;charset=utf-8");

html＝＝>ajax

xhr.responseText;

(3)、Javascript 

PHP第一行

header("Content-Type:application/javascript;charset=utf-8");

echo "var msg='hello';alert(msg)";

html＝＝>ajax

eval(xhr.responseText);

 

22、JSON(JavaScript Object Natation)是一种轻量级数据交换格式，易于编写，同时易于程序解析生成，语法基于JS语言，但是目前被各种语句所支持，成为一种异构  系统交互数据，标准格式：

JAVA＝＝>{JSON}   html/js/css

C#＝＝> {JSON}   html/js/css

php＝＝> {JSON}   html/js/css

 

23、JSON与XML字符串格式概述

(1)、XML是字符串数据格式，用于描述数据，

稍微有点麻烦--重量级数据格式.

10字节＝＝>XML＝＝>50字节

(2)、JSON是字符串数据格式，用于描述数据

更加简单--轻量级数据格式.

10字节＝＝>JSON＝＝>22字节

 

24、json标准语法要求

(1)、一个JSON字符串有且只有一个根

①、{}表示一个对象

员工信息： {"name":"tom","age":19}

②、[]表示一个数组

一组整型： [10,20,90,100]

一组员工信息 :

[

    {"name":"jerry","age":21},

    {"name":"james","age":22},

    {"name":"gogo","age":19}

 ]

 (2)、JSON中可以表示，数字，bool,null,字符串，注意:字符串必须用双引号

 (3)、数组中可以包含多个值，使用逗号分隔

 (4)、对象中可以包含多个键值，使用逗号分隔，不同值，键和值之间用分号分隔 ,键必须是双引号

 

25、如何处理JSON数据

(1)、服务器端php

①、header("Content-Type:application/json;charset=utf-8");

②、$str = json_encode($arr);

 json_encode会将一个数组转换成json字符串,如果是PHP关联数组会转换为JSON:{},如果是PHP索引数组会转换为JSON:[ ]

③、echo $str;

(2)、javascript 接收

①、var obj = JSON.parse(xhr.responseText);将json字符串转换为js对象或数组

②、var str=‘{“ename”:”Tom”,”age”:20}’,eval(‘(‘+str+’)’)

obj＝＝>js数组   obj＝＝>js对象

 

26、AJAX处理xml数据格式

(1)、html:超文本标记语言，所有标签都是预定义好的，用于描述一个网页结构.

(2)、xml:可扩展的标签语言，所有的标签都是自定义的， 用于描述一段数据--尤其是批量复合数据.

 

27、XML语法要求

(1)、xml文档声明：<?xml version="1.0" encoding="utf-8"?>

(2)、整篇xml字符串有且只能一个根元素

<booklist>

    <book></book>

     <book></book>

</booklist>

(3)、标签名可以自定义，区分大小写，有开始必须有结束：<book></book>

(4)、标签可能嵌套不能交叉

<book><name></name></book>  ok

<book><name><id></name></id></book>

(5)、每个标签都可以自定义属性，属性必须有值，值必须用单/双引号括起来

<book id="1" name="tom"></book>

总结: HTML语法随意，XML语法严格

HTML标签都是预定义好的，XML的标签是自定义的

HTML用于描述网页结构，XML用于描述网页数据

 

28、面试题：跨域请求和JSONP

Cross Domain Request：从一个资源请求另一个资源，二者所在的请求地址不同，域名不同、端口号不同、请求协议不同

提示：localhost和127.0.0.1也算跨域

浏览器允许跨域请求的情形：IMG、LINK、SCRIPT、IFRAME ...

浏览器禁止跨域请求的情形：XHR—浏览器处于安全考虑，禁用了XHR的跨域请求（其实服务器给出了响应消息，但浏览器不让使用）,因为跨域有可能对当前页面产生安全风险

 

29、面试题：我们公司项目很大，页面很多，出于性能考虑，把静态资源(html等)放在http://static.tmooc.cn服务器上了，把动态资源(php)放在http://dynamic.tmooc.cn服务器上了，如何让一个x.html异步请求x.php呢？

(1)、修改响应消息头部，添加Access-Control-Allow-Origin头部(必须是动态网页)

(2)、使用JSONP——非常巧妙

JSON: JavaScript Object Notation，是一种字符串数据格式(羊肉)

JSONP：JSON with Padding，填充式JSON，与JSON完全两码事，是一种使用JSON数据的方式(把羊肉红烧)，意思是在JSON字符串左右添加函数名：doResponse({"ename":"Tom", "age":20} );

JSONP是专用于解决XHR跨域限制一种手段

基本原理：使用动态创建的一个SCRIPT标签代替XHR发起异步请求，要求服务器必须返回application/javascript，立即在客户端执行——要执行的函数本体在客户端浏览器中声明<script src="x.php" async></script>

function createJs(sUrl){

     var oScript = document.createElement('script');

     oScript.type = 'text/javascript';

     oScript.src = sUrl;

     document.getElementsByTagName('head')[0].appendChild(oScript);

}

createJs('jsonp.js?callback=box');

(3)、document.domain = 'a.com'

(4)、服务器代理：XMLHttpRequest代理文件

(5)、location.hash

(6)、window.name

(7)、flash

(8)、html5  postMessage

 

30、cookie

(1)、cookie_add.html    保存cookie

document.cookie = '名=值';

document.cookie = 'uid=10';

(2)、cookie_read.html   读取cookie

var str = document.cookie;

var str = "name=tom;age=10;sex=F";

var arrStr = str.split(";");

["name=tom","age=10","sex=F"]

name = arrStr[0].split("=")[0];

tom = arrStr[0].split("=")[1];

 

相关推荐