3. web计算

3.1 概述

web采用浏览器/服务器计算模式，它以超文本标记语言HTML和超文本传输协议HTTP为基础，为用户提供界面统一的信息浏览方式。

B/S计算模式的优势:

1. 平台无关。
2. 系统部署简单，维护方便。
3. 用户接入系统容易。
4. 潜在用户的庞大数量。

B/S计算模式的劣势

1. 服务器开销大，存在瓶颈，限制了系统的并发接入数量。
2. 客户端计算资源被浪费。
3. 浏览器本身功能上的固有缺陷对系统的限制。

3.2 web客户端

浏览器: 是一种访问web服务器的客户端工具软件, 是一个解释器. 目前较为常用的有chrome, firefox, edge等.

HTML:

CSS: CSS是Cascading Style Sheet的缩写。译作层叠样式表.CSS是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.

CSS的三种使用方式:

1. 内联
2. 页面内定义
3. 链入外部样式表文件

优先级: 可以认为是, 1 > 2 > 3. 更深入一点使用下图1111原则

客户端脚本: 由浏览器加载解释执行的程序, 被广泛应用在网页特效制作上. 目前普遍使用javascript.

cookie: 是web服务器发送的数据存储在客户端系统中以备未来查询的少量信息. 是一种应用自定义数据. 主要目的是保存信息.

插件: 能够嵌入到网页总执行相应任务的组件, 用以扩展浏览器的特性及功能.

Java applet:

1. 原先提出作为Intranet的Web计算的解决方案，现仅被用作页面特效处理。
2. 平台无关，但需浏览器对Java的支持。
3. 即时下载，不需安装。
4. 效率低。
5. 具备很强的与服务器的交互能力，但仅具备对客户机的有限的操纵能力。

ActiveX:

1. 与平台相关：一种基于Windows平台的软件技术。
2. 软件可重用性：使用一种编程语言开发的ActiveX控件可以不作任何修改在其他编程语言中使用。
3. 控件必须先注册才能使用。
4. 下载、安装自动完成。
5. 安全问题的处理(代码证书)。

3.3 web协议

URL: 统一资源定位符, 由三部分: 传输协议, 目标机器的DNS名字, 指定页面的名字.

HTTP获取资源的步骤:

1. 客户建立与服务器的连接；
2. 客户向服务器发出请求，指出要检索的文档；
3. 服务器发出响应，包括状态码和文档正文；
4. 客户或服务器任一方断开连接。

HTTP请求:

每一个请求得到一个由状态行和可能的附加信息（如：全部或部分页面）组成的应答。状态行可能包含代码200（OK），或其他错误代码，例如304（未修改），400（错误请求）或403（禁止）。当一个被请求的页面不存在时，则是“404 Not Found” .

对于上面所讲的HTTP请求消息，如果一切顺利，会有下面这样的响应。

FTP协议:

SMTP协议: SMTP的作用是把邮件消息从发信人的信箱传送到收信人的邮件服务器。

1. 首先，SMTP客户发起建立一个到接收邮件服务器SMTP服务器的端口号25之间的TCP连接。如果接受邮件服务器当前不工作，SMTP客户就等待一段时间后再尝试建立该连接。
2. 连接建立之后，SMTP客户和服务器先执行一些应用层握手操作。在这个SMTP握手阶段，SMTP客户向服务器发送发信人和收信人的电子邮件地址。
3. 客户发出邮件消息。SMTP协议可以由TCP提供的可靠数据传输服务把消息无错地传送到服务器。发送完毕后，关闭TCP连接。

3.4 web服务器端

web服务器: Web服务器只是运行一系列软件以响应客户端浏览器提出请求消息的计算机。每一个Web服务器站点都有一个进程在侦听TCP 80端口，等待接收客户端的Web请求消息。在客户与服务器的连接建立以后，客户与Web服务器使用HTTP协议进行交互。

CGI: 通用网关接口. Web服务器通过CGI接口创建网关进程，并将用户请求传递给网关。应用网关处理CGI请求，并通过应用接口访问具体应用

CGI的特点:

1. CGI可以实现为一个可执行程序。因此使Web和应用系统能够较简单、直接的集成起来。
2. CGI很难提高处理性能。因为Web服务器对每一个用户请求都必须创建一个单独的网关进程。
3. CGI接口是单向的。因此客户端的程序没有途径和服务器实现一定的交互。

服务器API:

1. ISAPI: 微软提供的一套面向Internet服务的API接口.
2. NSAPI: Netscape服务器提供的应用程序编程界面.

JDBC API: 与数据库直接连接的方法

服务器端脚本: 服务端脚本编程方式试图使编程和网页联系更为紧密，并使它以相对更简单、更快速的方式运行。服务器端脚本的思想是创建与HTML混和的脚本文件或模板，当需要的时候由服务器来读它们，然后服务器分析处理脚本代码，并输出由此产生的HTML文件。图显示了这个过程。

1. ASP: ASP是微软开发的一种服务器端脚本语言。通常的使用方法是将ASP脚本嵌入到HTML文档中，并被命名为以“.asp”为扩展名的文件。
2. PHP: PHP是另外一种嵌入HTML的服务器端脚本语言。它与HTML语言有很好的兼容性，能够方便的在HTML文档中插入PHP脚本代码从而实现对页面的控制。它最有特色的地方在于它对数据库的强大支持，编写基于数据库的网页较为简单。
3. JSP: JSP是由SUN公司推出的基于Java Serverlet以及整个Java体系的Web开发技术。JSP可以在绝大多数的Web服务器上运行，且基于JSP技术的应用程序比基于ASP的应用程序易于维护和管理。JSP最大的特点在于其跨平台能力。

3.5 多层web计算

分布式对象技术应用于Web系统: Web页面成为应用程序的集合，把整个网络变成用户的虚拟操作平台。其主旨是同过CORBA环境使Web服务器开放化，所采用的技术统称为对象Web,对象Web框架的体系结构如下图：

3.6 Ajax

Ajax: Asynchronous java script and XML（以及 DHTML 等）的缩写, Ajax基本上就是把javascript技术和 XMLHttpRequest对象放在Web表单和服务器之间。当用户填写表单时，数据发送给一些 javascript代码而不是直接发送给服务器。相反，javascript代码捕获表单数据并在后台向服务器以异步形式发送请求。然后，服务器将数据返回javascript代码，后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。javascript代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预。

Ajax设计到的基本技术:

Ajax所涉及的基本技术
1. HTML: 用于建立Web表单并确定应用程序其他部分使用的字段。
2. java script: 代码是运行Ajax应用程序的核心代码，帮助改进与服务器应用程序的通信。
3. DHTML: 用于动态更新表单。我们将使用 div、span和其他动态HTML元素来标记HTML。
4. DOM: 用于处理 HTML 结构和（某些情况下）服务器返回的 XML。

3.7 Javascript

JavaScript放置在何处:

1. 位于文档的 head 部分。
2. 位于 body 部分的脚本。
3. 外部Java Script文件。

JavaScript基本数据结构:

1. 数值型（整型、浮点型）
2. 字符串型（用“”或‘’括起来的字符或数值）
3. 布尔型（true、false）
4. 空值（null）

JavaScript变量:

1. 变量对大小写敏感
2. 变量必须以字母或下划线开始
3. 通过var语句来声明变量
4. 变量的自动声明
5. 再次声明的变量不会丢失其原始值

JavaScript的错误捕获:

1. try…catch语句
2. throw声明
3. onerror事件

JavaScript的函数:

function 函数名(var1,var2,...,varX) 
{ 
    代码．．． 
    return x;
} 

JavaScript的事件:

1. onload 和 onUnload
2. onFocus, onBlur 和 onChange
3. onSubmit
4. onMouseOver 和 onMouseOut

<input type="text" size="30" id="email" onchange="checkEmail()"> 
<form method="post" action="xxx.htm" onsubmit="checkForm()">

3.8 Request对象

readyState属性: XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态.

responseText: 这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。

responseXML: 此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。

status属性: 这个status属性描述了HTTP状态代码，而且其类型为short。而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。

statusText属性: 这个statusText属性描述了HTTP状态代码文本；并且仅当readyState值为3或4才可用。

onreadystatechange事件: 无论readyState值何时发生改变，XMLHttp-Request对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值。向该方法指示无论readyState值何时发生改变，该对象都将激活。

absort()方法: 使用abort()方法来暂停与一个XMLHttpRe-quest对象相联系的HTTP请求，从而把该对象复位到未初始化状态。

open()方法: open(method，uri，async， user-name， password)

1. method-指定发送请求的HTTP方法。
2. uri -指定请求发送到的服务器相应的URI
3. async -指定请求是异步还是同步的，缺省值为true。
4. username，password -用于身份认证

调用方法初始化一个XMLHttp-Request对象。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把re-sponseText、responseXML、status和statusText属性复位到它们的初始值。另外，它还复位请求头部。注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。

send()方法: send()方法使用一个可选的参数，该参数可以包含可变类型的数据。典型地，你使用它并通过POST方法把数据发送到服务器。另外，你可以显式地使用null参数调用send()方法，这与不用参数调用它一样。

仅当readyState值为1时，你才可以调用send()方法。在调用send()方法后，XMLHttpRequest对象把ready-State的值设置为2(发送)。当服务器响应时，在接收消息体之前，如果存在任何消息体的话，XMLHttpRequest对象将把readyState设置为3(正在接收中)。当请求完成加载时，它把readyState设置为4(已加载)。

实例:

＜form name=“validationForm” action=“xxxxxxx” method=“post”＞

    ＜table＞

        ＜tr＞
            ＜td＞Catalog Id:＜/td＞

            ＜td＞
＜input type=“text” size=“20” id=“catalogId” name=“catalogId” onkeyup=“sendRequest()”＞
＜/td＞

            ＜td＞＜div id=“validationMessage”＞＜/div＞＜/td＞

        ＜/tr＞
    ＜/table＞
＜/form＞ 


＜script type="text/javascript"＞

    function sendRequest(){

        var xmlHttpReq; 
        if (window.XMLHttpRequest) xmlHttpReq = new XMLHttpRequest();

        else if (window.ActiveXObject) xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

        else alert("Error initializing XMLHttpRequest!");
    }
＜/script＞ 


＜script type="text/javascript"＞

    function sendRequest(){
        ……
        var catalogId = document.getElementById("catalogId").value);
        xmlHttpReq.open("GET“, “xxxxxxx?catalogId="+catalogId, true); 
        xmlHttpReq.onreadystatechange=processRequest; 
        xmlHttpReq.send(null);

    }
＜/script＞ 


＜script type="text/javascript"＞

    function processRequest(){
　
        if(xmlHttpReq.readyState == 4){

            if(xmlHttpReq.status == 200){
               var response = request.responseText;
               if (response == "valid")
 document.getElementById("validationMessage"). innerHTML = “validation passed successful.";

            }

        }

} 
＜/script＞