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. HDU 5355 Cake(2015多校第六场，搜索 + 剪枝）

    Cake Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total Sub ...

  2. hive 添加UDF(user define function) hive的insert语句

    add JAR /home/hadoop/study/study2/utf.jar; package my.bigdata.udf; import org.apache.hadoop.hive.ql. ...

  3. 开发GPIO驱动的基本套路

    最近完成了基于AR9331的GPIO驱动的开发,主要包括:控制一个连接GPIO的灯控:接收一个连接GPIO的按键事件:以及接收一个连接GPIO的脉冲事件. 这里,结合开发实践,总结一下GPIO驱动开发 ...

  4. 如何修改SESSION的生存时间

    php中session过期时间设置网上很多人给出了解答:修改php配置文件中的session.gc_maxlifetime.如果想了解更多session回收机制,继续阅读.(本文环境php5.2) 概 ...

  5. 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件

    jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...

  6. CentOS 6.5 MySQL5.6.26源码安装

    一.源码安装cmake工具 从mysql5.5起,mysql源码安装开始使用cmake wget http://cmake.org/files/v3.2/cmake-3.2.3.tar.gztar z ...

  7. PNP与NPN三极管

    主要区别是电流流向和电压不同:PNP管子是发射极流入后从基极和集电极流出,NPN管子是基极和集电极流入从发射极流出.PNP管子工作在放大区时电压是,Ue>Ub>Uc,NPN管子工作在放大区 ...

  8. Linux之（Git）服务之windows配置

    设置你自己的昵称与email设置本地机器默认commit的昵称与Email. 请使用有意义的名字与email. git config --global user.name "syavingc ...

  9. CentOS7环境下在/离线安装GCC与GCC-C++

    前几天在准备CentOS7下的编译环境,在线安装GCC和GCC-C++非常简单,只要机器是联网的在Terminal窗口中按顺序分别输入 yum install gcc yum install gcc- ...

  10. Python操作yaml文件

    基本的yaml语法 http://ansible-tran.readthedocs.io/en/latest/docs/YAMLSyntax.html YAML 还有一个小的怪癖. 所有的 YAML ...