从零开始学_JavaScript_系列（八）——js系列<2>（事件触发顺序、文本读取、js编写ajax、输入验证、下来菜单）
（20）事件触发的顺序
假如文档中有多个脚本（例如自动执行的脚本），那么他们执行是有一定的顺序的（在ＨＴＭＬ文档之中）：
①先执行<head>内的<script>标签。因此，这里的js脚本通常是嵌入代码、指向JS文件，可以在这里定义其后要使用的函数；
②其次是执行<body>内的script标签；
③然后是执行触发的脚本内容，例如在button按钮上添加的onclick=””命令，就是在点击后触发的。
（21）文档对象模型（DOM）
文档对象模型（Document Ojbect Model），效果是允许脚本控制Web页面、窗口、文档。对于JS来说，他是制作动态页面的强有力工具。
DOM不是JavaScript语言的一个部分，而是内置于浏览器的一个API（接口），
为了操纵浏览器和文档，JavaScript使用分层的父对象和子对象（树形结构），这就称为DOM，表示一个Web文档的所有内容和组件。
DOM对象，有属性和方法。
①最顶层的是window对象，表示一整个浏览器接口，框架可以由window对象来表示。如alert就是window对象的方法
②document对象代表的是一个web文档或一个页面，web文档在浏览器窗口中显示，所以很明显document对象是window对象的子对象；
因此window.document和document都是指当前窗口；
如果使用多个窗口（或框架），就要使用多个window对象，每个window对象都有自己的document对象，因此使用其中某一个，要指出窗口名和对象名；
（22）获得文档的信息
①document.URL指明了文档的URL地址，这是一个简单的文本字段，不能改变它的属性（不懂，是指这个是一个string对象么？）；
如果要给用户一个不同的地址，要使用window.location对象；
②document.title列出了当前页面的标题，由HTML中的title标签定义。
如：
ti=document.title;
alert(ti);
效果是输出标题，注意，没有括号；
③document.referrer是用户所浏览的上一个页面的URL地址；
④document.lastModified是文档最后修改日期，这个日期从服务器传到页面（注：在360浏览器里，这个时间是变化的，在Firefox里，这个时间是固定的）但可能服务器上运行正常，需要验证；
⑤document.bgColor和document.fgColor是文档的背景和前景（文字）颜色，对应body下的BGCOLOR属性和TEXT属性；
例如：
<bodybgcolor="green">
abc
<script>
ti=document.bgColor;
alert(ti);
</script>
</body>
输出是green，背景色变绿
⑥document.linkColor、document.alinkColor和document.vlinkColor是文档中链接的颜色。分别对应body标签中的LINK、ALINK和VLINK属性（但不知道这3个是什么意思）。
⑦document.cookie允许读取和设置一个文档的cookie。更多略。
（23）history对象
一个可访问的属性：
history.length，用户访问过的不同地址的数目。
如代码，表示当前访问过的地址的数目
<script>
alert(history.length);
</script>
初始是1，假如访问了一个其他网页，这里则弹出是2，如果访问更多，则相应增加。
方法一：
history.go(参数)
打开历史列表的一个网址，参数为正数或者负数。
history(-1)相当于后退一步。
方法二：
history.back()载入历史列表中的前一个网址，相当于按一下后退。
方法三：
history.forward()载入历史列表中的后一个网址，相当于按一下前进按钮。
（24）AJAX
传统情况下，JavaScript与服务器之间的通信方法只有一种——表单。
1、前端/网页：创建一个XMLHttpRequest对象，然后将其发送给Web服务器，并且无需一直等待请求，而是可以继续发送请求。
2、服务器：通过发送包含内容的文件（或服务器端应用程序的输出）作为相应。
3、前端：当接到服务器端的响应后，相应的JavaScript函数将被触发，以处理相关数据。
4、DOM：由于这项技术的目的在于实现更好的交互（否则接受到服务器信息就得刷新页面），因此脚本使用DOM来显示来自服务器的数据，从而无需再次刷新页面。
其他：可以同时处理多个请求（发送多个请求，服务器的速度不影响前端的）。
AJAX的应用：
主要用于创建Web程序——面向用户且基于Web的服务。
使用XMLHttpRequest：（表示纯看概念很茫然啊）
1、创建请求
创建一个XMLHttpRequest对象：
var ajaxreq = new XMLHttpRequest();
注：IE5/6除外（早版本的需要启用ActiveX控件），语法不同；
2、打开URL
ajaxreq.open("get", "filename");
可以使用GET或者POST命令（这里是get）；
由于GET需要使用将参数作为地址发送给服务器，因此如例子：
ajaxreq.open("get", "search.php?query=abc");
访问search.php网页，将abc作为查询参数发送给服务器。
问题：为什么是query？
3、发送请求
ajaxreq.send(null);
注：get方法用null，post方法用发送的数据。
4、等待响应：
XMLHttpRequest提供了专门的事件处理程序，用于处理服务器的返回信息。
ajaxreq.onreadystatechange = MyFunc;
请求（request）对象拥有一个名为readyState的属性，代表一个请求的当前状态。
当readyState属性发生变化时，该事件被触发。
ReadyState属性值的变化范围如下：
0 新的请求；
4 已结束的请求
所以事件处理程序会检测该属性，查看其值是否已变化为4。
由于可能发生错误，因此当请求成功时，status将被设置为200。但若发生错误，其值将被设置为对应的错误代码。
与错误相关的解释信息（成功时为OK），将被保存在statusText属性中。
5、解释响应数据
当readyState属性的值为4，而且请求已被响应时，可以通过另外两个属性进一步访问那些来自服务器的返回数据。
responseTeXt 用于访问以原始文本存在的响应信息；
responseXML 用于访问以XML对象形式存在的响应信息。
当数据格式不是XML时，只有文本属性可被访问。
这里的XML指的是.xml文件么？
如代码：
//AJAX库
var ajaxreq = false, ajaxCallback;
function ajaxRequest(filename)
{
try
{
//Firefox / IE7 /Others
ajaxreq = newXMLHttpRequest();
}
catch(error)
{
try
{
ajaxreq = newActiveXObject("Microsoft.XMLHTTP");
}
catch(error)
{
return false;
}
}
ajaxreq.open("GET",filename);
ajaxreq.onreadystatechange= ajaxResponse;
ajaxreq.send(null); //发送请求
}
//事件处理程序
function ajaxResponse()
{
if(ajaxreq.readyState != 4)return ;
if(ajaxreq.status = 200)
{
//事件正常，请求成功
if(ajaxCallback)ajaxCallback();
}
else
{
alert("Requestfailed" + ajaxreq.statusText);
}
return true; //为什么return true？只要readyState等于4就一定成功？
}
ajaxRequest()函数：
实现了处理、创建、发送XMLHttpRequest对象所需的全部操作。
该函数首先会创建XMLHttpRequest对象。此时，对于不同的浏览器需要使用不同的命令。如果使用了错误的命令就一定会出现错误。
所以需要使用try和catch语句。
先试着使用标准方式，出错了使用另一种方式（这里是针对IE5和IE6的），如果还不行，那么返回一个false值给ajaxreq，然后通过条件判断，告诉用户浏览器不支持AJAX功能。
ajaxResponse()函数：
ajaxResponse()函数是onreadystatechange事件的处理程序。
该函数首先检查readyState属性，查看其值是否为4。如果不是，什么都不做（return）
如果是4，那么检查属性值是否为200（是200说明成功），是的话，执行保存于变量ajaxCallback中的处理函数。
如果不是200，说明出错了，alert弹框提示出错信息。
使用AJAX库：
①将库文件保存为ajax.js，并使其与HTML和脚本位于同一目录中。
②利用<scriptsrc="ajax.js">导入HTML中。
③为请求结束事件创建一个处理函数，并将变量ajaxCallback的值设定为该函数。
④调用ajaxRequest()函数，其参数为服务器端应用程序（或文件）的文件名。（本库只支持GET，因此不考虑POST，也无需指定使用方式）。
⑤如果请求操作正常结束，那么将调用刚才在ajaxCallback中指定的函数。同时全局变量ajaxreq将会把服务器的响应数据分别保存在responseXML和responseText属性中。
使用AJAX库编写AJAX测验程序：
在创建了一个可重用的AJAX库后，就可以用他来创建JS程序。
JS代码例子如下；
var qn = 0; //qn是问题编号
function getQuestions()
{
qn = 0; //点击开始按钮后，重置问题
obj =document.getElementById("question"); //obj是question的（HTML）
//之所以设置下面这行，是因为在异步加载成功前显示这里
obj.firstChild.nodeValue="(pleasewait)"; //obj的所有子节点中的第一个子节点的值是please wait。作用是将其写到<spanid="question">...</span>中
ajaxCallback =nextQuestion; //将函数赋给回调函数（ajaxCallback），在ajax里调用
ajaxRequest("questions.xml"); //调用ajax库加载questions.xml文件
}
//作用是读取、并输出问题
function nextQuestion()
{
questions =ajaxreq.responseXML.getElementsByTagName("q"); //questions被赋值为AJAX返回的XML文件中标签为q的（在XML中）
obj =document.getElementById("question"); //obj为标签是question（在AJAX.html中）
if( qn <questions.length) //如果qn小于questions的长度（即未到结尾）
{
q =questions[qn].firstChild.nodeValue; //q是读取的值
obj.firstChild.nodeValue= q; //将其输入到HTML中显示
}
else
{
obj.firstChild.nodeValue= "(no more questions)"; //如果没有更多问题了，那么提示用户
}
}
function checkAnswer()
{
answers =ajaxreq.responseXML.getElementsByTagName("a"); //answers是一个数组（因为有多个<a>标签）
a =answers[qn].firstChild.nodeValue; //firstChild.nodeValue指所有子节点（childNodes）中的第一个子节点的文本值
answerfield =document.getElementById("answer"); //HTML输入位置的内容（id是answer）的值
if(a == answerfield.value) //如果读取的值（XML中的），和输入的值（HTML用户输入的）一样
{
alert("Correct!"); //弹框提示正确
}
else
{
alert("Incorrect.The correct answer is: " + a); //弹框提示错误，并告知正确的答案
}
qn += 1; //问题编号+1
answerfield.value=""; //重置答案
nextQuestion(); //调用函数
}
obj = document.getElementById("startq"); //ojb是startq按钮
obj.onclick = getQuestions; //点击后调用函数，不用()表示不执行，只有当点击后才执行
ans = document.getElementById("submit"); //ans是提交按钮
ans.onclick = checkAnswer; //点击后调用函数
另有一XML文件：
<?xml version="1.0" ?>
<questions>
<q>a</q>
<a>1</a>
<q>b</q>
<a>2</a>
<q>c</q>
<a>3</a>
<q>d</q>
<a>4</a>
<q>e</q>
<a>5</a>
</questions>
最后是html文件：
<html>
<head>
<title>AJAX测试</title>
<scriptsrc="ajax.js"></script>
</head>
<body>
<h1>AJAX的测试例子</h1>
<form>
<p>
<b>问题：</b>
<spanid="question">...</span>
</p>
<p>
<b>答案：</b>
<inputtype="text" name="answer" id="answer">
<inputtype="button" value="Submit" id="submit">
</p>
<inputtype="button" value="Start the Quiz"id="startq">
</form>
<scriptsrc="quiz.js"></script>
</body>
</html>
效果是：
①点击Start the Quiz按钮后，读取XML文件，将读取到的问题输出在html上。
②答案框可以用于输入答案，按submit按钮提交答案。
③提交后进行验证，如果和预留答案相符，提示，不符，提示正确答案。
④然后变更到下一个问题。
（25）name
name的作用和id类似。
但还有一些其他用处：
l 用途1:作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。
l 用途2: HTML元素Input type='radio'分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。
l 用途3:建立页面中的锚点，我们知道<a href="URL">link</a>是获得一个页面超级链接，如果不用href属性，而改用Name，如：<aname="PageBottom"></a>，我们就获得了一个页面锚点。
l 用途4:作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。
l 用途5:在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。
l 用途6:某些特定元素的属性，如attribute，meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE ="value">或Meta中<META NAME = "Author" CONTENT ="Dave Raggett">。
（26）验证输入内容是不是空，是不是数字
field为检查所内容（input）的id
function checkIsNumber(field) //检查输入的文字是不是数字，这的field是id的值
{
with(field)
{
if(value==null||value=="")
{
document.getElementById(field).innerText="<b>请输入内容</b>";
}
else {
if(value>0)
{
returnfalse;
}
else {
document.getElementById(field).innerText="<b>请输入数字</b>";
}
}
}
return true;
}
（27）下拉列表
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
如果带默认选择（即默认不是第一个），加上下面红色部分（即默认选择这个）
<select name="cars">
<optionvalue="1">1</option>
<optionvalue="2">2</option>
<optionvalue="3" selected="selected">3</option>
<optionvalue="4">4</option>
</select>
（28）div、span、ul的区别
①div是一个块，占用的位置是一行，不同div之间自带换行。
例如：fff<div>www</div><div>ppp</div>
其显示是：
fff
www
ppp
②span是行内小块，是不带换行的。
例如：fff<span>www</span><span>ppp</span>
其显示是：fffwwwppp
③ul目前已知是自带缩进的。