简述HTTP过程

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：admin 阅读 404 次

HTTP连接一个最基本的过程：1客户端连接一个主机2服务器接收连接,3客户端请求一个文件,4服务器发送一个应答.客户端连接一个主机，典型的开始就是发送一个http请求比如：url='http://w

HTTP连接一个最基本的过程：

1 客户端连接一个主机；
2 服务器接收连接,
3 客户端请求一个文件,
4 服务器发送一个应答.

客户端连接一个主机，典型的开始就是发送一个http请求

比如：url = 'http://www.xesam.com:8080/search?key=xe';

发送请求之后，DNS会解析域名，定位到对应的主机

我们用一个函数模拟：

    function generateRequest(url){ //浏览器产生请求
        DNS(urlParse(url).domain,url);//域名解析，urlParse为了解析出网址
    }

简易域名解析：

    var ipMap = {
        'www.xesam.com' : server,
        'www.xesam_1.com' : 'server_1'
    }
    function DNS(domain,url){
        var server = ipMap[domain];//定位主机
        establishConnection(server,url);//如果服务器确认，则建立连接
    }

简易建立连接：

function establishConnection(server,requestUrl){
        server(requestUrl);
    }

简易服务器：

    var progressMap = {//对应的处理程序
        http:function(request){
        },
        https:function(request){
        }
    }
    function server(requestUrl){
        setTimeout(function(){//这里可以避免阻塞
            progressMap[request.requestProtocol](request);
        },0)
    }

最后是一个demo，模拟5个窗口发送http请求：

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        *{ margin: 0; padding: 0;}
        body{ width: 960px; margin: 0 auto;}
        ul{ list-style: none;}
        #window_list{ width: 400px;}
        #window_list li{
            height: 80px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<p><input type="button" value="发起请求" id="go"/></p>
<ul id="window_list">
    <li id="window_1"></li>
    <li id="window_2"></li>
    <li id="window_3"></li>
    <li id="window_4"></li>
    <li id="window_5"></li>
</ul>
<script type="text/javascript">
    var window_list = document.getElementById('window_list').getElementsByTagName('li');
    window_list.pointer = 0;
    
    var url = 'http://www.xesam.com:8080/search?key=xe';
    function urlParse(url){
        var m = url.match(/(\w+):\/\/([\w.]+)(?::(\d+))?(\/[^?]+)?(?:\?(.*))?/);
        var requestProtocol = m[1];
        var domain   = m[2];
        var port     = m[3] || 80;
        var pathname = m[4] || '/';
        var query    = m[5] || '';
        return {
            requestProtocol:requestProtocol,
            port : port,
            domain:domain,
            pathname:pathname,
            query:query
        }
    }
    function generateRequest(url){ //浏览器产生请求
        DNS(urlParse(url).domain,url);//域名解析
    }
    var ipMap = {
        'www.xesam.com' : server,
        'www.xesam_1.com' : 'server_1'
    }
    function DNS(domain,url){
        var server = ipMap[domain];//定位主机
        establishConnection(server,url);//如果服务器确认，则建立连接
    }
    function establishConnection(server,requestUrl){
        server(requestUrl);
    }
    var progressMap = {
        http:function(request){
            sleep(1000);//处理时间1s
            server.requestQueen.out();
            response(window_list[4 - server.requestQueen.getSize()]);
        },
        https:function(request){
            server.requestQueen.out();
        }
    }
    function server(requestUrl){
        server.requestQueen.put(requestUrl);
        var request = urlParse(requestUrl);
        window_list[server.requestQueen.getSize() - 1].innerHTML = '分发请求！';
        //分发请求
        setTimeout(function(){
            progressMap[request.requestProtocol](request);
        },0)
    }
    function response(win){
        win.innerHTML = '分发请求！<br />处理完成！';
    }
    server.requestQueen = new Queen();
    function Queen(){
        var queen = [];
        this.put = function(el){
            queen.push(el);
        }
        this.out = function(){
            queen.shift();
        }
        this.getSize = function(){
            return queen.length;
        }
    }
    function sleep(time){
        var start = (new Date()).getTime() + time;
        while((new Date()).getTime() < start + time);
    }
    document.getElementById('go').onclick = function(){
        for(var i = 0; i < 5; i++){
            generateRequest(url);
        }
    }
</script>
</body>
</html>

转载请注明来自小西山子【http://www.cnblogs.com/xesam/】
本文地址：http://www.cnblogs.com/xesam/archive/2011/12/14/2287692.html

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。