首页 > 其他 > 详细

简单的Ajax

时间:2014-04-18 12:26:48      阅读:424      评论:0      收藏:0      [点我收藏+]

ajax获取时间的html代码

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
58
59
60
61
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("btnGetTime").onclick = function () {
                //向服务器请求  时间
                //1.创建异步对象(小浏览器)
                var xhr = new XMLHttpRequest();
                //2.设置参数
                xhr.open("get", "GetTime.ashx?name=lxz", true);
                //3.让get请求不从浏览器获取缓存数据
                xhr.setRequestHeader("If-Modified", "0");
                //3.设置回调函数
                xhr.onreadystatechange = function () {
                    //3.1当完全接收完响应报文后,并且 响应状态码为200的时候
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        //3.2获取响应报文体内容
                        var res = xhr.responseText;
                        alert(res);
                    }
                };
                //4.发送异步请求
                xhr.send(null);
            };
            document.getElementById("btnPostTime").onclick = function () {
                //向服务器请求  时间
                //1.创建异步对象(小浏览器)
                var xhr = new XMLHttpRequest();
                //2.设置参数
                xhr.open("post", "GetTime.ashx", true);
 
                //post请求不会使用浏览器端请求。。。所以不需要下面这段代码
                ////3.让get请求不从浏览器获取缓存数据
                //xhr.setRequestHeader("If-Modified", "0");
 
 
                //设置请求报文体的  编码格式(设置  表单默认编码格式)
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                //3.设置回调函数
                xhr.onreadystatechange = function () {
                    //3.1当完全接收完响应报文后,并且 响应状态码为200的时候
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        //3.2获取响应报文体内容
                        var res = xhr.responseText;
                        alert(res);
                    }
                };
                //4.发送异步请求
                //xhr.send();//第一种方式{name:"lxz"})
                xhr.send("name=lxz");
            };
        };
    </script>
</head>
<body>
    <form enctype="application/x-www-form-urlencoded"></form>
    <input type="button" id="btnGetTime" value="get获取服务器时间" />
    <input type="button" id="btnPostTime" value="post获取服务器时间" />
    <img src="img/1.gif" />""
</body>

 

 GetTime.ashx页面代码

1
2
3
4
5
6
7
8
9
context.Response.ContentType = "text/plain";
           //接收浏览器  Ajax  方式发送过来的  get参数
           //string strName = context.Request.QueryString["name"];
           //无论get还是post都能接收
           string strName = context.Request.Params["name"];
           //休息1s钟
           System.Threading.Thread.Sleep(1000);
           //输出响应报文
           context.Response.Write(DateTime.Now.ToString()+",name="+strName);

 

 这时我们在浏览器中查看时就会发现图片保持动不变,会弹出时间提示框

简单的Ajax,布布扣,bubuko.com

简单的Ajax

原文:http://www.cnblogs.com/mekor/p/3672139.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!