Get:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

            document.getElementById("btnGet").onclick = function () {

                //第一步，创建XMLHttpRequest对象

                var xhr = null;

                if (typeof (XMLHttpRequest) != undefined) {

                    xhr = new XMLHttpRequest();

                }

                else {

                    xhr = new ActiveXObject("Microsoft.XMLHttp");

                }

                //第二部，设置异步回调函数。

                xhr.onreadystatechange = function () {

                    //xhr对象状态，0=已创建XMLHttpRequest对象,1=open,2=send,3=onready等待响应,4=成功。

                    if (xhr.readyState == 4) {

                        //status 响应状态

                        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {

                            document.getElementById("div1").innerHTML = xhr.responseText; //xhr.responseText 响应体

                        }

                    }

                }

                //第三步，打开对象，设置请求方式和访问路径

                xhr.open("Get", "GetTime.ashx?id=17&name=" + window.encodeURIComponent("张三"), true);

                //第四步，send()

                xhr.send(null);

            };

        };

    </script>

</head>

<body>

    <div id="div1"></div>

    <input type="button" value="无刷新异步获取" id="btnGet" />

</body>

</html>

Post:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

            document.getElementById("btn").onclick = function () {

                var xhr = null;

                if (typeof (XMLHttpRequest) != undefined) {

                    xhr = new XMLHttpRequest();

                }

                else {

                    xhr = new ActiveXObject("Microsoft.XMLHttp");

                }

                xhr.onreadystatechange = function () {

                    if (xhr.readyState == 4 && xhr.status == 200) {

                        document.getElementById("div1").innerHTML = xhr.responseText + "<hr />";

                        //获取响应报文头信息

                        var date = xhr.getResponseHeader("Date");

                        document.getElementById("div2").innerHTML = date + "<hr />";

                        //获取所有响应报文头信息

                        var all = xhr.getAllResponseHeaders();

                        document.getElementById("div3").innerHTML = all + "<hr />";

                    }

                }

                //通过Post方式请求

                xhr.open("Post", "GetTime.ashx", true);

                //需要添加请求报文头，Content-Type.

                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                //通过键值对的方式传值。

                var name = document.getElementById("name").value;

                xhr.send("id=18&name=" + name);

            };

        };

    </script>

</head>

<body>

    <div id="div1"></div>

    <div id="div2"></div>

    <div id="div3"></div>

    <input type="text" id="name" value="李四" />

    <input type="button" value="提交" id="btn" />

</body>

</html>

GetTime.ashx:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading;

using System.Web;

namespace MyPerson.UI.Ajax

{

    /// <summary>

    /// GetTime 的摘要说明

    /// </summary>

    public class GetTime : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            //Thread.Sleep(1000);

            string id = context.Request["id"];

            string name = context.Request["name"];

            context.Response.Write(DateTime.Now.ToString() + "<br/>编号：" + id + "<br/>姓名：" + name);

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

JQuery版：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="../Scripts/jquery-1.7.1.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#btnGet").click(function () {

                $.ajax({

                    type: "GET",

                    url: "GetTime.ashx",

                    data: {id: 17, name: "张三"},

                    dataType: "text",

                    success: function(data) {

                        $('#div1').html(data);

                    }

                });

            });

        });

    </script>

</head>

<body>

    <div id="div1"></div>

    <input type="button" value="无刷新异步获取" id="btnGet" />

</body>

</html>

C# XMLHttpRequest对象—Ajax实例的更多相关文章

  1. XmlHttpRequest对象 ajax核心之一

    XMLHttpRequest 对象 XML XSLT XML 解析器 XMLHttpRequest 对象用于在后台与服务器交换数据. 什么是 XMLHttpRequest 对象? XMLHttpReq ...

  2. Ajax 学习之创建XMLHttpRequest对象------Ajax的核心

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. 使用XMLHttpRequest对象完成原生的AJAX请求

    1.大家眼中的Ajax 说到Ajax,只要有过前端开发经验的童鞋一定都不陌生,大都知道它就是一种与后端之间的通信技术,通过这个神奇的家伙,我们不用像传统表单那样填完信息一点提交就呼啦呼啦跳转了.Aja ...

  4. Ajax中的XMLHttpRequest对象详解

    XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...

  5. Ajax学习（三）——XMLHttpRequest对象的五步使使用方法

        Ajax的核心技术是XMLHttpRequest对象,它能够在不向server提交整个页面的情况下.实现局部更新网页.通过这个对象,Ajax能够像桌面应用程序那样仅仅与server进行数据层的 ...

  6. AJAX 核心 —— XMLHTTPRequest 对象回顾

    一.AJAX概述 不使用 AJAX 的网页,如果要更新内容,需要重载整个页面. AJAX ( Asynchronous Javascript And XML ,异步 Javascript 和 XML) ...

  7. Ajax中的XMLHttpRequest对象详解(转)

    XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...

  8. AJAX——XMLHttpRequest对象的使用

    AJAX是web2.0即动态网页的基础,而XMLHttpRequest对象又是AJAX的核心.XMLHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器响应信息和数据 一. ...

  9. Ajax技术---核心XMLHttpRequest对象

    Ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. (一)ajax技术的意义 我 ...

随机推荐

  1. 用@spy模拟真实对象的部分行为

    1.说明在某些情况下,我们需要使用一个真实对象.但是,我们同时需要自定义该对象的部分行 为,此时用@spy 就可以帮我们达到这个目的. 2.用法: categoryService = PowerMoc ...

  2. 基于AR9331（MIPS架构）分析系统启动过程(uboot)

    前提: 1.AR9331是基于MIPS 24K CPU的一款WIFI1X1芯片,其SDK采用uboot作为引导.AR9331中定义的基地址是:0x9f00,0000 2.MIPS24K芯片,将固定的起 ...

  3. hdu1018 Big Number 斯特林公式 求N!的位数。

    Big Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  4. 服务器操作系统应该选择Debian/Ubuntu还是CentOS？

    任何 Linux 发行版本,在理论上都是一样的.只不过操作有的方便,有的麻烦!yum 是比 apt 弱(这就是企业维护和社区维护的区别,企业自己维护不需要这么多功能)但是任何能在 A 发行版本上实现的 ...

  5. Databinding在自定义ViewGroup中如何绑定view

    首先我们在平时开发中使用databinding的时候大部分都是在Activity或者fragment中,但我们一旦在自定义ViewGroup中使用的时候就会出现问题 问题描述: 我们在自定义Linea ...

  6. jQuery实现3D幻灯片

    先看下效果图: 看到这个酷炫的效果有没有很眼馋啊!接下来我们就一起来学习实现它吧. 1.看到效果后我们先分析这个dom要怎么实现! 首先我们要用一个大容器包裹内容,其次这个看起来像是3d效果的图片实际 ...

  7. 怎样利用kettle官方社区查找关于carte服务的设置

    原创作品,出自 "深蓝的blog" 博客,转载时请务必注明出处.否则有权追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlong/ar ...

  8. Unity3D学习笔记——NGUI之UITable

    UITable:这个控件可以方便的排列其他小组件,并能控制小组件之间的距离. 效果如下: 这个控件的效果和UIGrid很相似,区别是UIGrid能控制每个小组件的大小,而这个 控件控制的是小组件之前的 ...

  9. boost::lockfree::stack

    #include <boost/thread/thread.hpp> #include <boost/lockfree/stack.hpp> #include <iost ...

  10. Palindrome Function

    Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 256000/256000 K (Java/Others)Total Submissio ...