XMLHttpRequest Ajax 实例简介

吾乐吧软件站 • • 教程资源 • 320 阅读

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 实例简介插图1

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

示例代码（Visual Studio 2010 项目代码）下载：

下载地址：城通网盘 | 115网盘 |

下载说明：① 请不要相信网站的任何广告；② 当你使用手机访问网盘时，网盘会诱导你下载他们的APP，大家不要去下载，直接把浏览器改成“电脑模式/PC模式”访问，然后免费普通下载即可；③ 123云盘限制，必须登录后才能下载，且限制每人每天下载流量1GB，下载 123云盘免流量破解工具

版权声明：
小编：吾乐吧软件站
链接：https://www.wuleba.com/4098.html
来源：吾乐吧软件站
本站资源仅供个人学习交流，请于下载后 24 小时内删除，不允许用于商业用途，否则法律问题自行承担。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>