从零开始学_JavaScript_系列（八）——js系列<2>（事件触发顺序、文本读取、js编写ajax、输入验证、下拉菜单）...
（20）事件触发的顺序
假如文档中有多个脚本（例如自动执行的脚本），那么他们执行是有一定的顺序的（在ＨＴＭＬ文档之中）：
①先执行
内的输出是green，背景色变绿
⑥document.linkColor、document.alinkColor和document.vlinkColor是文档中链接的颜色。分别对应body标签中的LINK、ALINK和VLINK属性（但不知道这3个是什么意思）。
⑦document.cookie允许读取和设置一个文档的cookie。更多略。
（23）history对象
一个可访问的属性：
history.length，用户访问过的不同地址的数目。
如代码，表示当前访问过的地址的数目
初始是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和脚本位于同一目录中。
②利用
③为请求结束事件创建一个处理函数，并将变量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。作用是将其写到
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 { 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 =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文件： 最后是html文件： a
b
c
d
e
AJAX的测试例子
效果是：
①点击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:建立页面中的锚点，我们知道link是获得一个页面超级链接，如果不用href属性，而改用Name，如：
l 用途4:作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。
l 用途5:在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。
l 用途6:某些特定元素的属性，如attribute，meta和param。例如为Object定义参数或Meta中。
（26）验证输入内容是不是空，是不是数字
field为检查所内容（input）的id
function checkIsNumber(field) //检查输入的文字是不是数字，这的field是id的值
{
with(field)
{
if(value==null||value=="")
{
document.getElementById(field).innerText="请输入内容";
}
else {
if(value>0)
{
returnfalse;
}
else {
document.getElementById(field).innerText="请输入数字";
}
}
}
return true;
}
（27）下拉列表
如果带默认选择（即默认不是第一个），加上下面红色部分（即默认选择这个）
（28）div、span、ul的区别
①div是一个块，占用的位置是一行，不同div之间自带换行。
例如：fff
其显示是：
fff
www
ppp
②span是行内小块，是不带换行的。
例如：fffwwwppp
其显示是：fffwwwppp
③ul目前已知是自带缩进的。