AJAX核心技术

最新推荐文章于 2022-10-10 14:18:22 发布

Android_la

最新推荐文章于 2022-10-10 14:18:22 发布

阅读量281

点赞数

分类专栏：每日一写文章标签： JavaWeb

本文链接：https://blog.csdn.net/qq_40634846/article/details/87732172

版权

每日一写专栏收录该内容

178 篇文章 6 订阅

订阅专栏

一. 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浏览器的语法如下：

 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

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

var xmlhttp = new XMLHttpRequest();

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将引发一个异常。

Android_la

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX核心技术

一. JavaScript脚本语言JavaScript只能使用其自身有的内部对象和由其他编程语言创建的对象，它不能自定义对象，所以它叫基于对象的编程语言。JavaScript是一门弱变量语言，它没有严格意义上的变量名称，而且在使用变量前可以不进行声明。范例：演示通过JavaScript脚本语言添加一个动态数字时钟，在一个文本框中显示当前的时间信息。代码如下：Clock.html&amp;lt;h...
复制链接

扫一扫

专栏目录