一点对原生HTTP请求的理解与总结

全手打原创，转载请标明出处：https://www.cnblogs.com/dreamsqin/p/10946165.html，多谢，=。=~

术语

HTTP：超文本传输协议，规定Web浏览器如何从Web服务器获取文档和向Web服务器提交表单内容，以及Web服务器如何响应这些请求和提交；

（HTTP不在脚本控制下，只当用户点击链接、提交表单、输入URL时发生。但是js可操纵HTTP，例如设置window对象的location属性、调用表单的submit()方法会初始化HTTP请求，页面会重新加载。）

Ajax：使用脚本操纵HTTP的Web应用架构，实现与Web服务器的数据交换，不会导致页面重载，客户端从服务器“拉”数据；

Comet：使用脚本操纵HTTP的Web应用架构，与Ajax相反，服务器向客户端“推”数据；

XMLHttpRequest：定义了用脚本操纵HTTP的API；

（XMLHttpRequest对象支持包括XML在内的任何基于文本的格式，能用于HTTP和HTTPS请求，涉及HTTP请求或响应的所有活动）

XMLHttpRequest的使用

实例化（IE7及以后）：

var request = new XMLHttpRequest();

模拟XMLHttpRequest构造函数（IE5、IE6）：

if (window.XMLHttpRequest === undefined) {
    window.XMLHttpRequest = function() {
        try {
            return new ActiveXObject("MSXML2.XMLHttp.6.0");
        }
        catch (e1) {
            try {
                return new ActiveXObject("MSXML2.XMLHttp.3.0");
            }
            catch (e2) {
                throw new Error("XMLHttpRequest is not supported");
            }
        }
    }
}

HTTP请求（请求的方法或动作、请求的URL、请求头、请求体）：

request.open("GET", "/log.php");    // 请求的方法、URL
request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");   // 请求头
request.send(null);   // 请求体

HTTP响应（数字+文字的状态码、响应头、响应体）：

request.onreadystatechange = function() {
    // HTTP的请求状态readyState
    // 0：open尚未调用
    // 1：open已调用
    // 2：接收到头信息
    // 3：接收到响应主体
    // 4：响应完成
    
    // HTTP状态码status
    // 2xx：代表请求已成功被服务器接收、理解、并接受
    if(request.readyState === 4 && request.status === 200) {
        // responseText属性：MIME类型的文本响应，如：text/css
        // responseXML属性：Document对象类型，如：XML、XHTML
        console.log(request.responseText);
    }
}

一点对原生HTTP请求的理解与总结

猜你喜欢