马志强 软件学院501室 zqma@hit.edu.cn 网络应用开发 马志强 软件学院501室 zqma@hit.edu.cn
WWW: World Wide Web Intetnet上最主要的应用 通过URL连接定位 & 点击 WEB SERVER 超媒体：文字、声音、图象 WEB SERVER HTTP / HTML WEB BROSWER http://www.someschool.edu/someDept/somePage.html host name path name protocal
WWW: World Wide Web C/S model 应用层 Browser: 获取文件，对文件的内容进行解释，显示在客户端的计算机上 Web Server: 负责信息的组织，根据客户端请求发送文件 应用层 采用tcp协议传输 端口80 HTTP request PC running Explorer HTTP response HTTP request Server running Apache Web server HTTP response Mac running Safari
Web Server 提供网上信息浏览服务 保存Web文档资料 响应来自于客户端浏览器的请求 Web页面、二进制声音、图像… 返回指定文档 例如：Apache服务器，MS IIS, Tomcat
HTTP协议 HTTP: Hyper Text Transfer Protocol 非持久的HTTP HTTP/1.0 持久的HTTP Internet上使用最多、最重要的协议 HTTP请求以文本(ASCII)的形式发送 非持久的HTTP 客户与服务器之间每一次TCP连接至多传输一个文件 HTTP/1.0 GET: 从服务器获取资源 POST: 向服务器发送数据 HEAD: 向服务器查询状态 持久的HTTP 客户与服务器之间每一次TCP连接可传输多个文件 HTTP/1.1 GET, POST, HEAD PUT DELETE
HTTP协议 访问过程 Client向Server发起TCP连接 Server接受连接请求 HTTP协议是 “无状态的” 服务器不保存客户端的访问历史及状态 TCP connection request TCP connection response Get http://www.hit.edu.cn/ <file> Close TCP connection
HTTP协议 HTTP请求基本格式 响应代码 200 (OK): 找到了该资源，并且一切正常 304 (NOT MODIFIED): 该资源在上次请求之后没有任何修改，通常用于浏览器的缓存机制 401 (UNAUTHORIZED): 客户端无权访问该资源，通常会使得浏览器要求用户输入用户名和密码，以登录到服务器 403 (FORBIDDEN): 客户端未能获得授权，通常在401之后输入了不正确的用户名或密码 404 (NOT FOUND): 在指定的位置不存在所申请的资源 HTTP请求： <request line> <headers> <blank line> [<request-body>] HTTP响应： <status line> <headers> <blank line> [<response-body>]
HTTP协议 GET: 向服务器请求资源 GET /books?&name=somename&author=someauthor HTTP/1.1 Host: www.somehost.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1 Connection: Keep-Alive HTTP/1.1 200 OK Date: Sat, 31 Dec 2005 23:59:59 GMT Content-Type: text/html;charset=ISO-8859-1 Content-Length: 126 <html> <head> <title>Somebook Homepage</title> </head> <body> <!-- body goes here --> </body> </html>
HTTP协议 POST: 向服务器发送数据 GET /books?&name=somename&author=someauthor HTTP/1.1 Host: www.somehost.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1 Connection: Keep-Alive POST /books HTTP/1.1 Host: www.somehost.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1 Connection: Keep-Alive name=somename&author=someauthor ASP获取GET参数Request.QueryString，获取POST参数用Request.Form，在JSP中用request.getParameter("XXXX")来获取 POST可承载更多样的数据，并且相对来说比较安全
HTML: Hypertext Markup Language 网页: http://www.hit.edu.cn/index.html 一个页面对应一个文件 包含文本、二进制图像… HTML: 超文本标记语言 使用标签(HTML tag)来描述网页 可描述内容和布局: <tagname></tagname> <html><body> <h1>My First Heading</h1> <p>My first paragraph.</p> <img src=“filename.jpg” align=middle> <a href=“link_url.html”>link</a> </body></html>
HTML版本 超文本标记语言(第一版): 在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准) HTML 2.0: 1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时 HTML 3.2: 1997年1月14日，W3C推荐标准 HTML 4.0: 1997年12月18日，W3C推荐标准 HTML 4.01(微小改进): 1999年12月24日，W3C推荐标准 HTML 5目前仍为草案，并已被W3C接纳
HTML常用标签 head: 定义文档头信息 title: 定义文档标题 <!-- … -->: 注释 a: 连接 img: 图像 h1-h6, p, br: 标题、段落等 table, th, tr, td: 表格相关 form, input, textarea, select: 表单相关 div:文档中的分区或节 ul, li: 列表相关
HTML属性及事件 属性 事件 class: 规定元素的类名 id: 规定元素的唯一id style: 规定元素的行内样式 title: 规定元素的额外信息 事件 窗口事件: onload, onunload 元素事件: onchange, onsubmit, onselect, onfocus… 键盘事件: onkeydown, onkeypress, onkeyup 鼠标事件: onclick, ondblclick, onmousedown onmouseout, onmouseover, onmouseup 举例 <a href="/index.html" onmouseover="alert('Welcome');return false"></a>
CSS 层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式表可以极大提高工作效率 如需进行全局的更新，只需改变样式，然后网站中的所有元素均会自动地更新 外部样式表通常存储在 CSS 文件中，也可以放在页面文件中
CSS p { color: #ff0000; } p {font-family: "sans serif";} p {text-align:center; color:red;} p { text-align: center; color: black; font-family: arial; } body { color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; h1,h2,h3,h4,h5,h6 { color: green;
Browser 应用层软件，用户与Web的接口 从服务器获取信息，显示给用户 >各浏览器对网页语法解释不同，对同一网页的渲染效果也可能不同 >网页编写者需要在不同内核的浏览器中测试网页显示效果
浏览器结构 User Interface Browser Engine Data Persistence Render Engine 浏览器在背后做了什么事情 用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。 浏览器引擎 － 用来查询及操作渲染引擎的接口。 渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。 网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。 UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。 JS解释器 － 用来解释执行JS代码。 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术 Networking JavaScript Interpreter UI Backend
渲染主流程 Parsing HTML to contruct the DOM tree Render tree contruction Layout of the render tree Painting the render tree DOM Tree HTML HTML Parser Layout 解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树 渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。 Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。 Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。 值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。 Display Attchment Render Tree Painting Style Rules CSS CSS Parser
四大内核 Trident Gecko Presto Webkit IE使用的内核，由微软开发 开放的内核，接口设计成熟(360浏览器，Maxthon…) Gecko Netscape6，Mozilla FireFox 源码完全公开 Presto Opera采用 渲染速度达到极致，牺牲网页的兼容性 Webkit Safari, Chrome, 360极速浏览器, 搜狗浏览器, 手机浏览器 源于Linux，由Apple移植到Mac及Windows 自由软件，同时开放源码 浏览器在背后做了什么事情
JavaScript JavaScript是一种广泛用于客户端网页开发的脚本语言，最常是于HTML上使用，用来给HTML网页添加动态功能 获得广泛支持: Firefox/IE/Opera/Safari 与HTML完美集成，并且使用简单 可实现多种动态效果 <script type=“text/javascript”> alert(“Hello, World!”); </script> <script src=“x.js” language=“javascript”>
JavaScript-变量类型 /* 松散类型! */ // 数值型 var intVariable = 1; var floatVariable = 1.1; // 布尔型 var booleanVariable = true; // false // 字符或字符串型 var stringVariable = “abcd”; var stringVariable = new String(“abcd”); // null和undefined var nullVaraiable = null; var undefVaraiable; // 未初始化undefined
JavaScript-变量类型 // 数组型 var arrayValue = [“A”, “B”, “C”]; var arrayValue = new Array(); arrayVale[0] = “A”; arrayVale[1] = “B”; arrayVale[2] = “C”; // 多维数组 arrayValue[0] = [“A-1”, “A-2”, “B-3”]; arrayValue[1] = [“B-1”, “B-2”]; arrayValue[2] = [“C-1”]; arrayValue[0] = new Array(); arrayValue[0][0] = “A-1”; arrayValue[0][1] = “A-2”;
JavaScript-变量作用范围 <script type=“text/javascript”> function hello() { msg = “Hello World\n”; var msg2 = “Hello World, too!\n” alert(msg + msg2); } </script> /* 注意: var定义的变量属于函数或代码块的局部变量 没有使用var的变量属于全局变量 */
JavaScript-变量运算及转换 一元运算符 ++(自增), --(自减), -(负数) 二元运算符 +, -, *, /, % // 类型自动转换 var value = 3.5 * 2.0; // 结果为 7 var value = 3.5 * “2.0”; // 结果为 7 var value = “3.5” * “2.0”; // 结果为 7 // 转换方法与运算符相关 var value = 3.5 + “2.0”; // 结果为 “3.52.0” // 结果与计算顺序相关 var value = “3” + 2 + 1; // 结果为 “321” var value = 3 + 2 + “1”; // 结果为 “51”
JavaScript-变量运算及转换 位操作 &, |, ~(非), ^(亦或) <<(左移位), >>(右移位), >>>(补零右移) var flags = 0x05; // 0101 var flagA = 0x01; // 0001 var flagB = 0x02; // 0010 var flagC = 0x04; // 0100 var flagD = 0x08; // 1000 if (flags & flagC) { // 0101 & 0100 => 0100 => true …… …… }
JavaScript-条件判断 条件判断 ==(相等), !=, >=, <=, >, < &&, ||, ! var v1 = 3.0; var v2 = “3.0” if (v1 == v2) …… // 注意不要将 == 写成 = // 这种隐式类型转换可能导致出乎意料结果 JavaScript 1.3 新增 ===(严格的相等操作) !==(严格的不等操作) if (v1 === v2) …… // 仅在数值及类型都相同的情况下返回true
JavaScript-控制语句 if (条件) { } else { } switch (表达式) { case value1: …… default: for (;;) { while (条件) { } do { } while (条件) var vals = { one: “one”, two: “two”, three: “three” for (var v in vals) { ……
JavaScript-String对象 位操作 &, |, ~(非), ^(亦或) <<(左移位), >>(右移位), >>>(补零右移) var flags = 0x05; // 0101 var flagA = 0x01; // 0001 var flagB = 0x02; // 0010 var flagC = 0x04; // 0100 var flagD = 0x08; // 1000 if (flags & flagC) { // 0101 & 0100 => 0100 => true …… …… }
JavaScript-函数 函数的语法 function funcName(para1,para2,…,paraN) { } 例如 function mult(x, y) { return x * y;
JavaScript-操作页面元素 history对象: 操作历史记录 history.go(-1); // 后退一页 histroy.go(1); // 前进一页 screen对象: 操作屏幕显示相关信息 availTop/availLeft/availLeft/…… navigator对象: 浏览器相关信息 appName/appVersion/onLine/…… document对象: 操作页面中包含的元素 页面之内的所有元素都把document视为父元素 document.getElementById() document.getElementTagName() document.write()
JavaScript-操作页面元素 // 举例: 显示所有页面内的连接 function showAllLinks() { var links = “”; for (var i = 0; i < document.links.length; i++) { links += document.links[i].href + “\n”; } alert(links);
JavaScript-操作页面元素 // 修改元素属性 function changeCSS() { var elem = document.getElementById(“some_id”); elem.style.backgroundColor = “#f00”; elem.style.width = “500px”; elem.style.color = “#fff”; elem.style.height = “200px”; elem.sytle.borderColor = “#000”; }
JavaScript-操作页面元素 innerHTML: 动态修改页面内容 *无需构建整个页面内容 // 定时显示时间 function showTime() { var dateNow = new Date(); var elem = document.getElementById(”someId") elem.innerHTML = dateNow.toString(); setTimeout("showTime()", 1000); }
PHP-简介 PHP是一种创建动态交互性站点的强有力的 [服务器端] [脚本语言] 免费的，使用非常广泛 简单学习周期短 非常高的性能 经典搭配: PHP + MySQL + Linux Apache
PHP文件 PHP文件可包含文本、HTML标签及脚本 PHP 文件向浏览器返回纯粹的 HTML <body> <?php echo "Hello World"; ?> </body> </html> PHP 文件向浏览器返回纯粹的 HTML PHP 文件的文件后缀是 ".php"、".php3" 或 ".phtml”
PHP变量 PHP 是一门松散类型的语言(Loosely Typed Language) // PHP中的所有变量都是以$符号开始的 $txt = "Hello World!"; $number = 16; Echo $txt; ?>
PHP字符串 // PHP中的所有变量都是以$符号开始的 <?php $txt1 = "Hello World!"; echo $txt1 . " " . txt2; // 并置运算符 echo strlen($txt1); // 获取字符串长度 echo strpos($txt1, “world”); // 查找字符串 ?>
PHP数组 // 数值数组，可用count($arr)获取数组长度 <?php $names = array("Peter","Quagmire","Joe"); ?> $names[0] = "Peter"; $names[1] = "Quagmire"; $names[2] = "Joe"; echo $names[1] . " and " . $names[2] . " are ". $names[0] . "'s neighbors";
PHP数组 // 关联数组 <?php $ages = array("Peter"=>32, "Quagmire"=>30, "Joe"=>34); ?> $ages['Peter'] = 32; $ages['Quagmire'] = 30; $ages['Joe'] = 34; echo "Peter is " . $ages['Peter'] . " years old.";
PHP数组 // 多维数组 $families = array ( "Griffin" => array ( "Peter", "Lois", "Megan"), "Quagmire" => array ( "Glenn"), "Brown"=>array ( "Cleveland", "Loretta", "Junior")); echo $families['Griffin'][2] . " a part of the Griffin family.”;
PHP运算符 // 算数运算符 +, -, *, /, %, ++, -- // 赋值运算符 =, +=, -=, *=, /=, %=, .= // 比较运算符 ==, !=, >, >=, <, <= // 逻辑运算符 &&, ||, !
PHP if…else语句 <html> <body> <?php $d=date("D"); if ($d=="Fri") echo "Have a nice weekend!"; elseif ($d=="Sun") echo "Have a nice Sunday!"; else echo "Have a nice day!"; ?> </body> </html>
PHP switch语句 switch ($x) { case 1: echo "Number 1"; break; case 2: default: echo "No number between 1 and 3"; }
PHP 循环语句 // for 语句 <?php for ($i=1; $i<=5; $i++) { echo "Hello World!\n"; } ?> // foreach 语句 $arr = array("one", "two", "three"); foreach ($arr as $value) { echo "Value: " . $value . "\n";
PHP 循环语句 // while 语句 $i = 0; while($i<=5) { echo "The number is " . $i . "\n"; $i++; } // do … while 语句 do { } while ($i < 5);
PHP 函数 // 无返回值函数 function writeMyName($fname) { echo $fname . " Yang.\n"; } echo "My name is "; writeMyName("David"); // 有返回值 function add($x, $y) { $total = $x + $y; return $total; echo "1 + 16 = " . add(1,16);
PHP 表单处理 // post请求页面 <html> <body> <form action="welcome.php" method="post"> Name: <input type="text" name="name" /> Age: <input type="text" name="age" /> <input type="submit" /> </form> </body> </html>
PHP 表单处理 // post处理页面 <html> <body> Welcome <?php echo $_POST["name"]; ?>. <br /> You are <?php echo $_POST["age"]; ?> years old. </body> </html>
PHP 表单处理 // get请求页面 <html> <body> <form action="welcome.php" method="get"> Name: <input type="text" name="name" /> Age: <input type="text" name="age" /> <input type="submit" /> </form> </body> </html>
PHP 表单处理 // get处理页面 <html> <body> Welcome <?php echo $_GET["name"]; ?>. <br /> You are <?php echo $_GET["age"]; ?> years old. </body> </html>
PHP 表单处理 // $_REQUEST变量包含了$_GET, $_POST // 以及$_COOKIE的内容 // 方法发送的表单数据的结果 <html> <body> Welcome <?php echo $_REQUEST["name"]; ?>.<br /> You are <?php echo $_REQUEST["age"]; ?> years old! </body> </html>
PHP 引用文件 </body> </html> <html> <body> include("header.php"); // require("header.php"); ?> <h1>Welcome to my home page</h1> <p>Some text</p>
PHP 文件上传 // 请求页面 <html> <body> <form action="upload.php" method="post" enctype="multipart/form-data"> <label for="file">Filename:</label> <input type="file" name="file" id="file"/> <br /> <input type="submit" name="submit" value="Submit" /> </form> </body> </html>
PHP 文件上传 // 服务页面 if ($_FILES["file"]["error"] > 0) { echo "Return Code: " . $_FILES["file"]["error”]; } else { echo "Upload: " . $_FILES["file"]["name”]; echo "Type: ".$_FILES["file"]["type”]; echo "Size: " .($_FILES["file"]["size”]/1024)." Kb"; echo "Temp file: " . $_FILES["file"]["tmp_name"]; if (file_exists("upload/”.$_FILES["file"]["name"])) echo $_FILES["file"]["name"] . " exists."; move_uploaded_file($_FILES["file"]["tmp_name"], "upload/". $_FILES["file"]["name"]); echo "Stored in: " . "upload/" . $_FILES["file"]["name"]; }
PHP 访问数据库 // 连接数据库 $db = new mysqli('127.0.0.1', 'root', 'root', 'nad'); if (mysqli_connect_errno()) { echo 'Error: Could not connect to database.'; exit; } else { echo "Connected successfully"; } $db->close();
PHP 访问数据库 // 读取数据 $query = "select id, pid from menu"; $result = $db->query($query); while (list($id, $pid) = $result->fetch_row()) { echo "item: $id : $pid<br>"; } /* while ($rowObject = $result->fetch_object()) { echo "$rowObject->id : $rowObject->pid"."<br>"; */
Thank You !