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. iOS 学习笔记五 【2016年百度地图定位详细使用方法】

    具体介和配置绍在此就不详述了,详情请看百度地图API文档, 在这里具体讲解下,新版百度地图的定位与反地理编码的使用: 1.导入头文件 #import <BaiduMapAPI_Map/BMKMa ...

  2. Android-风格和主题

    Android-风格和主题 一 Style和主题Theme的差别 1.Theme是针对窗口级别的,改变窗口样式 2.Style是针对窗口元素级别的.改变指定控件或者Layout的样式 二 使用Styl ...

  3. MathType公式行距设置的方法

    在使用普通的文档编辑器编辑数学公式的时候,大家会发现一些数学上特殊的符号.公式很难给编辑出来,有时候就算编辑出来了也不符号一些学术的规范.这个时候就可以使用MathType这款公式编辑器来编辑.但是在 ...

  4. IOS7 UI Transition Guide 状态栏 statusbar

    本文转载至 http://blog.csdn.net/linzhiji/article/details/12233387 Redesign Your App for iOS 7 之 页面布局 iOS7 ...

  5. Kettle 7启动 Spoon.bat 时报错“A Java Exception has occurred.”的解决方法

    最近在研究Kettle 时出现启动时报错“A Java Exception has occurred.”的问题.刚开始没搞明白是什么原因,后来发现是jdk版本的问题.出现这个错误原因是 Kettle ...

  6. 使用EasyNVR无插件流媒体服务器接口和EasyPlayer.js播放器插件实现web网页H5播放无插件

    1.背景需求 很多客户在使用EasyNVR无插件流媒体服务器时,不喜欢产品化的界面,有时可能满足不了日常观看使用的需求.因此软件提供丰富的HTTP接口,供第三方平台调用集成.但是有时客户这边可能没有专 ...

  7. AngularJS定时器任务

    由于项目需要监测用户在线时长,所以用定时器来实现. /*计算在线时长,一分钟执行一次*/ var stopEvent = $interval(function(){ //每分钟执行一次定时任务 $sc ...

  8. this.$apply()

    chooseVideo(e) { this.fileInfo = {} let that = this wx.chooseVideo({ sourceType: ['album', 'camera'] ...

  9. SSL逐渐演变到TLS

    w https://zh.wikipedia.org/wiki/超文本传输安全协议

  10. velocity 的 escape实现

    EscapeHtmlReference的escape方法调用以下方法实现: StringEscapeUtils.escapeHtml(param); 再调用 org.apache.commons.la ...