http 无状态协议: 不建立长久连接, 不保存客户端信息

7 个步骤

1. 建立 tcp 连接
   
2. 浏览器 向 服务器发送请求命令
   
3. 浏览器 发送请求头信息
   
4. web 服务器应答
   
5. web 服务器发送应答头信息
   
6. web 服务器向浏览器发送数据
   
7. web 服务器关闭 tcp 连接
   

请求由 4 部分组成:

1. http 请求的方法或者动作, GET 或者 POST
   
2. 请求的 url
   
3. 请求头, 包含一些客户端的环境信息, 身份验证信息
   
4. 请求体, 请求正文, 包含客户提交的查询字符串信息, 表单信息等
   

GET:     用于信息获取, 使用 url 传递参数, 对所发送信息的数量也有限制
POST:    一般用于修改服务器上的资源, 对所发送信息的数量没有限制

http 状态码:

1xx:     信息类: 正在处理信息
2xx:     成功
3xx:     重定向, 请求没有成功
4xx:     提交的请求有错误
5xx:     服务器错误, 不能完成相应的请求处理

post 请求需要填写 content-type: application/x-www-form-urlencoded

火狐浏览器插件

Poster
Live HTTP headers

header:

header("Content-Type: text/plain;charset=utf-8");             // html, 不解析 html 标签
header("Content-Type: text/html;charset=utf-8");              // html
header("Content-Type: application/json;charset=utf-8");       // json
header("Content-Type: application/javascript;charset=utf-8"); // json
header("Content-Type: text/xml;charset=utf-8");               // xml

var request = new XMLHttpRequest();

request.open("GET", "get.php", true);       // get
request.send();

request.open("POST", "create.php", true);   // post
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("name=xxx&sex=xxx");

responseText               获得字符串形式的响应
responseXML                获得 XML 形式的响应
status                     数字 HTTP 状态码
statusText                 文本 HTTP 状态码
getAllResponseHeader()     获取所有的响应报头
getResponseHeader()        查询响应中的某个字段的值

监听 readyState
0 表示 请求未初始化, open 没有调用
1 表示 服务器连接建立, open 调用
2 表示 请求接收, 接收到头信息
3 表示 请求处理, 接收到响应主体
4 表示 请求完成, 响应已经就绪, 响应完成

var request = new XMLHttpRequest();
request.open("GET", "get.php", true);
request.send();

request.opreadystatechange = function() {
    if (request.readyState === 4 && request.status === 200) {
        alert(request.status);                        // 返回状态
        alert(request.statusText);                    // 返回状态的说明

        var res = request.responseText;               // text
        var json = JSON.parse(request.responseText);  // json
        var xmldom = request.responseXML;             // xml

        alert(res);
        alert(json[1].res);
        alert(xmldom.getElementsByTagName(....).nodeValue);
    }
}