网 站 设 计 与 建 设 Website design and developments

Slides:



Advertisements
Similar presentations
●公司簡介. ●公司組織 行銷 企劃部 行銷 企劃部 研發 設計部 研發 設計部 視覺 設計部 視覺 設計部 媒體 製作部 媒體 製作部 行動 裝置部 行動 裝置部 執行長 總經理 管理部 本公司組織人力配置除董事長、執行長、總經理外,共 有六大部門,分別為研發部 6 人、管理部 4 人、視覺設計部.
Advertisements

1 HTML 语言与网页设计 —— DHTML 技术 2 学习目标 理解客户端脚本的作用,掌握在 网页中使用客户端脚本的方法。 理解 JavaScript 语言的基本语法。 理解 JavaScript 对象和浏览器对 象在脚本编程中的作用。 理解 DHTML 的原理,能够在网页 中应用 DHTML.
第 15 章 Mobile PHP 與 Ajax 15-1 Mobile PHP 15-2 Ajax 的基礎 15-2 Ajax 的基礎 15-3 jQuery 的 Ajax 方法 15-3 jQuery 的 Ajax 方法 15-4 應用實例:關鍵字建議清單 15-4 應用實例:關鍵字建議清單.
— 高级软件人才实作培训专家 ! 北京传智播客教育 ajax 讲师:韩顺平 qq:
Web Maple— 云端计 算 数学学院刘海洋 胡婷婷. 需求 什么是 Web Maple ? Maple : “ 数学家的软件 ” 符号和数值计算 动态编程语言 集成编辑环境与图形输出 Web Maple :网页上的数学家 完整的 Maple 功能 云端计算 网页独特的输入输出格式.
面向侧面的程序设计 方林博士 本文下载地址:
1 网站设计理念 大连理工大学创新实验学院 优秀网站展示 - LAMP 类网站
互動表單的應用.
动态Web开发技术--JSP.
姓名: 钱琬婷 学号: 0501W238 专业: 计算机科学与技术 指导教师: 陈家琪 教授
王寧疆 資深講師 資策會數位教育研究所 MCPD/MCT/MVP
P303 HTML/DHTML/CSS/JavaScript 專業HTML網頁設計 陳錦輝.
網頁技術簡介.
第3章 JavaScript语言基础.
《网页设计与制作》 教学课件 主讲人:湖南铁道职业技术学院 陈承欢
14 JavaScript语言基础 JavaScript是一种轻量级、解释型的Web开发语言。所谓轻量级,就是语言的体系结构不是很庞杂,例如,没有C、Java等语言中的类、内存管理、系统管理等高深的知识范畴;所谓解释型,就是语言在浏览器或服务器等环境中直接被解释执行,不需要对源代码进行编译操作。
第三章 使用XMLHttpRequest对象
模块七 信息获取与发布 第8章 计算机网络信息的获取与发布.
数据访问页.
在PHP和MYSQL中实现完美的中文显示
5.1 – 表格(FORM) 輸入元素 : 兩種傳遞方法 : GET or POST 範例 1. 文字欄位 Text box
CT212 (02/03)-Network Programming and design
移动开发的灵便迭代之道 黄凯.
Ajax编程技术 第十章 使用外部数据.
Selenium 一个用于Web应用程序测试的工具 Robin Ren
TQC 雲端技術及網路服務.
Google 自訂搜尋 淡江大學資訊中心 專案發展組 朱家璁 2009/10/6.
网络协会2017培训 恶补Web知识训练营 2017/4/7 – Payne.
Kvm异步缺页中断 浙江大学计算机体系结构实验室 徐浩.
Ajax编程技术 第一章 Ajax简介.
AJAX基础.
滑鼠移動與按鍵事件 JavaScript 滑鼠移動與按鍵事件.
SVN的基本概念 柳峰
第二讲 搭建Java Web开发环境 主讲人:孙娜
SQL Injection.
PHP 程式流程控制結構.
第2章 网络营销工具.
第11章:一些著名开源软件介绍 第12章:服务安装和配置 本章教学目标: 了解当前一些应用最广泛的开源软件项目 搭建一个网站服务器
NAMO網頁製作教學簡報 講師:李惠茹.
Ajax網頁的危機與防禦術 王寧疆 MCAD.NET/MCSD.NET/MCT/MVP 資策會教育訓練處.
网 站 设 计 与 建 设 Website design and developments
DevDays ’99 The aim of this mission is knowledge..
任务1-3 使用Dreamweaver创建ASP网页
A New Kind of JavaScript Library
第 11 章 XML資料的傳遞 –XmlHttpRequest物件
Ajax编程技术 第六章 调试与错误处理.
/ 第5讲:数据交互开发 冯顺磊 /
JavaScript Sunxiaoshen.
第四章 团队音乐会序幕: 团队协作平台的快速创建
Drupal Dev 我想知道:什么时候、什么变化.
HTTP 1.1 Method OPTIONS GET HEAD POST PUT DELETE TRACE CONNECT
实验七 安全FTP服务器实验 2019/4/28.
计算机网络与网页制作 Chapter 07:Dreamweaver CS5入门
项目二:HTML语言基础.
JSP实用教程 清华大学出版社 第2章 JSP运行环境和开发环境 教学目标 教学重点 教学过程 2019年5月7日.
网 站 设 计 与 建 设 Website design and developments
WWW 大觀園─ Internet Explorer
Unity回傳統計資訊程式說明: 填寫回傳資訊網址(theUrl)。
Chapter 18 使用GRASP的对象设计示例.
Visual Basic程序设计 第13章 访问数据库
Delphi 7.0开发示例.
Ajax编程技术 第一章 Ajax简介.
PHP程式設計 五、程式流程控制結構 建國科技大學 資訊管理學系 饒瑞佶.
Python 环境搭建 基于Anaconda和VSCode.
第 1 章 設計網頁的準備工作.
W3C标准网页制作 主讲教师:张 涛.
FrontPage 2000.
创建、启动和关闭Activity 本讲大纲: 1、创建Activity 2、配置Activity 3、启动和关闭Activity
使用Fragment 本讲大纲: 1、创建Fragment 2、在Activity中添加Fragment
JavaScript 教师:魏小迪
Presentation transcript:

网 站 设 计 与 建 设 Website design and developments

第三部分 网站设计技术 第15章 Ajax设计方法

15.1 什么是Ajax Ajax的全称是:Asynchronous异步JavaScript+XML Web开发领域的最新时髦术语其实质是“旧貌换新颜” Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,它可以提供介于桌面应用程序和Web应用程序的中间选择,构建更为动态和响应更为灵敏的Web应用程序。 Ajax是一种客户端设计方法,可以与J2EE、.NET、PHP、Ruby和CGI脚本交互,它并不关心服务器是什么。

Ajax可以让开发人员构建基于Java技术的Web应用,并打破了使用页面重载的惯例 实例 http://www.w3school.com.cn/ajax/ajax_asp_php.asp

HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。 Ajax包括: HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。 JavaScript 代码是运行 Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信。 使用XMLHttpRequest进行异步数据接收 DHTML 或 Dynamic HTML,用于动态更新表单。使用 div、span 和其他动态 HTML 元素来标记 HTML。 文档对象模型 DOM 用于(通过 JavaScript 代码)处理 HTML 结构和(某些情况下)服务器返回的 XML

15.2 Ajax工作原理 Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验。 在Ajax之前,Web站点强制用户进入提交/等待/重新显示内容,用户的动作总是与服务器的“思考时间”同步。 Ajax提供与服务器异步通信的能力,从而使用户从请求/响应的循环中解脱出来。 借助于Ajax,可以在用户单击按钮时,使用JavaScript和DHTML立即更新UI(用户界面),并向服务器发出异步请求,以执行更新或查询数据库。当请求返回时,就可以使用JavaScript和CSS来相应地更新UI,而不是刷新整个页面。 最重要的是,用户甚至不知道浏览器正在与服务器通信:Web站点看起来是即时响应的。

在面向消费者的诸多应用当中,Google的Gmail和GoogleMaps就是最常见的例子。在Gmail当中,AJAX负责如何开启线程会话,以显示不同邮件的文本内容。而在Maps当中,AJAX允许用户以一种似乎无缝的方式拖拉及滚动地图。 还有雅虎的Flickr像片共享应用和亚马逊网站的A9搜索引擎。 这些UI都充分地使用了后台通道 不过AJAX应用软件的适用领域具有一定的局限性。因为它们利用了一些最新的Web技术,所以只能在某些Web浏览器里面运行 Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入

17.3 XMLHttpRequest 对象 XMLHttpRequest是一个 JavaScript 对象,处理所有服务器通信的对象。 一个Ajax交互从一个XMLHttpRequest对象开始。 它允许一个客户端脚本来执行HTTP请求,并且将会解析一个XML格式的服务器响应。 1)启动一个Ajax过程 form+ JavaScript 2)创建一个XMLHttpRequest实例 3)获取表单数据 。 4)将目标URL设置到XMLHttpRequest对象上。 5)发送请求 6)处理服务器响应

1)启动一个Ajax过程 form+ JavaScript <FORM METHOD=GET ACTION=”/cgi-bin/helloworld.pl”> Click here to fire a script: <INPUT TYPE=SUBMIT VALUE=”fire”> </FORM>

<form> <p> City: <input type="text" name="city" id="city" size="25" onChange="callServer();" /> </p> State: < input type="text" name="state" id="state" size="25" Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p> </form>

2)创建一个XMLHttpRequest实例 IE7+、Firefox、Chrome、Safari 以及 Opera variable=new XMLHttpRequest(); IE5 和 IE6 使用 ActiveXObject variable=new ActiveXObject("Microsoft.XMLHTTP");

IE中安装的 JavaScript 技术版本不同,MSXML 实际上有两种不同的版本 var xmlHttp = false; try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; } } xmlHttp是XMLHttpRequest句柄

function callServer() { // 从Web表单中获取city 和 state 单元格的值 var city = document.getElementById("city").value; var state = document.getElementById("state").value; if ((city == null) || (city == "")) return; if ((state == null) || (state == "")) return; // 建立URL,escape 函数是一个顶级 JavaScript 函数,可将属性值添加到URL中 var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

// 打开一个与服务器的连接 xmlHttp // 打开一个与服务器的连接 xmlHttp.open("GET", url, true); // 设置结束后服务器运行的函数名 xmlHttp.onreadystatechange = updatePage; // 发送这个请求 xmlHttp.send(null); }

XMLHttpRequest 对象的 open() 方法 指定了连接方法(GET) 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。 和要连接的 URL。 最后一个参数 如果设为 true,那么将请求一个异步连接(这就是 Ajax 的由来) 如果设为 true,当服务器在后台处理请求的时候用户仍然可以使用表单(甚至调用其他 JavaScript 方法)。 。 如果使用 false,那么代码发出请求后将等待服务器返回的响应。

6)处理服务器响应 function updatePage() { if (xmlHttp.readyState = = 4) { var response = xmlHttp.responseText; document.setElementById("zipCode").value = response; }

responseText 属性 responseXML 属性 获得字符串形式的响应数据 来自服务器的响应是 XML,而且需要作为 XML 对象进行解析 http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_response.asp

AJAX ASP/PHP 请求实例 http://www.w3school.com.cn/ajax/ajax_asp_php.asp xmlhttp.open("GET","gethint.php?q="+str,true); //获得来自 URL 的 q 参数 $q=$_GET["q"]; echo $response;

AJAX 数据库实例 AJAX XML 实例