ajax获取时间的html代码

<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页面代码

 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的更多相关文章

  1. jQuery简单的Ajax调用示例

    jQuery确实方便,下面做个简单的Ajax调用: 建立一个简单的html文件: <!DOCTYPE HTML> <html> <head> <script ...

  2. jsonp其实很简单【ajax跨域请求】

    js便签笔记(13)——jsonp其实很简单[ajax跨域请求] 前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资 ...

  3. 利用jQuery与.ashx完成简单的Ajax

    在ASP.NET同样可以与其它编程语言一样,利用前台的Ajax技术,只是需要注意的是,后台的处理程序不再是一个aspx页面中的Page_Load,而且ASP.NET独有的“一般处理程序”.ashx,下 ...

  4. 简单的Ajax实例

    由于刚刚接触Ajax,所以在网上搜了一下如何实现简单的Ajax,在此写下来,也方便自己以后学习 什么是Ajax? 通过在后台与服务器进行少量的数据交换,Ajax可以使网页实现异步更新,这意味着可以在不 ...

  5. thinkphp5最最最最简单的ajax实例

    thinkphp5最最最最简单的ajax实例 一.总结 一句话总结:页面端使用$.get()方法传递ajax请求,服务器端判断是不是ajax请求,是的话接受参数,进行逻辑处理之后向客户端返回值. 1. ...

  6. jQuery-实现简单的Ajax请求封装

    封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...

  7. 模拟jQuery简单封装ajax

    /*模拟jQuery的写法 (简单写法)*/ var $={}; /*ajax*/ $.ajax = function (options) { /* * 请求 * 1.请求接口 type get po ...

  8. 用javascript简单封装AJAX

    1.创建一个AJAX引擎对象 var CreateAjax = function () { var xhr = null; if (window.XMLHttpRequest) { //非IE游览器 ...

  9. ASP.NET中一种超简单的Ajax解决方案

    为什么是Ajax2? 因为之前有一个blqw.Ajax,并且已经在项目中投入使用了,但是没有这个方便,这个是后来才弄的,为了纪念第一版的blqw.Ajax,所以这个就2了... 话说看了评论才发现,原 ...

  10. js便签笔记（13）——jsonp其实很简单【ajax跨域请求】

    前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...

随机推荐

  1. 【LeetCode练习题】Validate Binary Search Tree

    Validate Binary Search Tree Given a binary tree, determine if it is a valid binary search tree (BST) ...

  2. [转]中英文停止词表（stopword）

    停止词,是由英文单词:stopword翻译过来的,原来在英语里面会遇到很多a,the,or等使用频率很多的字或词,常为冠词.介词.副词或连词等.如果搜索引擎要将这些词都索引的话,那么几乎每个网站都会被 ...

  3. Xcoder 7.0 免证书真机测试

    相信大家已经看了WWDC大会上的内容了,在iOS9和Xcoder7.0以后真机测试不需要在购买付费账号了,(当然你要想上传appstore还是需要付费账号的). 今天我带大家来看下免证书的真机测试如何 ...

  4. SpringMVC+easyui显示数据

    近期做毕业设计,想用easyui,先学习一下CRUD.今天先弄了个表格显示数据库的数据.jsp页面还有非常多其他元素,我就不贴上去了.我显示数据的JSP为/WebContent/WEB-INF/vie ...

  5. 用Windows Live Writer 2012发博客

    一.软件准备: 最新版的是Windows Live Writer 2012,但是不提供单独的安装包,它是和微软其它软件一起的(包括MSN.Window Move Maker等),软件大小为131M,官 ...

  6. C# MVC分页,razor,view传送model

    IMVCPages interface IMVCPages { int GetItemsCount(); int GetPageSize(); int GetPagesCount(); /// < ...

  7. ASP.NET程序代码优化的七个方面

     ASP.NET程序性能优化的七个方面      一.数据库操作 1.用完马上关闭数据库连接 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比 ...

  8. Hibernate工作原理及为什么要用?（转http://www.cnblogs.com/javaNewegg/archive/2011/08/28/2156521.html）

    原理:1.通过Configuration().configure();读取并解析hibernate.cfg.xml配置文件2.由hibernate.cfg.xml中的<mapping resou ...

  9. 万事开头难——Cocos2d-x学习历程(一)

    万事开头难,不知该从哪里开始,不过既然要学习一样新东西,那就从了解它开始吧... Cocos2d-x是一个通用平面游戏引擎,基于一个同样十分著名的游戏引擎Cocos2d-iPhone设计,Cocos2 ...

  10. MySql中游标使用总是多循环一次的解决方法

    CREATE DEFINER = 'root'@'%' PROCEDURE deyestest.procedure2() BEGIN DECLARE v_id INT; DECLARE v_userN ...