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. Shallow Heap & Retained Heap

    所有包含Heap Profling功能的工具(MAT, Yourkit, JProfiler, TPTP等)都会使用到两个名词,一个是Shallow Size,另一个是 Retained Size. ...

  2. Building Maintainable Software-java篇之Separate Concerns in Modules

    Building Maintainable Software-java篇之Separate Concerns in Modules   In a system that is both complex ...

  3. ubuntu中怎样添加或删除一个PPA源

    添加PPA源的命令为:sudo add-apt-repository ppa:user/ppa-name 添加好更新一下: sudo apt-get update删除命令格式则为:sudo add-a ...

  4. java 签名类 Signature

    java.security类 Signature java.lang.Object java.security.SignatureSpi java.security.Signature public ...

  5. poj 2117(割点的应用)

    题目链接:http://poj.org/problem?id=2117 思路:题目的意思是要求对于给定的无向图,删除某个顶点后,求最大的连通分量数.显然我们只有删掉割点后,连通分支数才会增加,因此我们 ...

  6. windows 32位以及64位的inline hook

    Tips : 这篇文章的主题是x86及x64 windows系统下的inline hook实现部分. 32位inline hook 对于系统API的hook,windows 系统为了达成hotpatc ...

  7. C#实现按键精灵的'找图' '找色' '找字'的功能

    http://www.cnblogs.com/JimmyBright/p/4355862.html 背景:游戏辅助功能通常使用按键精灵编写脚本,按键精灵的最大卖点就是能够找到画面中字,图,色,这对于模 ...

  8. Unit redis-server.service is masked.

    http://stackoverflow.com/questions/40317106/failed-to-start-redis-service-unit-redis-server-service- ...

  9. qt 如何给图元安装一个场景事件过滤器?

    void QGraphicsItem::installSceneEventFilter(QGraphicsItem *filterItem) class LabCrossEvent : public ...

  10. java 对象与二进制互转

    来自 : http://blog.csdn.net/luckyzhoustar/article/details/50402427 /** * @FileName: ByteToObject.java ...