[AJAX系列]onreadystatechange事件

onreadystatechange事件:

当请求被发送到服务器时,我们需要执行一些基于响应的任务

每当readyState改变时,就会触发onreadystatechange事件

readyState属性存有XMLHttpRequest的状态信息

XMLHttpRequest对象的三个重要的属性:

属性 描述
onreadystatechange 存储函数(函数名)每次readystate改变时就会调用该函数
readyState
存有XMLHttpRequest的状态从0到4发生变化

0:请求未初始化

1:服务器连接已建立

2:请求已接收

3:请求处理中

4:请求已完成,且响应已就绪

status
200:"ok"

404:请求未找到

在onreadystatechange事件中,我们规定当服务器响应已做好被处理的准备时执行的任务

当readyState等于4且状态为200时,表示响应已就绪

1 xmlhttp.onreadystatechange=function()
2   {
3   if (xmlhttp.readyState==4 && xmlhttp.status==200)
4     {
5     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
6     }
7   }

onreadystatechange事件被触发5次,对应着readyState的每个变化

使用回调函数:

回调函数是一种以参数的形式传递给另一个函数的函数

如果页面存在多个AJAX任务,就应该为创建XMLHttpRequest对象编写一个标准的函数,并为每个AJAX任务调用该函数

该函数应该包含URL以及发生onreadystatechange事件执行时的任务

 1 <script>
 2 var xmlhttp;
 3 function loadXMLDoc(url,cfunc)
 4 {
 5 if (window.XMLHttpRequest)
 6   {// IE7+, Firefox, Chrome, Opera, Safari 代码
 7   xmlhttp=new XMLHttpRequest();
 8   }
 9 else
10   {// IE6, IE5 代码
11   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
12   }
13 xmlhttp.onreadystatechange=cfunc;
14 xmlhttp.open("GET",url,true);
15 xmlhttp.send();
16 }
17 function myFunction()
18 {
19 loadXMLDoc("/try/ajax/ajax_info.txt",function()
20   {
21   if (xmlhttp.readyState==4 && xmlhttp.status==200)
22     {
23     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
24     }
25   });
26 }
27 </script>
时间: 2024-10-04 23:55:29

[AJAX系列]onreadystatechange事件的相关文章

AJAX - onreadystatechange 事件(XMLHttpRequest对象的属性)

XMLHttpRequest 对象的三个重要的属性: 属性 描述 onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数. readyState 存有 XMLHttpRequest 的状态.从 0 到 4 发生变化. 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪 status 200: "OK" 404: 未找到页面 示例: 1 xmlhttp.onreadys

AJAX基础教程:onreadystatechange事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务. 每当 readyState 改变时,就会触发 onreadystatechange 事件. readyState 属性存有 XMLHttpRequest 的状态信息. 下面是 XMLHttpRequest 对象的三个重要的属性: onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数. readyState 存有 XMLHttpRequest 的状态.从 0 到 4 发生变化. 0

Ajax系列之二:核心对象XMLHttpRquest

上一篇文章介绍了ajax的基础知识,这篇文章通过一个简单的用户验证的小例子来给大家讲解一下! 首先来了解一个这个对象: XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页.当页面全部加载完毕后,客户端通过该对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据. XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力.XMLHttpRequest 可以同步或异步返回

ajax系列之用jQuery的ajax方法向服务器发出get和post请求

打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个form表单里用来实现form提交,第二个输入框是单独的.没有包含在form里,下面就用这两个输入框来学习下jQuery的ajax. 1,前端的html和javascript代码 页面html 1 <main style="text-align: center; margin: 200px a

Ajax系列之三:UpdatePanel

UpdatePanel控件也是Ajax里用得最多的控件之一,UpdatePanel控件是用来局部更新网页上的内容,网页上要局部更新的内容必须放在UpdatePanel控件里,他必须和上一次说的ScriptManager控件一起使用.现在来看UpdatePanel的属性 UpdatePanel重要的属性如下: 属性 说明 ChildrenAsTriggers 当UpdateMode属性为Conditional时,UpdatePanel中的子控件的异步回送是否会引发UpdatePanle的更新. R

[AJAX系列]XMLHttpRequest请求

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>修改内容</title> 6 <!-- 7 所有现代浏览器均支持XMLHttpRequest对象(IE6 IE5使用ActiveXObject) 8 XMLHttpRequest用于在后台与服务器交换数据,这意味着可以在不重新加载整

ASP.NET之Ajax系列(一)

我们在Web开发中经常会接触到Ajax技术,同时Ajax技术也有很多种实现方式,那么,我们今天从第一种方式说起:ASP.NET原生控件实现Ajax. ASP.NET原生控件用于Ajax技术的主要是UpdatePanel和ScriptManager,前者顾名思义,是一个可以用于盛放内容的容器,用于实现页面的局部更新,在使用的时候直接将需要更新的内容放入即可.后者用于调用一些服务和脚本:例如我们本次Demo中使用JavaScript调用WebService服务. 本次Demo主要包含一个页面,一个W

ASP.NET之Ajax系列(三)

我们通过前两篇文章的学习,已经大致掌握了Ajax的实现方法,同时也可以对比出两种方式的优劣.但是我们还是没有搞清楚真正的ajax的实现原理,以及最原始的,未经过封装的ajax是什么样的,今天我们一起来探索这些之前不了解的地方. 首先在上一篇也提到过,Ajax是异步的Javascript和XML,那么聪明的你应该已经猜到,js脚本是必不可少的.我们在这里先引入一个浏览器对象:XMLHttpRequest,可能大家对这个对象比较陌生,那么我们就先从它的属性开始了解.它主要有三个属性:onreadys

使用ajax后提交事件后禁用按钮,事件执行完毕后,重新启用按钮

一直想做这样的效果,实现的方法虽然不是很好,但效果还是出来了 <script runat="server"> /// <summary> /// 当Button2被点击,实际是Button3触发事件,这样就可以达到提交事件时禁用被提交的按钮效果 /// </summary> protected void Button_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(5