WEB开发技术-基础篇

来源：互联网发布：制作公司简介的软件编辑：程序博客网时间：2024/05/20 20:01

WEB开发技术

生活中的WEB

现在已经进入移动互联时代，生活中越来越依赖手机、互联网等等，你访问的网站，使用的APP等，WEB技术都占有重要地位。现在就从你点击一个网页链接或者发起一次接口请求说起。

假如你访问的是：www.baidu.com。这显然是一个域名，如果要和百度服务器通信需要使用TCP/IP协议中的IP地址，它可以指向唯一的主机，客户机会想DNS服务器发起请求，完成域名到IP的过程。

得到IP地址后，浏览器会和服务器建立TCP连接（这就涉及到很多底层网络访问，比如子网映射、路由转发、三次握手等等），传输HTTP协议，如果没有指定端口，HTTP协议默认为80端口，随后浏览器发出www.baidu.com的网页资源请求：

GET / http/1.1Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8Accept-Encoding:gzip, deflate, sdch, brAccept-Language:zh-CN,zh;q=0.8Cache-Control:max-age=0Connection:keep-aliveCookie:__cfduid=d26af6........Host:www.baidu.comUpgrade-Insecure-Requests:1User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

服务器接收到获取请求，然后处理并返回一个响应。可能是一个WEB服务器或者负载均衡在监听端口，或者是web服务器软件（像IIS和阿帕奇）接收到HTTP请求，然后确定执行什么请求处理来处理它。请求处理就是一个能够读懂请求并且能生成HTML来进行响应的程序（像ASP.NET,PHP,RUBY…）。中间可能会涉及数据库操作、逻辑处理等等。返回的响应如下：

HTTP/1.1 200 OKBDPAGETYPE:2BDQID:0xa64f2b530005bcc0BDUSERID:802425255Cache-Control:privateConnection:keep-aliveContent-Encoding:gzipContent-Type:text/html;charset=utf-8Date:Thu, 11 May 2017 12:33:16 GMTExpires:Thu, 11 May 2017 12:33:16 GMTServer:bfe/1.0.8.18Set-Cookie:BDSVRTM=162; path=/Set-Cookie:H_PS_PSSID=1434_21088_18560_17001_21931_22919_20929; path=/; domain=.baidu.comSet-Cookie:__bsi=13914547124298889310_00_0_I_R_166_0303_C02F_N_I_I_0; expires=Thu, 11-May-17 12:33:21 GMT; domain=www.baidu.com; path=/Set-Cookie:BD_HOME=1; path=/Strict-Transport-Security:max-age=172800Transfer-Encoding:chunkedX-UA-Compatible:IE=Edge,chrome=1 <!Doctype html><html xmlns=http://www.w3.org/1999/xhtml><head>....

如果返回状态码为200，表示请求正常，如果非200，浏览器会自行处理，比如返回301为重定向，浏览器会自动发起重定向指向的url，返回404浏览器会显示未找到等错误信息。

这时浏览器开始解析、渲染html文件和请求外部脚本和样式，最终呈现出我们看到的网页。

HTTP协议内容

在上述例子可以看出，HTTP协议是WEB服务中的主角，HTTP协议处于TCP/IP模型的应用层，基于TCP实现。

HTTP协议的主要特点可概括如下：

1.支持客户/服务器模式。

2.简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。

3.灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

4.无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

5.无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。

如果想要读懂参数和请求数据，必须明白HTTP的请求格式和响应格式：

请求

http请求由三部分组成，分别是：请求行、消息报头、请求正文。它们之间用CRLF隔开。

请求方法（所有方法全为大写）有多种，各个方法的解释如下：

GET 请求获取Request-URI所标识的资源

POST 在Request-URI所标识的资源后附加新的数据

HEAD 请求获取由Request-URI所标识的资源的响应消息报头

PUT 请求服务器存储一个资源，并用Request-URI作为其标识

DELETE 请求服务器删除Request-URI所标识的资源

TRACE 请求服务器回送收到的请求信息，主要用于测试或诊断

CONNECT 保留将来使用

OPTIONS 请求查询服务器的性能，或者查询与资源相关的选项和需求

应用举例

GET方法：在浏览器的地址栏中输入网址的方式访问网页时，浏览器采用GET方法向服务器获取资源，eg:GET /form.html?user=jeffrey&pwd=1234 HTTP/1.1 (CRLF)POST方法要求被请求服务器接受附在请求后面的数据，常用于提交表单。eg：POST /reg.jsp HTTP/ (CRLF)Accept:image/gif,image/x-xbit,... (CRLF)...HOST:www.guet.edu.cn (CRLF)Content-Length:22 (CRLF)Connection:Keep-Alive (CRLF)Cache-Control:no-cache (CRLF)(CRLF)         //该CRLF表示消息报头已经结束，在此之前为消息报头user=jeffrey&pwd=1234  //此行以下为提交的数据

在这里需要着重解释下，get传参，它以?和url隔开，以key=value形式间隔上&构成参数，该参数一般传输到服务器就会被解析成键值对的形式，存储在map容器中。同样post也可以在url中传递该类型参数。

还有需要说明的是，url中出现中文的情况，会被进行百分号编码，然后传递到后台，后台需要解码出来才行。

响应

HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文

1、状态行格式如下：

HTTP-Version Status-Code Reason-Phrase CRLF

其中，HTTP-Version表示服务器HTTP协议的版本；Status-Code表示服务器发回的响应状态代码；Reason-Phrase表示状态代码的文本描述。

状态代码有三位数字组成，第一个数字定义了响应的类别，且有五种可能取值：

1xx：指示信息–表示请求已接收，继续处理

2xx：成功–表示请求已被成功接收、理解、接受

3xx：重定向–要完成请求必须进行更进一步的操作

4xx：客户端错误–请求有语法错误或请求无法实现

5xx：服务器端错误–服务器未能实现合法的请求

前后台交互

表单提交

我们除了从服务器获取网页资源，还需要查询或者提交数据，这时候就需要通过表单的形式向后提交数据，在html中嵌入如下的代码，点击提交按钮就可以发送一个post请求，用于提交数据。

<form method="post" action="/user/new">        姓名：<input name="username" type="text" value="test"/>        年龄：<input name="age" type="text" value="11"/>        <input type="submit" value="提交"/></form>

在传输层上，客户机会发出这样的请求：

post /user/new http/1.1Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8Accept-Encoding:gzip, deflateAccept-Language:zh-CN,zh;q=0.8Cache-Control:max-age=0Connection:keep-aliveContent-Length:20Content-Type:application/x-www-form-urlencodedHost:nn.comOrigin:nullUpgrade-Insecure-Requests:1User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36username=test&age=11

这个请求服务器处理，如果权限不够会返回响应的异常页面，如果后台异常会返回500，如果成功，会返回新的页面等等。但是在很早在大部分交互情况下，早就不是这样了。

ajax交互

为了更好的用户体验，ajax出现了，在最开始提交一次表单，就意味着刷新页面，除了耗费带宽甚至网络延迟的等待，还有就是用户操作的不友好，比如你提交了一个新的用户就像上面的例子一样，报错以后就会跳转到一个报错页面，成功会到一个新的展示页面，如果还想操作用户，必须返回前一页面，并且等待加载，这时候可以通过ajax，ajax请求post操作，然后的然后用脚本处理返回值，如果报错会弹窗提示问题，如果成功会提示是否继续添加。

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

请求ajax很方便，下面有一个jquery的ajax实例：

    $.ajax({        type: "post",        url: "/",        data: "username=test&age=11",        cache: false,        async : false,        success: function (data ,textStatus, jqXHR)        {            if("true"==data.flag)               var isconfirm = confirm("是否继续添加？");                                        if(!isconfirm) window.location= "www.baidu,com/users";                return true;            }        },        error:function (XMLHttpRequest, textStatus, errorThrown) {                  alert("请求失败！");        }    });

当前web前端技术日新月异，展现形式也越加趋近于原生客户端。由于html5和css3的加入，让html的表现形式更丰富，页面更绚丽，一些前端技术让页面更友好。

响应式布局

浏览器窗口最大化时：
这里写图片描述
缩小浏览器窗口：

再缩小：

再缩小：

数据绑定和mvc编程
这个大家可以参见vue、angular等流行框架。

RESTful规范和JSON

在ajax普遍应用以后，大多数的webservice使用的叫xml格式的数据传输和解析。xml就是可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。这个是w3school的一个例子：

<note><to>George</to><from>John</from><heading>Reminder</heading><body>Don't forget the meeting!</body></note>

由于javascript的兴起，xml很少用于网络上交互数据了，除了有些冗余之外，更关键是js解码json特别简单。因为json就是js对象的序列化字符串。

{    "name": "中国",    "province": [{        "name": "黑龙江",        "cities": {            "city": ["哈尔滨", "大庆"]        }    }, {        "name": "广东",        "cities": {            "city": ["广州", "深圳", "珠海"]        }    }, {        "name": "台湾",        "cities": {            "city": ["台北", "高雄"]        }    }, {        "name": "新疆",        "cities": {            "city": ["乌鲁木齐"]        }    }]}

REST这个词，是Roy Thomas Fielding在他2000年的博士论文中提出的。RESTful api就值得具有REST规范的api设计，他主要就是吧url看作资源，吧http中的GET、POST、PUT、DELETE。它们分别对应四种基本操作：GET用来获取资源，POST用来新建资源（也可以用于更新资源），PUT用来更新资源，DELETE用来删除资源。

会话机制

这个是后台技术的一部分，比如浏览电子商务，你会发现你登陆成功，然后可以添加购物车，浏览历史订单，你甚至可以在多个页面这么做。第二部分我们知道，http是无状态的，每次连接会断开，为什么会记得登陆的用户并从数据库查询数据返回呢？
因为在后台服务器为每一个用户维持了一个会话，每次浏览器请求携带本地的cookie时，服务器可以通过sessionid找到该会话的缓存，然后识别出该用户。
这里写图片描述

后记

本文只是简单涉猎一些内容，web及其相关技术，及其庞大，而且发展日新月异，但是底层基本不变，其余部分希望大家私下多做扩展多多学习，希望本篇可以给大家一个技术导引。

1 0