04_web编程技术.pdf
嵌入式系统工程师2Web编程技术3大纲 概述 Web监控项目 HTML JS AJAX CGI4大纲 概述Web历史回顾Web技术简介 Web监控项目 HTML JS AJAX CGI5Web的历史回顾 WWW(World Wide Web)起源Tim Berners-Lee欧洲原子能研究中心（CERN）MosaicW3C6Web技术简介 WWW的特点平台无关分布性动态性交互性C/S模式B/S模式客户/服务器模式胖客户/瘦服务器QQ、飞信浏览器/服务器模式瘦客户/胖服务器浏览器就可完成操作WebQQ7Web技术简介8Web技术简介常见的Web编程技术Web前端开发技术HTML、CSS、XML、Javascript、AjaxWeb服务器端开发技术CGI、ASP、PHP数据管理Oracle、MySQL、SQLServer、SQLiteHTML静态网页JSP PHP ASP动态脚本AJAX异步局部刷新9大纲 概述 Web监控项目 HTML JS AJAX CGI10Web监控项目项目模型及架构：RJ45WiFi嵌入式嵌入式Web Server串口串口GPRS模组模组B/S架构实现对LED(GPIO)和GPRS模组（UART）监控IOLED11Web监控项目12Web监控项目软件层次：BOAHTMLJS(AJAX)CGI用户应用程序文件系统Linux内核引导加载程序（boot bootloader）13Web监控项目功能展示：14大纲 概述 Web监控项目 HTML JS AJAX CGI15HTML概述概述 什么是HTML?超文本标记语言(Hyper Text Markup Language)使用标记标签描述网页：通过各种成对标签标识文档的结构以及超链接的信息，如、HTML文档=网页:一种纯文本文件，扩展名为.htm或.html最终显示结果取决于Web浏览器的显示风格及其对标记的解释能力编辑工具：记事本，写字板、FrontPage、Dreamweaver等16HTML概述概述 HTML标签 由尖括号包围的关键词，比如 通常是成对(开始标签，结束标签)出现的比如,例外:、注释标签:、注释 HTML元素 开始标签（start tag）到结束标签（end tag）的所有代码。HTML属性 在HTML元素的开始标签中规定 以名称/值对的形式出现，比如：name=value。17HTML标签标签 开启我的html之旅我是一个html，分为头部和主体两大部分Html demo118HTML标签标签 HTML头部标签 标题标记 声明网页标题，指示网页作用 默认为网页另存为后的网页文件名字 默认为收藏此网页时的收藏夹中的名字 元信息标记 提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词 用法：例如：Html demo219HTML标签标签 HTML主体标记是放置页面中所有的内容，如文字、链接、图片、表格、表单等 文字标签：标题标签：-链接标签：图片标签：表格标签：表单标签：Html demo320HTML标签标签 表单 HTML页面与服务器交互的手段 属性：name：表单的名称 method：表单数据从浏览器传输到服务器的方法get：将表单数据附加在URL地址后面，长度不超过8192个字符,不具有保密性，默认为getpost：将表单数据包含在表单的主体中，一起传输到服务器上。没有长度限制,密文传输 action：用来定义表单处理程序21HTML标签标签 form 标记内的标记表单输入标记菜单和列表标记菜单和列表项目标记文字域标记22HTML标签标签 输入标记 常用的文本域、按钮都是使用这个标记 属性：name域名称type域类型 type属性值：text文字域password密码域file文件域checkbox复选框radio单选框button普通按钮submit提交按钮reset重置按钮hidden隐藏域image图像域23HTML标签标签 菜单和列表标记,表单中的对象主要是为了节省网页的空间而产生的 属性：name 菜单和列表的属性size显示的选项数目multiple 列表中的选项为多项value选项值selected 默认选项24HTML标签标签 文字域标记这标记用来制作多行文字域，可以在其中输入更多的文本 属性：name文字域的名称rows文字域的行数cols文字域的列数25HTML高级高级 更炫的HTML 充分利用HTML标签的属性 学习HTML布局表格布局框架布局 使用CSS美化HTML标签元素 使用HTML事件事件触发浏览器中的行为，例如：当用户点击某个 HTML 元素时启动一段 JavaScript。HTML DOMHtml demo4Html demo5Html_demo6Html_demo726大纲 概述 Web监控项目 HTML JS AJAX CGI27JS概述 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言 由浏览器内解释器翻译成可执行格式后执行 在概念和设计方面，Java 和 JavaScript 是两种完全不同的语言 JavaScript的五个特点：基于对象的语言 简单性 安全性 动态性 跨平台性28JS概述 网页使用脚本的三种方式：直接添加脚本JS_demo1 使用script标记插入脚本/在这里编写JavaScript代码JS_demo2 链接脚本文件 JS_demo329JS语法 JavaScript支持两种类型的注释：行注释在行末/块注释可以跨越多行/*/*/分号是语句的结束符号 大小写 JavaScript是大小写敏感的，这意味着大写字母同相应有小写字母是不同的 JavaScript的保留关键字是小写的30JS语法JavaScript保留关键字(全部用小写)breakcasecatchcontinuedebuggerdefaultdeletedoelsefalsefinallyforfunctionifinInstanceofnewnullreturnswitchthisthrowtruetrytypeofvarvoidwhilewith31JS语法 变量、数据类型和表达式 变量的声明使用var关键字进行变量的声明：var x;在声明的时候可以同时对变量进行初始化：var y=4;使用逗号将多个变量隔开：var x,y=5,z=hello;变量的命名第一个字符是ASCII字母（大小写皆可），或者是下划线。但是不可以是数字变量必须由字母、数字和下划线组成变量不可以是保留字 变量区别大小写32JS语法 算术运算符+、*、/、+、逻辑运算符&或AND（逻辑与）、或OR（逻辑或）、！或NOT（逻辑非）比较运算符=、位运算符&或AND(按位与)、或OR（按位或）、（按位异或）（右移）、（补零右移）33Javascript编程基础 字符串运算符：+(合并运算符)赋值运算符：=（等号）、+、-=、!=、=表达式：没有等号的式子 算术表达式：a+b+c 逻辑表达式：a=b、a=b 字符串表达式：a+abcd 条件运算符：？：（条件？结果1：结果2）34JS控制语句 JavaScript控制语句 if语句if (条件表达式)执行语句或语句群;else 执行语句或语句群;35JS控制语句 switch语句switch(表达式)case值1:执行语句1;break;case值n:执行语句n;break;for语句for(初始值；判断条件；调整值)执行语句或语句群;while语句while(条件表达式)执行语句;Do while语句do 执行语句;while(条件表达式)36JS函数 JavaScript函数 函数的语法结构:function 函数名(参数1,参数2,)函数体 函数参数不是函数的必选内容 在调用一个需要参数的函数时没有传递参数，JavaScript使用空值代替37JS对象 JS是面向对象的编程语言(OOP)对象是一种特殊的数据类型，拥有属性和方法属性：属性指与对象有关的值方法：方法指对象可以执行的行为 JavaScript中的常用对象文本对象:Document（HTML DOM）内部对象:Date、Math、Array38JS对象 Document对象 提供了从JS脚本中对 HTML 页面中的所有元素进行访问 可以通过title，URL属性获取当前文档的标题，URL信息等 可以通过getElementById(),来根据对应的ID号控制文档的某个标签元素 可以通过open,close,write方法实现对文档的打开，关闭及对应的写操作等JS_demo439JS对象 Date对象 提供了操作时间和日期的方法 拥有一系列属性和方法，可以用来表示任意的日期和时间，获取系统当前时间或者获取两个时间的间隔。从1970 年1 月 1 日 00:00:00.000 GMT开始计时的，并且以毫秒为单位。GMT是格林威治标准时间40Javascript编程基础 Date对象方法getDay()：返回星期中的某一天，06,0表示周六getDate()：返回一月中的某一天getFullYear()：返回当前年份getMonth()：返回当前月份，011getHours()：返回当前时间的小时，023getMinutes()：返回当前时间的分钟，059getSeconds()：返回当前时间的秒，059JS_demo541JS对象Math 对象执行常见的算数任务Math 对象提供多种算数值类型和函数，无需在使用这个对象之前对它进行定义42JS对象其他对象43JS全局对象函数JS_demo644大纲 概述 Web监控项目 HTML JS AJAX CGI45AJAX概述 AJAX核心是XMLHttpRequest对象 通过 JavaScript的XMLHttpRequest对象完成发送请求到服务器并返回结果的任务，然后使用JavaScript更新局部的网页 具有异步特性46AJAX原理47XMLHttpRequest 根据不同的浏览器创建异步请求对象function getXMLHttpRequest()var xmlRequest=null;if(window.ActiveXObject)xmlRequest=new ActiveXObject(Microsoft.XMLHTTP);else if(window.XMLHttpRequest)xmlRequest=new XMLHttpRequest();return xmlRequest;48XmlHttpRequest 标准标准XMLHttpRequestXMLHttpRequest属性属性属属性性描描述述onreadystatechange每个状态改变时都会触发这个事件处理器，通常会调用一个每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函函数数readyState请求的状态。有请求的状态。有5个可取值：个可取值：0=未初始化，未初始化，1=正在加载，正在加载，2=已加载，已加载，3=交互中，交互中，4=完成完成responseText服务器的响应，表示为一个串服务器的响应，表示为一个串responseXML服务器的响应，表示为服务器的响应，表示为XML。这个对象可以解析为一个。这个对象可以解析为一个DOM对象对象status服务器的服务器的HTTP状态码（状态码（200对应对应OK，404对应对应Not Found（未找到），等（未找到），等等）等）statusTextHTTP状态码的相应文本（状态码的相应文本（OK或或Not Found（未找到）等等）（未找到）等等）49XmlHttpRequest 标准标准XMLHttpRequestXMLHttpRequest方法方法方方法法描描述述abort()停止当前请求停止当前请求getAllResponseHeaders()把把HTTP请求的所有响应首部作为键请求的所有响应首部作为键/值对返回值对返回getResponseHeader(header)返回指定首部的串值返回指定首部的串值open(“method”,“url”,true)建立对服务器的调用。建立对服务器的调用。method参数可以是参数可以是GET、POST或或PUT。url参数可以是相对参数可以是相对URL或绝对或绝对URL。true:异步；异步；false:同步同步send(content)向服务器发送请求向服务器发送请求setRequestHeader(header,value)把指定首部设置为所提供的值。在设置任何首部之前必把指定首部设置为所提供的值。在设置任何首部之前必须先调用须先调用open()AJAX_demo150大纲 概述 Web监控项目 HTML JS AJAX CGI51CGI概述 CGI是:“通用网关接口(Common Gateway Interface)的简称，是HTTP服务器与其它程序进行交谈的一种工具，其程序须运行在网络服务器上 CGI是一段程序，它运行在Server上，提供同客户端 Html页面的接口52CGI概述 CGI的功能：用来解释处理来自网页表单（XmlHttpRequest）的输入信息，在服务器产生相应的处理，并将相应的信息反馈给浏览器，使网页具有交互功能 CGI处理步骤：通过浏览器将用户请求送到服务器 服务器接收用户请求并交给CGI程序处理 CGI程序把处理结果传送给服务器 服务器把结果送回到浏览器53CGI编程 CGI可以用任何一种语言编写，只要这种语言具有标准输入、标准输出和获取环境变量CGI程序通过标准输入(stdin)、标准输出(stdout)实现与web服务器间信息的传递环境变量为Web服务器和CGI接口之间约定的,用来向CGI 程序传递一些重要的参数54CGI编程 CGI传送给Web服务器的信息可以用各种格式,通常是以纯文本或者HTML文本的形式 CGI程序第一行输出的内容必须序第一行输出的内容必须是：Content-Type:text/html这个输出作为HTML的文件头。因为CGI不仅可以像浏览器输出HTML文本，而且可以输出图像，声音之类的东西CGI_demo155CGI编程 两个重要的CGI环境变量QUERY-STRING：GET方法表单输入的数据，URL问号后的内容CONTENT-LENGTH：POST方法输入的数据的字节数CGI_demo2
