Ajax编程技术 第六章 调试与错误处理.

Slides:



Advertisements
Similar presentations
第 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 應用實例:關鍵字建議清單.
Advertisements

— 高级软件人才实作培训专家 ! 北京传智播客教育 ajax 讲师:韩顺平 qq:
具有梦天堂特色的 Web前端开发规范 叫我三桂吧 t.qq.com/aNd1coder.
事件驱动的移动数据中心 广州舜飞信息科技有限公司 谭荣棉.
对症下药 前端工程师如何学习Javascript.
作業2-Javascript實作 (請同學自行研讀電子書或指定之Javascript教科書) 書上習題: 11-3
姓名: 钱琬婷 学号: 0501W238 专业: 计算机科学与技术 指导教师: 陈家琪 教授
第五章:JDBC与数据库 第一讲.
JavaScript中常用的互動方式 認識簡單的交談與基本的運算.
第12讲 Javascript 复习 信息学院 孙辉.
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
浏览器工作原理浅析 TID Ghostzhang.
第一讲 JavaScript编程基础 信息学院 周宝刚.
第4章 JavaScript脚本语言基础 4.1 JavaScript简介 4.2 JavaScript语法基础
第3章 JavaScript语言基础.
《网页设计与制作》 教学课件 主讲人:湖南铁道职业技术学院 陈承欢
14 JavaScript语言基础 JavaScript是一种轻量级、解释型的Web开发语言。所谓轻量级,就是语言的体系结构不是很庞杂,例如,没有C、Java等语言中的类、内存管理、系统管理等高深的知识范畴;所谓解释型,就是语言在浏览器或服务器等环境中直接被解释执行,不需要对源代码进行编译操作。
第三章 使用XMLHttpRequest对象
一、登录界面 (一)登录方式 1、访问广东工程咨询网 ( 动态里,“咨询师登记工作”专栏 2、 IE地址栏中直接键入管理系统 地址(
RWD網頁設計實務 李欣螢 以誠研發有限公司.
数据访问页.
5.1 – 表格(FORM) 輸入元素 : 兩種傳遞方法 : GET or POST 範例 1. 文字欄位 Text box
第六章 操作浏览器窗口.
Ajax编程技术 第十章 使用外部数据.
HTML5全栈开发序列课程 《前端入门》之HTML入门 余鹏作品.
Google 自訂搜尋 淡江大學資訊中心 專案發展組 朱家璁 2009/10/6.
Ch1.認識全球資訊網 1.1 「網際網路」與「全球資訊網」 1.2 全球資訊網的基礎 – 網頁與超連結
教師: 陳明瑤 電郵: 網際網路應用-網頁設計3 教師: 陳明瑤 電郵:
第 2 章 必備的 HTML 與 CSS 重點.
网络协会2017培训 恶补Web知识训练营 2017/4/7 – Payne.
Ajax编程技术 第一章 Ajax简介.
AJAX基础.
在 Web 应用中,导航是非常重要的。ASP
滑鼠移動與按鍵事件 JavaScript 滑鼠移動與按鍵事件.
邁向 HTML5 如何與 ASP.NET 整合 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 )
中華技術學院 網頁設計研習會.
張智星 台大資工系 多媒體檢索實驗室 第五章 自訂函數 張智星 台大資工系 多媒體檢索實驗室.
JavaScript 语言3 学习网站:心蕊设计
進階 WWW 程式設計 -- PHP Regular Expression 靜宜大學資訊管理學系 蔡奇偉副教授 2004
網頁製作比賽 ----技術探討
Java语言程序设计 第五部分 Java异常处理.
JavaScript 靜宜大學 資管系 楊子青.
NAMO網頁製作教學簡報 講師:李惠茹.
复习 JavaScript && ES6 专题 (1) 2017/3/10 – Payne
十二年國民基本教育中等學校教師教學專業能力研習五堂課
課程名稱:_____________ 指導教授:_____________
張智星 台大資工系 多媒體檢索實驗室 第六章 文件物件模型(DOM) 張智星 台大資工系 多媒體檢索實驗室.
网 站 设 计 与 建 设 Website design and developments
HTML 103 互動式網頁.
A New Kind of JavaScript Library
对ReactJs的认知.
Ch09 在網頁之間傳遞資訊 網頁程式設計.
C# 基本語法、變數.
網站HOLMES DATA監測代碼.
UI 软件 设计 页面布局(一).
JavaScript 语言2 学习网站: 第 4 章 JavaScript 语言2 学习网站:
Prepared by : Au Kit Ming
HTML 103 互動式網頁 助教:黃毓瑩.
XML備份MySQL資料庫 <html> <head>
第3章 JavaScript基本语句.
网 站 设 计 与 建 设 Website design and developments
Unity回傳統計資訊程式說明: 填寫回傳資訊網址(theUrl)。
Java程序设计 第17章 异常和断言.
黑龙江省科学基金 项目验收填报培训 黑龙江省计算中心 2015年09月.
標示語言 超文本標示語言(HTML) 製作簡單網頁
W3C标准网页制作 主讲教师:张 涛.
第8章 网页特效——JavaScript 主讲人:刘泰然 经济管理学院.
讀取網路資料及JSON開放資料 靜宜大學資管系 楊子青
JavaScript 教师:魏小迪
HTML5.
Presentation transcript:

Ajax编程技术 第六章 调试与错误处理

6.1 概述 Ajax应用程序不能按照预期方式工作时,一定是发生错误。最有可能发生错误的地方在于: JavaScript代码:建议使用异常处理try、catch语句 Ajax请求所涉及的问题:检查Ajax请求,判断是否正在创建该请求。 6-2

6.2 JavaScript错误处理 JavaScript被公认为是易错难于调式的语言。目前还没有成熟的集成开发环境(IDE)。从第三版开始,ECMAScript采用了Java中的try语句,可以帮助测试代码并找到错误所在之处。 异常处理 try语句和catch或finally子句配合使用: 格式 try { // execute this block of code } catch (err) { //try中代码出错,则执行此部分代码; } 功能:如果在执行rey语句中的程序出错时,便在出错的地方停止执行,然后执行catch语句中的代码 6-3

6.2 JavaScript错误处理 finally子句可以添加到try语句后,其中的代码无论是否发生异常,都会被执行。例如: IE运行截图 try { var x; x[1] = 3; } catch (err) { document.write('发生一个异常; '+err.message); Finally { document.write('<br>try/catch 测试完毕.'); Firefox运行截图 6-4

6.2 JavaScript错误处理 catch子句捕获try代码创建的JavaScript的error对象。Error对象包含的属性有: name:指定错误类型;此例中x不是数组,所以创建了TypeError。TypeError有6中出错信息: EvalError:Eval()函数中的代码出错; RangeError:超过允许的取值范围; ReferenceError:使用了非法引用; SyntaxError:eval()函数中代码发生解析错误; TypeError:变量类型和预期不同; URIError:错误使用了URI函数( encodeURI()或decodeURI() ) 6-5

6.2 JavaScript错误处理 onerror事件处理程序 当脚本产生错误时,浏览器触发error时间,通过创建onerror事件处理程序,就可以找到错误发生在哪里: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Accessing the error event</title> <script type="text/javascript"> function myHandle (msg, url, line) { alert ('An error occurred:\nmessage: ' + msg + '\nurl: ' + url +'\nline: ' + line); return true; } </script> </head> <body> onerror = myHandle; var x; x[3] = 3; // 这是第17行 </body> </html> 6-6

6.3 DOM检查器 我们知道,HTML DOM是HTML页面的编程接口,它规定我们如何存取或改变HTML文档内容。DOM标准有W3C组织开发。 DOM检查器用来检查DOM的动态模型。DOM检查器遍历浏览器当前的DOM模型,并显示该DOM当前的状态。我们主要介绍微软的IE DOM Inspector。 IE DOM Inspector IE DOM Inspector是开发人员常用的一个IE插件,在微软网站上下载安装后,边在IE的查看菜单上增加了此功能选项。 可以勾选“查看”→“浏览器栏”→“IE DOM Inspector”,打开IE DOM 检查器,这样浏览网页时,在浏览器下方边多开了2个窗口。形状如下页所示: 6-7

6.3 DOM检查器 工具栏 DOM树 HTML DOM 元素的HTML页面 6-8

6.3 DOM检查器 检查DOM:开始检查 6-9

6.3 DOM检查器 6-10

6.3 DOM检查器 6-11

6.3 DOM检查器 6-12

6.3 DOM检查器 现场编辑DOM:修改DOM的属性值 6-13

6.3 DOM检查器 动态修改DOM返回的信息: 6-14

6.3 DOM检查器 修改HTML元素:可在浏览器窗口直接查看并编辑HTML代码: 6-15

6.3 DOM检查器 查看修改效果: 6-16

6.3 DOM检查器 寻找DOM节点:另一种检查DOM的方法是根据id或name查找所需的特殊元素。 6-17

6.3 DOM检查器 6-18

6.3 DOM检查器 通过点击选择元素: 6-19

6.3 DOM检查器 6-20

6.3 DOM检查器 为JavaScript申请DOM全名: 6-21

6.3 DOM检查器 6-22

6.3 DOM检查器 6-23

6.3 DOM检查器 6-24

6.4 Ajax故障诊断 由于浏览器请求和响应都发生在后台,并且有些问题的出现也不会产生错误,所以要诊断一个Ajax应用程序的故障很难。 我们简要介绍一种在IE上的免费软件:ieHTTPHeaders Explore Bar,下载安装后,在IE中可以通过单击“查看”→“浏览器栏”→“ieHTTPHeaders”来打开它。 打开后,在浏览器窗口的底部另开一个窗口,显示当前会话的HTTP头日志,如下页图示: 6-25

6.4 Ajax故障诊断 使用HTTP1.1的GET请求 发送该请求的用户代理字符串 请求的目的服务器 6-26

6.4 Ajax故障诊断 我们可以通过该软件查看HTTP的请求、响应的详细情况,从而判断它们的正确性,帮助我们查找问题所在。 6-27