HTTP请求

一个完整HTTP请求的七个步骤

1、 建立TCP连接 
在HTTP工作开始之前，Web浏览器首先要通过网络与Web服务器建立连接，该连接是通过TCP来完成的，该协议与IP协议共同构建Internet，即著名的TCP/IP协议族，因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议，根据规则，只有低层协议建立之后才能，才能进行更层协议的连接，因此，首先要建立TCP连接，一般TCP连接的端口号是80。

2、 Web浏览器向Web服务器发送请求命令

一旦建立了TCP连接，Web浏览器就会向Web服务器发送请求命令。例如：GET/sample/hello.jsp HTTP/1.1。

3、 Web浏览器发送请求头信息

浏览器发送其请求命令之后，还要以头信息的形式向Web服务器发送一些别的信息，之后浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。

4、 Web服务器应答

客户机向服务器发出请求后，服务器会客户机回送应答， HTTP/1.1 200 OK ，应答的第一部分是协议的版本号和应答状态码。

5、 Web服务器发送应答头信息

正如客户端会随同请求发送关于自身的信息一样，服务器也会随同应答向用户发送关于它自己的数据及被请求的文档。

6、 Web服务器向浏览器发送数据

Web服务器向浏览器发送头信息后，它会发送一个空白行来表示头信息的发送到此为结束，接着，它就以Content-Type应答头信息所描述的格式发送用户所请求的实际数据。

7、 Web服务器关闭TCP连接

一般情况下，一旦Web服务器向浏览器发送了请求数据，它就要关闭TCP连接，然后如果浏览器或者服务器在其头信息加入了这行代码：

Connection:keep-alive

TCP连接在发送后将仍然保持打开状态，于是，浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间，还节约了网络带宽。

HTTP请求

HTTP请求一般由一下四部分组成： 
1、HTTP请求的方法或者动作，比如是GET还是POST 
2、正在请求的URL 
3、请求头，包含一些客户端环境信息，身份验证信息等 
4、请求体，也就是请求的正文，其中可以包含客户提交的查询字符串信息，表单信息等

GET和POST请求

GET请求 
* 一般用于信息获取 
* 使用URL传递参数 
* 对发送的信息数量有限制，一般在2000字符

POST请求 
* 一般用于修改服务器上的资源 
* 对发送的信息数量无限制

HTTP响应

有请求就应该要有响应，服务器返回的响应和客户端发送的请求比较类似。

HTTP响应的构成

一般由一下三部分构成： 
1、一个由数字和文字组成的状态码，用来显示是请求成功还是失败。 
2、响应头，类似请求头 包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等。 
3、响应体，即响应的正文。

HTTP状态码

• 1xx：信息类，表示收到web浏览器的请求，正在进一步处理

• 2xx: 成功，表示用户请求被正确接收，例如 200 OK

• 3xx：重定向，表示请求没有成功，客户必须采取进一步的动作

• 4xx：客户端错误，表示客户提交的请求有误，例如 404 NOT Found 表示所请求的文件不存在

• 5xx：服务器错误，表示服务器不能完成对请求的处理，例 500

更多关于状态码的资料：http://baike.baidu.com/view/1790469.htm

XMLHttpRequest 发送请求

发送

方法： 
* open(method,url,async) 
method:请求的方法，GET还是POST 不区分大小写，通常大写 
url:请求的地址 
async: 请求时同步还是异步，默认为true，可省略，表示异步。需要同步则设置为false即可。 
* send(string) 
对于GET请求，参数string可以为空，但对于POST方法，string一般不为空（为空无意义）。

中间一句用于指定类型，必须写在open和send之间

取得响应

• responseText：获取字符串形式的响应数据

• responseXML：获得XML形式的响应数据

• status和statusText：一数字和文本形式返回HTTP状态码

• getAllResponseHeader()：获取所有的响应报头

• getResponseHeader()：查询响应中某个字段的值

• readyState ：属性 
  0:请求为初始化，open为调用 
  1：服务器连接已经建立，open已经调用 
  2：请求已经接受，即收到头信息 
  3：请求处理中，即受到响应主题 
  4：请求已经完成，且响应就绪，即响应完成

通过监听request.onreadystatechange事件，判断readyState的值，从而获取请求的执行情况，并做出一定的操作

request.onreadystatechange = function() {        
    if (request.readyState===4) {            
        if (request.status===200) { 
                document.getElementById("searchResult").innerHTML = request.responseText;
            } else {
                alert("发生错误：" + request.status);
            }
        } 
    }

客户端示例：

<h1>员工查询</h1>
<label>请输入员工编号：</label><input type="text" id="keyword" />
<button id="search">查询</button><
p id="searchResult"></p>
<h1>员工新建</h1>
<label>请输入员工姓名：</label><input type="text" id="staffName" /><br>
<label>请输入员工编号：</label><input type="text" id="staffNumber" /><br>
<label>请选择员工性别：</label>
<select id="staffSex"><option>女</option><option>男</option></select><br>
<label>请输入员工职位：</label><input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>
<script>
    document.getElementById("search").onclick = function() { 
    var request = new XMLHttpRequest();
    request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
    request.send();
    request.onreadystatechange = function() {
        if (request.readyState===4) {            if (request.status===200) { 
                document.getElementById("searchResult").innerHTML = request.responseText;
            } else {
                alert("发生错误：" + request.status);
            }
        } 
    }
}
document.getElementById("save").onclick = function() { 
    var request = new XMLHttpRequest();
    request.open("POST", "server.php");    var data = "name=" + document.getElementById("staffName").value 
                      + "&number=" + document.getElementById("staffNumber").value 
                      + "&sex=" + document.getElementById("staffSex").value 
                      + "&job=" + document.getElementById("staffJob").value;
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.send(data);
    request.onreadystatechange = function() {
        if (request.readyState===4) {            if (request.status===200) { 
                document.getElementById("createResult").innerHTML = request.responseText;
            } else {
                alert("发生错误：" + request.status);
            }
        } 
    }
}
</script>