XMLHttpRequest Ajax 实例简介

作者: 时间: 2012-04-20 分类: 技术文章 | 1条评论 |

您的支持,是我前进的动力

XMLHttpRequest Ajax 实例简介,此文已修正原文的部分错误,可正常运行。

原文出处:chy710’s Tech Space 的博客园

一、XMLHttpRequest 对象的方法与属性:

方    法

描    述

abort() 停止当前请求
getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader(“header”) 返回指定首部的串值
open(“method”, “url”) 建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数
send(content) 向服务器发送请求
setRequestHeader(“header”, “value”) 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

  属  性

描    述

onreadystatechange 每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数
readyState 请求的状态。有5个可取值:0 = 未初始化,1 = 正在加载,2 = 已加载,3 = 交互中,4 = 完成
responseText 服务器的响应,表示为一个串
responseXML 服务器的响应,表示为XML。这个对象可以解析为一个DOM对象
status 服务器的HTTP状态码(200对应OK,404对应Not Found(未找到),等等)
statusText HTTP状态码的相应文本(OK或Not Found(未找到)等等)

二、使用XMLHttpRequest 实现ajax效果

这里我们用客户端通过XMLHttpRequest 请求服务端获取当前系统时间,实现异步交互!
客户端myAjax.html代码

 ASP.NET Code By wuleba.com
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html xmlns=“http://www.w3.org/1999/xhtml” >   

<head>   

    
<title>xmlhttprequest ajax demo</title>   

    
<script type =“text/javascript” language =“javascript” >   

        var req; 
//定义变量,用来创建xmlhttprequest对象   

        function creatReq() 
// 创建xmlhttprequest,ajax开始   

        {   

            var url=
“ajaxServer.aspx”//要请求的服务端地址   

            if(window.XMLHttpRequest) 
//非IE浏览器及IE7(7.0及以上版本),用xmlhttprequest对象创建   

            {   

                req=new XMLHttpRequest();   

            }   

            else if(window.ActiveXObject) 
//IE(6.0及以下版本)浏览器用activexobject对象创建,如果用户浏览器禁用了ActiveX,可能会失败.   

            {   

                req=new ActiveXObject(
“Microsoft.XMLHttp”);   

            }   

               

            if(req) 
//成功创建xmlhttprequest   

            {   

                req.open(
“GET”,url,true); //与服务端建立连接(请求方式post或get,地址,true表示异步)   

                req.onreadystatechange = callback; 
//指定回调函数   

                req.send(null); 
//发送请求   

            }   

        }   

           

        function callback() 
//回调函数,对服务端的响应处理,监视response状态   

        {   

            if(req.readyState ==4) 
//请求状态为4表示成功   

            {   

                if(req.status==200) 
//http状态200表示OK   

                {   

                    Dispaly(); 
//所有状态成功,执行此函数,显示数据   

                }   

                else 
//http返回状态失败   

                {   

                    alert(
“服务端返回状态” + req.statusText);   

                }   

            }   

            else 
//请求状态还没有成功,页面等待   

            {   

                document .getElementById (
“myTime”).innerHTML =“数据加载中”;   

            }   

        }   

           

        function Dispaly() 
//接受服务端返回的数据,对其进行显示   

        {   

            document .getElementById (
“myTime”).innerHTML =req.responseText;   

        }   

           

    
</script>   

</head>   

<body>   

    
<div id=“myTime”></div>   

           

    
<input id=“Button1” type=“button” value=“Get Time” onclick =“creatReq(‘ajaxServer.aspx’);”/>    

</body>   

</html>  

服务端ajaxServer.aspx代码 (不需要HTML代码,只需服务端处理返回数据,也可用ashx文件来处理)

 C# Code By wuleba.com
1
2
3
4
5
6
7
8
public partial class ajaxServer : System.Web.UI.Page

{

    
protected void Page_Load (object sender, EventArgs e)

    {

        System.Threading.Thread.Sleep (
1000); //为了看到ajax效果,将当前线程延时1000毫秒

        Response.Write (DateTime .Now .ToString () ); //输出当前时间

    }

}

运行效果:

XMLHttpRequest Ajax 实例简介

XMLHttpRequest Ajax 实例简介

下载方法:打开链接–输入验证码–打开下载列表–左上角有一个免费用户下载–普通不限速下载。

示例代码(Visual Studio 2010 项目代码)下载:

下载地址:城通网盘 | 115网盘 |
搜妹子,搜出妹子做壁纸!

本文采用 CC协议 发布,转载请注明:转载自 吾乐吧软件站

本文链接地址:http://www.wuleba.com/?p=1736

一条评论 给“XMLHttpRequest Ajax 实例简介”

  1. 写的精炼,顶一个

发表评论


微软MSDN资源免费订阅,MSDN 我告诉你