淘先锋技术网

首页 1 2 3 4 5 6 7

一. JavaScript脚本语言

JavaScript只能使用其自身有的内部对象和由其他编程语言创建的对象,它不能自定义对象,所以它叫基于对象的编程语言。JavaScript是一门弱变量语言,它没有严格意义上的变量名称,而且在使用变量前可以不进行声明。

范例: 演示通过JavaScript脚本语言添加一个动态数字时钟,在一个文本框中显示当前的时间信息。代码如下:
Clock.html

<html>
  <head>
    <title>动态时钟</title>
    <script>
	        function displayTime(){
	                 var today = new Date();//定义日期对象
	                 var hours = today.getHours();//从日期对象中获得小时信息
	                 var minutes = today.getMinutes();//从日期对象中获得分钟信息
	                 var seconds = today.getSeconds();//从日期对象中获得秒钟信息
	                 minutes = fixTime(minutes);//对小于10的数字则在该数字前加一个0
	                 seconds = fixTime(seconds);//对小于10的数字则在该数字前加一个0
	                 var the_time = hours + ":" + minutes + ":" + seconds;//将时间字符串组合在一起
	                 window.document.the_form.showTime.value = the_time;//将时间设置到文本框中
	                 the_timeout = setTimeout('displayTime();',500);//每半秒钟执行一次该函数
	        }
	        
               function fixTime(the_time){
	               if(the_time < 10){
	                   the_time = "0" + the_time;//在数字前面加0
	               }
	               return the_time;
	        }
	</script>
  </head>
  
  <body onload = "dispalyTime()">
         <form name = "the_form">
               <font face = "宋体">当前时间:<input type = "text" name = "showTime" size = "16"></font>
         </form>
  </body>
</html>
  window.document.the_form.showTime.value = the_time;//将时间设置到文本框中

表示通过JavaScript的window对象中的document对象找到用来显示时间的文本框,并设置其为组合的时间信息。

 the_timeout = setTimeout('displayTime();',500);//每半秒钟执行一次该函数

表示通过window对象中的setTimeout函数来设置displayTime函数每500ms执行一次。

 onload = "dispalyTime()"

表示文档加载完成后即自动运行displayTime()函数,从而显示时钟。

二.XMLHttpRequest对象

XMLHttpRequest最大的用处是更新网页的部分内容而不需要刷新整个页面。下面将分别介绍如何创建XMLHttpRequest对象及其属性

2.1创建XMLHttpRequest对象

在IE浏览器的语法如下:

在非IE浏览器的语法如下:

2.2 readyState属性

当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态。其中readyState属性是用来返回XMLHttpRequest对象的当前状态,readyState属性列表值如下表所示:

readyState属性值说明
0未初始化状态。当前已经创建了一个XMLHttpRequest对象,但是没有初始化
1发送状态。代码已经调用XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送给服务器
2发送状态。已通过send()方法把一个请求发送到服务器,但是还没有收到一个响应
3正在接收状态 。已接收到HTTP响应头部信息,但是消息体部分还没有完全接受结束
4已加载状态。响应已经被完全接收

2.3 onreadystatechange事件

onreadystatechange事件是ReadyState属性值发生变化时所要执行的操作 。在使用过程中,通常将处理函数名称赋予onreadystatechange来为XMLHttpRequest对象指定事件处理,在事件处理函数中根据readyState的状态值进行相应的处理

范例: 演示为onreadystatechange事件添加事件处理代码
Testonreadystatechange.html

xmlHttp.onreadystatechange = mystatechange; //设置onreadystatechange事件处理函数
function mystatechange() {
     if(xmlHttp.readState == 4){
        alert("success!");
     }
 }

2.4 responseText属性

responseText包含了客户端收到的响应文本内容。当readyState属性值为0、1,responseText属性值为一个空字符串。当readyState属性值为3时,responseText属性值中包含还未响应完成的信息。当readyState属性值为4时,responseText属性值中包含了完整的响应信息。

2.5 responseXML属性

responseXML用于当完全接收HTTP响应时描述XML响应。此时,Content-Type头部指定MIME类型必须为text/xml、application/xml或以xml结尾。如果不指定这些媒体类型,则responseXML的值为null。只要readyState的值不为4,responseXML的值为null。responseXML属性值是一个文档接口类型的对象,用来描述被分析的文档。如果文档不能被分析,那么responseXML的值为null。

2.6 status属性

status属性用来描述HTTP状态代码,只有当readyState的值为3或4时,status属性才可用。否则,试图存取status属性将引发一个异常。

2.7 statusText属性

status属性用来描述HTTP状态代码文本,只有当readyState属性的值为3或4时,statusText属性才可用。否则,试图存取statusText将引发一个异常。