ajax 编程技术第二章 javascript 相关要点

主讲教师：李艺主讲教师：李艺[email protected]@ustc.edu.cn

Ajax 编程技术第二章 JavaScript 相关要点

2-2 中国科大《 Ajax编程技术》

2.1 JavaScript 核心

编程要点 JavaScript 区分大小写；分号可选；让代码自动换行，一条语句中不能有硬回车；多添加注释。



原始数据类型数值型；字符串型；布尔型；未定型：申明了一个变量而没赋值时，为未定型，它

只有一个值： undefined;

Null 型：没有申明的变量为 Null 型，它也只有一个值： null

引用数据类型。



引用数据类型引用数据类型包含指向内存中存放数据的位置的引用，而

不是直接指向数据本身。 JavaScript 中， Object 类型，例如 Arr

ay 和 Function ，就是引用数据类型。如果对函数参数代以引用型物参，那么在函数内修改物参

变量值，就会改变它所指向的原始数据。即使改变发生在函数内，数据也会在整个范围内发生变化。

Function myArray (a) {

var a[0] =5;

}

Var nextArray = [1,2,3];

myArray(nextArray);

Alert(“nextArray = “+ nextArray);

在调用 myArray 函数后，nextArray 的值为：5 ， 2 ， 3 。



运算符注意两个比较运算符： === 和 !== 。 === ：等于且类型相同； !== ：不等于或类型不同。


2.2 面向对象的 JavaScript

JavaScript 有 4 种不同类型的对象：内置对象，如 Date,Math ；浏览器对象，如 window,navigator,history ；文档对象，如 image,forms,links ；用户自定义对象



内置对象通过使用 new 关键字和对象构造函数，来创建

该对象的新实例：new myArray = new Array(); // 创建了一个 Array 对象的新实例

可以通过“ .” 来访问对象实例的任一属性和方法：myArray.reverse();

myArray.length;



浏览器对象浏览器对象 (BOM) 是一组用来与浏览器窗口进行交互的对

象。包括： window 对象， BOM 的顶层对象，用于移动窗口、调整窗口尺

寸； history 对象，用于跟踪用户访问过的每个页面； location 对象，用于跳转至新页面； navigator 对象，包含浏览器名称、版本信息； screen 对象，提供显示特性； document 对象，它即属于浏览器对象模型，又属于文档对象

模型。



用户自定义对象构造函数1. 使用 Object 构造函数创建新的用户自定义对象：

var member = new Object(); // 定义一个新对象2. 然后为该对象添加属性：

member.name = “zhangsan”;

member.age = 19;

3. 为该对象添加方法：myObj.show=function()

{ document.wirte ( "I am "+myObj.name+

”, My age is “+myObj.age);

}; // 注意：本例中的函数是匿名的，且定义以分号结尾4. 调用此对象的方法的方法：

member.show();



一般情况下，需要创建对象的多个实例，这样就可以拥有具有相同属性和方法、但属性取值不同的多个对象。可以这样创建：1. 创建对象：

function myObj(name,age)

{ this.name = name; //this 指针始终指向当前对象 this.age = age;

this.show = function()

{ document.write(“I am “+name+”, my age is “+age}

}

2. 创建对象的实例：var myObj1 = new myObj(“zhangsan”,19);

var myObj2 = new myObj(“lisi”,20);

3. 为实例添加原始对象中没有的新属性：myObj2.sex = “male”;

4. 调用方法：myObj1.show();

myObj2.show();

alert(myObj2.sex);

5. 完整程序见下页



<html><head><script type="text/javascript">

function myObj(name,age){ this.name = name; this.age = age; this.show = function() { document.write("I am "+name+", my age is

"+age+"<BR>"); } }

</script></head><body><script type="text/javascript">

var myObj1 = new myObj("zhangsan",19);var myObj2 = new myObj("lisi",20);myObj2.sex="male";myObj1.show();myObj2.show();alert(myObj2.sex);

</script></body></html>



原型JavaScript 中，每一个对象实例都基于原型（相当于 C++

中的类），每个对象实例都包括一个指向该原型属性和方法的 prot

otype 属性，可以用它为该类原型的所有对象实例来指定属性和方法。

例如，程序创建了多个 myObj 对象的实例，并且在内存中创建、存储了多个 show 函数的副本。通过使用 prototype 属性，并在构造函数定义外定义 show 函数，可以避免内存占用，但仍能使所有 myObj 对象的实例访问 show 函数。销毁对象：对象是引用类型，会占用大量内存。如果用完对象，

必须销毁，其方法就是将其值赋为 null ：myObj1 = null;



<html><head><script type="text/javascript">

function myObj(name){ this.name = name; this.age ;}myObj.prototype.show = function() { document.write("I am "+name+", my age is "+age+"<BR>"); } ; // 用 prototype 属性为原型创建所有该类实例都能访问的方法myObj.prototype.age=20; // 用 prototype 属性为原型指定默认值

</script></head><body><script type="text/javascript">

var myObj1 = new myObj("zhangsan");var myObj2 = new myObj("lisi“);myObj2.age=30; // 改变某个实例的属性，默认值myObj1.show();myObj2.show();myObj1 = null; // 销毁对象myObj2 = null; // 销毁对象

</script></body></html>


2.3 JavaScript 对象的操作

JavaScript 提供了几个用于操作对象的语句和关键字及运算符：

1. For…in 语句基本格式：

For （对象属性名称 in 已知对象名称）它通过将一个已知对象的所有属性反复置给一个变量而不

是使用计数器来实现循环：Function showPro(object)

{ for (var i=0;i<30;i++) document.write(object[i]); } Function showPro2(object)

{ for (var pro in object) document.write(object[pro]); }

函数 showPro2 使 For...in 语句根本不需要知道对象属性的个数，在循环体中， For 自动地将属性取出来，直到最后为止。



2. with 语句基本格式：

with (object) { …… }

所有在 with 语句后花括号中的语句，都是在后面 object 对象作用域中的。下面的代码段显示两种访问 HTML表单的元素的方法，一种是普通的方法，另外一种是使用 with 语句的方法：



方法一： frames[1].document.forms[0].address.value

方法二： with (frames[1].document.forms[0]) {

address.value = "";

name.value = "";

}

这种方式用在需要频繁或者批量访问一个对象的属性或者方法的地方。通过 with 语句暂时修改作用域链，执行完毕后再把作用域链恢复到初始状态。



3. this 关键字this 是对当前的引用，在 JavaScript 中由于对

象的引用是多层次、多方位的，往往一个对象的引用又需要对另一个对象的引用，而另一个对象有可能又要引用另一个对象，这样有可能造成混乱，最后自己也不知道现在引用的是哪一个对象，为此 JavaScript 提供了一个用于将对象指定当前对象的语句 this 。


2.4 文档对象模型

什么是 DOM ： DOM,Document Object Model 是一种树型结构，它根据 XML ， HTML/XHTML 的 W3C规范创建。 DOM 提供一套表示文档结构的对象，以及访问这些对象的方法。

DOM 分类：分为三部分核心 DOM ，包括 XML 、 HTML共有的对象； XML DOM ，包括 XML 对象； HTML DOM ，包括 XML 对象。



页面中所有对象都与顶级对象 document 有关。通过它，可以使用 JavaScript 访问 HTML 文档中的任一对象，并修改其属性。



文档的家谱树结构

html

head body

title p ul

li li



文档的节点树结构除了可以从家谱树的角度分析文档外，还可以用

节点树来分析。从节点树的角度来看，文档是节点的集合，节点是文档树的分支和叶子。

节点分类：文档节点可以分为三大类：元素节点；文本节点；属性节点。


Welcom you.

p

class=“f1”


例如：<p class=“f1”>Welcom you.</p>

←元素节点

文本节点↑属性节点↑



用于访问对象的 DOM 方法 getElementById ：如果元素中有一个 id ，那么访

问它的最简单的方法就是用此方法：<p id = “myPara”>Hi, world!</p>…var x=document.getElementById(“myPara”)

现在可以用 x 便捷地访问 id 值为 myPara 的元素。例如：改变此元素的某些属性：

x.style.fontWeight=“bold”; // 将此元素中的文本用粗体显示；



例：若有一页面有如下的代码：<head id=“e11”>…<body id=“e12”>…

1. 若要访问它们的父节点 html元素，可以使用下面任意一行代码：document.getElementById(“e11”).parentNode;document.getElementById(“e12”).parentNode;

2. 若要访问 body元素的所有子元素，可以使用以下代码：document.getElementById(“e12”).childNodes;

3. 子元素有多个，包含在一个数组中，可通过数组索引来访问每个子元素：document.getElementById(“e12”).childNodes[0]; // 访问第一个 body 的子元

素4. 也可以用下面语句访问第一个子元素：

document.getElementById(“e12”).firstChild; // 访问第一个 body 的子元素5. 访问 body 的兄弟节点 (head节点 ) ：

document.getElementById(“e12”).previousSibling; //body元素的前趋兄弟是 head元素document.getElementById(“e11”).nextSibling; //head元素的后继兄弟是 body元素



getElementsByTagName ：使用 tag 名而不是 id

名访问元素。例如：<p>Hi, world!</p><p>How are you?</p>

则可以这样访问它们：var y = document.getElementsByTagName(“p”);for (i=0;i<y.lemgth;i++) { y[i].style.color=“green”; }

如果只想改变第一个段落，则可这样使用：var z = document.getElementsByTagName(‘p’)[0];



创建节点1. 创建一个新段落，可以使用以下代码：var newNode = document.createElement(‘p’);

2. 添加新文本节点到段落中：var newText = document.createTextNode(‘ 这里是添加的新文本’ );

newNode.appendChild(newText);



<!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=gb2312" /><title>Adding New Elements</title><style type="text/css">body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; font-weight: bold;}.newDiv { background-color:#ffcccc;}</style><script type="text/javascript">function newOne() { var newEl = document.createElement('p'); var newTx = document.createTextNode('This is the new paragraph.');

newEl.appendChild(newTx); var newPara =document.getElementById('newText'); newPara.appendChild(newEl);}function newColor() { document.getElementById('newText').style.color="red"; }</script></head><body><p> 这是本页第一段 </p><div class="newDiv" id="newText"></div><p> 这是本页第二原始段 </p><form> <input type="button" value="Add a new paragraph" onclick="newOne()" /><br /><br /> <input type="button" value="Make it red" onclick="newColor()" /></form></body></html>



另一种方案 innerHTML

所有 HTML元素都有 innerHTML 属性，该属性可以取代 DOM 方法来更改元素的内容。在 Ajax应用中，它经常被用在回调函数中。

通过 innerHTML 属性，可以用字符串替换任一HTML元素中的内容，该字符串可以包括 HTML元素，这样不使用 DOM 方法也可以创建新元素。



在上一示例中我们将使用 DOM 方法的函数变成使用 in

nerHTML ，代码更加简化，运行速度更快：function newOne() { var newEl = document.createElement('p'); var newTx = document.createTextNode('This is the new paragraph.'); newEl.appendChild(newTx); var newPara =document.getElementById('newText'); newPara.appendChild(newEl);}

function newOne() { var newPara = document.getElementById('newText'); newPara.innerHTML = “<p>This is the new paragraph.</p>”;}



问题在于， innerHTML还不是 W3C标准。但目前大多数浏览器还是支持它。如 firefox2, IE6/7, Opera

9.


2.5 JavaScript 和事件

浏览器事件是加载页面后运行 JavaScript 程序的关键。一旦浏览器窗口加载完 Web 页面后，所有 Jav

aScript 代码就已经被读取和执行。要在 JavaScript 和HTML之间交互，只能靠触发事件达到。

HTML事件：如 onclick, onblur, onload 等，就是一种将事件与事件处理的 JavaScript 程序绑定的方法。例如，下面代码设定，当单击按钮时，将调用 JavaScript

的 myResponse 函数：<input type=“button” value=“click me” onclick=“myResponse”>



事件模型处理事件流的技术主要有两种模型：事件冒泡 (event bubbling)技术：事件从最具体 (most-specifi

c) 的目标到最不具体 (least-specific) 的目标依次触发；事件捕获 (event capturing)技术：事件从最不具体的目标到最

具体的目标依次触发。<div><p>Event oeder</p> </div>

上面的 HTML 代码中， P元素嵌套在 div元素中，假设这两个元素都有 onmouseover 的事件处理程序，如果用户鼠标划国该元素，则在事件捕获技术中先触发父元素 div 的 mouseover ；而在事件冒泡技术中，先触发子元素 p 的 mouseover 。

IE 使用事件冒泡技术； W3C DOM既使用事件捕获又使用事件冒泡技术。



事件注册程序内联事件注册

在 JavaScript 中使用事件的第一步是注册事件处理程序，以便浏览器在触发事件时能够运行相应的脚本程序。注册事件处理程序的常见方法是使用 HTML 属性进行内联事件注册 (inine event registration) ：

<a href=“myPage.html” onclick=“startNow()”>



Web 页面的层关系

层 Web标准视图

结构层 HTML/XHTML

表示层 CSS

行为层 JavaScript



直接事件注册使用事件属性和函数名，直接将事件处理程序注

册到元素中：var myElement = document.getElementById(‘1stpara’);

myPara.onclick = startNow; // 注意，这里函数 startNow 没有括号

事件注消myElement.onclick = null;

这些方法跨浏览器兼容，但只允许为同一元素上的一个事件注册一个程序。要想注册多个程序， IE 和W3C 的方法各不相同。


IE事件注册模型注册事件处理程序：

var myElement = document.getElementById(‘1stpara’);

myElement. attachEvent(‘onclick’,startNow);

myElement.attachEvent(‘onclick’,startNow2); // 注册另一个事件

注销注册事件程序：myElement.detachEvent(‘onclick’,startNow);

myElement. detachEvent(‘onclick’,startNow2);


attachEvent

attachEvent

detachEvent

detachEvent



W3C DOM事件注册模型：该方法使用 3 个参数，事件名称、函数名称和一个布尔值。如果事件注册是在事件捕获阶段使用，则布尔值设为 true ，如果事件注册是在事件冒泡阶段使用，则布尔值塞为 false 。注册：var myElement = document.getElementById(‘1stpara’);

myElement.addEventListener(‘click’,startNow,false);

myElement.addEventListener(‘click’,startNow2,false); // 添加另一个事件注册

在传统的事件注册中，事件注册被添加在事件的冒泡阶段注销：myElement.removeEventListener(‘click’,startNow,false);



事件对象事件对象用来访问事件，以便我们获得有关其属性信息。例如，

用户按了哪个键。事件对象在事件发生时创建。事件对象有两种模型：事件对象模型

IE 模型：事件对象是 window 对象的属性 (window.event) ， window.event 属性中包含了最后一个发生的事件。

var myEl=document.getElementById(‘1stpara’);myEl.onclick=startNow;function startNow(){

//window.event gives access to the event;}

W3C DOM 模型：事件作为参数传递给事件处理函数：var myEl=document.getElementById(‘1stpara’);myEl.onclick=startNow;function startNow(e){

// e gives access to the event;}



若使用两者都兼容的方法访问事件，可以这样处理：var myEl=document.getElementById(‘1stpara’);

myEl.onclick=startNow;

Function startNow(e){

if (!e)

{ var e = window.event; }

// do something

}


<!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=gb2312" />

<title>Event Registration</title>

<script type="text/javascript">

function addHandler () {

var addH = document.getElementById('p1');

if (addH.addEventListener) {

addH.addEventListener('click', addBord, false);

} // W3C DOM 注册事件处理程序 else if (addH.attachEvent) {

addH.attachEvent('onclick', addBord);

} // IE 注册事件处理程序}function detHandler () { var detH = document.getElementById('p1'); detH.style.border = '';

detH.style.backgroundColor = '#ffffff'; if (detH.removeEventListener) {detH.removeEventListener('click', addBord, false); } // W3C DOM 注销事件处理程序 else if (detH.detachEvent) {detH.detachEvent('onclick', addBord); } // IE 注销事件处理程序}function addBord () { var add = document.getElementById('p1'); add.style.border = '1px dotted #ff0000'; add.style.backgroundColor = '#ffff99';}</script> </head><body onload="addHandler()"><p id='p1'> 点击我，产生边框 </p><p> 一些其他信息 </p><form> <input type='button' value=' 取消边框 ' onclick='detHa

ndler()'></form></body></html>




1. 运行时，用鼠标点击图 1 中“点击我，产生边框”这几个字，则页面变成图 2 的样式；

2. 点击“取消边框”按钮后，再用鼠标点击“点击我，产生边框”这几个字，则页面中边框消失，如图 3

图 1 图 2 图 3



JavaScript 与 Ajax之间的相互联系JavaScript 是 Ajax技术中最重要的一部分之一。

Ajax利用 Javascript 的特性实现 Web应用程序对用户行为触发的实时响应和处理，包括鼠标事件、键盘事件、页面载入离开或者事件、焦点事件等等。

Javascript 将 HTML 与 DOM 、 XMLHttpRequ

est 等对象联系起来，作为他们之间沟通的渠道。



HTML控件具有响应用户行为的事件属性，其中常用的事件包括： onactivate ：当控件对象为活动元素时触发。 onblur ：当控件对象失去焦点时触发。 onchange ：当控件对象或者选中区的值发生改变时触发。 onclick ：当用户用鼠标左键单击控件对象时触发。 ondbclick ：当用户双击控件对象时触发。 ondeactivate ：活动元素从当前控件对象变为父文档或者其他控件对

象时触发。 ondrag ：当进行拖曳操作时在源控件对象上持续触发。 ondragend ：用户在拖曳操作结束后释放鼠标时在源控件对象上触发。 ondragenter ：用户拖曳对象到一个合法目标时在目标元素上触发。 ondragleave ：用户鼠标移出合法拖曳目标时在目标控件对象上触发。 ondragover ：拖曳鼠标划过目标时持续在目标元素上触发。 ondragstart ：开始拖曳选中对象时在源控件对象上触发。 onfocus ：当控件对象获得焦点时触发。


2.5 JavaScript 和事件 onkeydown ：当用户按下键盘按键时触发。 onkeypress ：当用户按下字面按键时触发。 onkeyup ：当用户释放键盘按键时触发。 onmousedown ：当用户用任何鼠标按钮单击对象时触发。 onmouseenter ：当用户将鼠标指针移动到控件对象内时触发。 onmouseleave ：当用户将鼠标指针移出控件对象边界时触发。 onmousemove ：当用户将鼠标划过控件对象时触发。 onmouseout ：当用户将鼠标指针移出控件对象边界时触发。 ommouseover ：当用户将鼠标指针移动到控件对象内时触发。 onmouseup ：当用户在鼠标位于控件对象之上时释放鼠标按钮时触发。 onresize ：当控件对象的大小要改变时触发。 onselect ：当当前选中区改变时触发。 onload ：当文档载入的时候触发。 onunload ：当文档卸载的时候触发。



Javascript 在响应上述事件的函数中，提取表单 Form 的内容，调用 XMLHttpRequest 对象，将表单内容发送给服务器处理。有时候，在发送表单内容之前，要对表单内容的格式进行必要的校验和预处理，这些工作也交由 Javascript处理。

服务器返回浏览器客户端的处理数据，通常由 XMLHttpRe

qeust 对象取得。 XMLHttpReqeust 对象再将这些数据以普通文本或者 XML 文档的形式交给 DOM 对象。 Javascript最终再操作DOM ，利用这些数据更新 Web 页面内容。

总之， Javascript 在 Ajax 中起到了“承前启后”的作用，通过其特有的属性、方法、集合操纵 HTML 文档内容，使用 DOM 、XMLHttpReqeust 对象相关属性和方法，与服务器实现异步交互通信。其在 Ajax 中的作用如下页图所示。


2.5 JavaScript 和事件 outerHTML 与 outerText之间的区别 :

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>ajax</title>

<script language="javascript">

function lzy(tid){

alert("1.outerText获得的内容 (无标记 ):"+document.getElementById(tid).outerText+"\n2.outerHTM

L获得的内容 (带标记 ):"+document.getElementById(tid).outerHTML);

}

</script>

</head>

<body>

<div id="test1"><span style="font-weight:900;">outerText 与 outerText之间的区别 </span></div>

outerHTML 是设置或返回 HTML标签本身和其中嵌套的内容 ( 含 html 代码 )<br />

outerText 是设置或返回 HTML标签本身和其中嵌套的文本内容 <br /><br />

示例 :<input type="button" value="测试结果 1" onclick="lzy('test1');" />

</body>

</html>


2.5 JavaScript 和事件 innerHTML 与 innerText之间的区别 :<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>ajax</title><script language="javascript">function lzy(tid){alert("3.innerText获得的内容 (无标记 ):“ +document.getElementById(tid).innerText+"\n4.innerHTML获得的内容 (带标记 ):“ +document.getElementById(tid).innerHTML);}</script></head><body><div id="test2"><span style="font-weight:900;">innerText 与 innerText之间的区别 </span></div>&ltdiv id="test2"&gt&ltspan style="font-weight:900;">innerText 与 innerText之间的区别 &lt/span&gt&lt/div&gt<BR />innerText 与 innerHTML之间的区别 :<br />innerHTML 是设置或返回 HTML标签对之间的内容 ( 含 html 代码 )<br />innerText 是设置或返回 HTML标签对之间的文本内容 <br /><br />列子 :<input type="button" value="测试结果 2" onclick="lzy('test2');" /></body></html>

ajax 编程技术 第二章 javascript 相关要点

Documents

ajax 编程技术第二章 javascript 相关要点