HTML+CSS+JS-第15章 HTTP协议

HTML+CSS+JS-第14章 JavaScript DOM对象和BOM对象

第一阶段（A）（前端） 20天 120学时

第16章 HTTP协议

[学习课时] 本章共需要学习 6 课时

[目的要求]

掌握HTTP协议和规则
掌握HTTP请求和响应的规则
了解HTTP响应头信息
了解HTTP状态码

[教学内容]

HTTP协议

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。。

HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。

HTTP 请求消息结构

HTTP是基于客户端/服务端（C/S）的架构模型，通过一个可靠的链接来交换信息，是一个无状态的请求/响应协议。

客户端发送一个HTTP请求到服务器的请求消息包括以下格式：

请求行（request line）、
请求头部（header）、
空行
请求数据

下图给出了请求报文的一般格式:

GET / HTTP/1.1

Host: www.csdn.net

Connection: keep-alive

Cache-Control: max-age=0

Upgrade-Insecure-Requests: 1

User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

Referer: https://www.csdn.net/

Accept-Encoding: gzip, deflate, sdch, br

Accept-Language: zh-CN,zh;q=0.8

Cookie: uuid_tt_dd=-6852503192799459486_20161230; _ga=GA1.2.851452765.1483110024; UE="[email protected]"; __guid=253029775.837108528115350700.1516453692677.6106

HTTP 请求方法

方法	描述
GET	请求指定的页面信息，并返回实体主体。数据被包含在URL参数中
POST	向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。
HEAD	类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
PUT	从客户端向服务器传送的数据取代指定的文档的内容。
DELETE	请求服务器删除指定的页面。
CONNECT	HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
OPTIONS	允许客户端查看服务器的性能。
TRACE	回显服务器收到的请求，主要用于测试或诊断。

HTTP 响应头信息

HTTP/1.1 200 OK

Server: Tengine

Content-Type: text/html

Content-Length: 15154

Connection: keep-alive

Date: Fri, 27 Apr 2018 02:49:12 GMT

X-Powered-By: HHVM/3.11.1

Content-Encoding: gzip

Vary: Accept-Encoding

Via: cache40.l2et2-2[0,200-0,H], cache3.l2et2-2[1,0], cache1.cn548[0,200-0,H], cache4.cn548[1,0] Age: 35292

X-Cache: HIT TCP_HIT dirn:7:245100152 mlen:-1

X-Swift-SaveTime: Fri, 27 Apr 2018 12:24:58 GMT

X-Swift-CacheTime: 86400 Timing-Allow-Origin: *

EagleId: dbee144415248326444025049e

应答头	说明
Allow	服务器支持的请求方法（如GET、POST等）。
Content-Encoding	文档的编码（Encode）方法。只有在解码之后才可以得到Content-Type头指定的内容类型。
Content-Length	内容长度。只有当浏览器使用持久HTTP连接时才需要这个数据。
Content-Type	文档MIME类型
Date	当前的GMT时间。你可以用setDateHeader来设置这个头以避免转换时间格式的麻烦。
Expires	应该在什么时候认为文档已经过期，从而不再缓存它？
Last-Modified	文档的最后改动时间。
Location	表示客户应当到哪里去提取文档。
Refresh	表示浏览器应该在多少时间之后刷新文档，以秒计。
Server	服务器名字。由Web服务器自己设置。
Set-Cookie	设置和页面关联的Cookie。
WWW-Authenticate	客户应该在Authorization头中提供什么类型的授权信息？

HTTP 状态码

分类	分类描述
1**	信息，服务器收到请求，需要请求者继续执行操作
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

HTTP状态码列表

状态码	中文描述
200	请求成功。一般用于GET与POST请求
201	已创建。成功请求并创建了新的资源
202	已接受。已经接受请求，但未处理完成
204	无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
301	永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302	临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
400	客户端请求的语法错误，服务器无法理解
401	请求要求用户的身份认证
403	服务器理解请求客户端的请求，但是拒绝执行此请求
404	无法找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
408	服务器等待客户端发送的请求时间过长，超时
411	服务器无法处理客户端发送的不带Content-Length的请求信息
415	服务器无法处理请求附带的媒体格式
500	服务器内部错误，无法完成请求

AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

XMLHttpRequest对象

XMLHttpRequest 是AJAX 的基础

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

实例：demo01

Function load(file, async, callback) {

    var request = null;

    if(window.XMLHttpRequest) {

        request = new XMLHttpRequest();

    } else if(window.ActiveXObject) {

        request = new window.ActiveXObject();

    } else {

        request("您的浏览器版本过低");

    }

    if(request != null) {

        //规定请求的类型、URL 以及是否异步处理请求

        request.open('GET', file, true);

        //将请求发送到服务器，参数仅仅用于POST

        request.send(null);

        //每当 readyState 属性改变时，调用的函数

        request.onreadystatechange = function() {

            /*

            * readyState 可能的值

            *

            * 0 －（未初始化）还没有调用send()方法

            * 1 －（载入）已调用send()方法，正在发送请求

            * 2 －（载入完成）send()方法执行完成，刚刚接收到全部响应内容

            * 3 －（交互）正在解析响应内容

            * 4 －（完成）响应内容解析完成

            */

            if(request.readyState == 4 && request.status == 200) {

                /*

                * 可能的响应类型

                * responseText - 获得字符串形式的响应数据

                * responseXML - 获得 XML 形式的响应数据。

                */

                callback(JSON.parse(request.responseText));

            }

        };

    }

}

效果图

XMLHttpRequest请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp = new XMLHttpRequest();

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

方法	描述
open(method,url,async)	method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
setRequestHeader(header,value)	向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值
send(string)	将请求发送到服务器。string：仅用于 POST 请求

XMLHttpRequest响应

获得来自服务器的响应，使用 XMLHttpRequest 对象的responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

xmlhttp.responseText;

xmlhttp.responseXML;

响应状态

readyState 属性存有 XMLHttpRequest 的状态信息。

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	0: 请求（未初始化）还没有调用send()方法 1: 请求连接已建立（载入）已调用send()方法，正在发送请求 2: 请求已接收（载入完成）send()方法执行完成，刚刚接收到全部响应内容 3: 请求处理中（交互）正在解析响应内容 4: 请求已完成（完成）响应内容解析完成
status\|statusText	200: "OK" 400无法找到资源 404:未找到页面 500：服务器内部错误

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4 && xmlhttp.status==200){

getResponseHeader("headerLabel");

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

服务器常用的状态码：

200：服务器响应正常。
304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
400：无法找到请求的资源。
401：访问资源的权限不够。
403：没有权限访问资源。
404：需要访问的资源不存在。
405：需要访问的资源被禁止。
407：访问的资源需要代理身份验证。
414：请求的URL太长。
500：服务器内部错误

[作业实验]

使用AJAX读取天气信息，并且循环显示出来

HTML+CSS+JS-第16章 XML和JSON|P