HTTP是一种无状态的协议
HTTP请求
一个完整的HTTP请求过程，通常有下面7个步骤：
- 建立
TCP连接 - Web浏览器向Web服务器方法发送请求命令
- Web浏览器发送请求头信息
- Web服务器应答
- Web服务器发送应答头信息
- Web服务器向浏览器发送数据
- Web服务器关闭
TCP连接`
HTTP请求组成：
-
HTTP请求的方法或动作，比如是GET还是POST请求 - 正在请求的
URL，请求的地址 - 请求头，包含一些客户端环境信息，身份验证信息等
- 请求体，也就是请求正文，可以包含客户提交的查询字符串信息，表单信息等
HTTP请求内容
GET/login.php HTTP/1.1 // 请求方法、url
Host: localhost // 请求头
Connection: keep-alive
Accept: text/javascript,application/javascript,application/ecmascript,application/x-ecmascript,*/*;
q=0.01
X-Requested-Width: XMLHttpRequest
User-Agent: Mozilla/5.0(Windows NT 6.1)Referer: http://www.baidu.com/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
username=admin&password=123456 // 请求体
请求头和请求体之间要空一行
HTTP请求方法
- GET
- 一般用于信息获取
- 使用
URL传递参数，发送的信息对任何人可见，添加在书签上可以直接使用 - 对所发送信息的数量有限制，一般在
2000个字符 - 幂等
- POST
- 一般用于修改服务器上的资源
- 发送的信息嵌在
HTTP请求的请求体之中，对一般人不可见 - 对所发送信息的数量无限制
HTTP响应
-
状态码，一个数字和文字组成，用来显示请求是成功还是失败 -
响应头，包含一些服务器信息，例如：服务器类型、日期时间、内容类型、长度等 -
响应体，也就是响应正文
HTTP响应内容
HTTP/1.1 200 OK
Date: Sun, 23 Nov 2017 13:21:34 GMT
Server: Apache
Content-Encoding: gizp
Content-Length: 7112
Connection: Keep-Alive
Content-Type: application/javascript
HTTP响应状态码
HTTP状态码有3位数字构成，其中首位数字定义了状态码的类型：
- 1XX：信息类，表示收到Web浏览器请求，正在进一步的处理中
- 2XX：成功，表示用户请求被正确接收，理解和处理，例如：200 OK
- 3XX：重定向，表示请求没有成功，客户必须采取进一步的动作
- 4XX：客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found，表示请求中所引用的文档不存在
- 5XX：服务器错误，表示服务器不能完成对请求的处理，如：500
创建XMLHttpRequest对象
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari...
} else {
request = new ActiveXObject('Microsoft.XMLHTTP'0; // IE6, IE5
XMLHttpRequest发送请求
-
open(method, url, async)（调用
HTTP请求)- method：发送请求方法
GET，POST...(不区分大小写，一般大写) - url：地址
- 请求同步/异步（
ture/false)，默认true
- method：发送请求方法
-
send(string)（将请求发送到服务器)
- string：参数（
GET方法，不填写/null；POST方法，参数）
- string：参数（
例子
request.open('GET', 'get.php', true);
request.send();
request.open('POST', 'post.php', true);
request.send();
request.open('POST', 'create.php');
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.send('name=张三&sex=男');
request.setRequestHeader设置HTTP的头信息，告诉服务器要发送一个表单
XMLHttpRequest响应
- responseText：获得字符串形式的响应数据
- responseXML：获得XML形式的响应数据
- status和statusText：以数字和文本形式返回HTTP状态码
- **getAllRequestHeader()：获取所有的响应报头
- **getResponseHeader()：查询响应中的某个字段的值
通过监听readyState属性的变化可以知道服务器响应的变化
- 0：请求未初始化，open还没有调用
- 1：服务器连接已建立，open已经调用了
- 2：请求已接收，也就是接收到头信息了
- 3：请求处理中，也就是接收到响应主体了
- 4：请求已完成，且响应已就绪，也就是响应完成了
通过onreadystatechange方法监听readyState的变化
XHR请求的完整过程
var request = new XMLHttpRequest();
request.open('GET', 'get.php', true);
request.send();
request.onreadystatechange = function() {
if (request.readystate === 4 && request.status === 200) {
// 做一些事情 request.responseText
}
}
