从零开始学_JavaScript_系列(八)——js系列<2>(事件触发顺序、文本读取、js编写ajax、输入验证、下拉菜单)

  1. 云栖社区>
  2. 博客>
  3. 正文

从零开始学_JavaScript_系列(八)——js系列<2>(事件触发顺序、文本读取、js编写ajax、输入验证、下拉菜单)

零零水 2016-04-10 23:59:00 浏览1602
展开阅读全文

(20)事件触发的顺序

假如文档中有多个脚本(例如自动执行的脚本),那么他们执行是有一定的顺序的(在HTML文档之中):

①先执行<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函数将被触发,以处理相关数据。

 

4DOM由于这项技术的目的在于实现更好的交互(否则接受到服务器信息就得刷新页面),因此脚本使用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类似。

但还有一些其他用处:

 

用途1:作为可与服务器交互数据的HTML元素的服务器端的标示,比如inputselecttextarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。

用途2: HTML元素Input type='radio'分组,我们知道radio button控件在同一个分组类,check操作是mutex的,同一时间只能选中一个radio,这个分组就是根据相同的Name属性来实现的。

用途3:建立页面中的锚点,我们知道<a href="URL">link</a>是获得一个页面超级链接,如果不用href属性,而改用Name,如:<aname="PageBottom"></a>,我们就获得了一个页面锚点。

用途4:作为对象的Identity,如AppletObjectEmbed等元素。比如在Applet对象实例中,我们将使用其Name来引用该对象。

用途5:IMG元素和MAP元素之间关联的时候,如果要定义IMG的热点区域,需要使用其属性usemap,使usemap="#name"(被关联的MAP元素的Name)

用途6:某些特定元素的属性,如attributemetaparam。例如为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目前已知是自带缩进的。



网友评论

登录后评论
0/500
评论
零零水
+ 关注