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. AutoLayout详解+手把手实战(转载)

    首先说一下这篇博客虽然是标记为原创,但是事实并非本人亲自写出来的,知识点和例子本人花了一天各处查 找和整理最终决定写一个汇总的详解,解去各位朋友到处盲目查找的必要,因为不是转载某一个人的内容,故此不标 ...

  2. flume 中的 hdfs sink round 和roll

    http://blog.csdn.net/kntao/article/details/49278239 http://flume.apache.org/FlumeUserGuide.html#exec ...

  3. Help Tomisu UVA - 11440 难推导+欧拉函数，给定正整数N和M， 统计2和N!之间有多少个整数x满足，x的所有素因子都大于M (2<=N<=1e7, 1<=M<=N, N-M<=1E5) 输出答案除以1e8+7的余数。

    /** 题目:Help Tomisu UVA - 11440 链接:https://vjudge.net/problem/UVA-11440 题意:给定正整数N和M, 统计2和N!之间有多少个整数x满 ...

  4. FreeMarker调用Java静态方法以及静态变量的方法

    这里介绍下在类似 Spring+FreeMarker 的架构中如何在FreeMarker中访问Java中的静态方法以及静态变量. 一.首先为了方便以及可复用我们创建一个工具类 /** * FreeMa ...

  5. thinkphp No input file specified的解决方法

    .htaccess RewriteRule ^(.*)$ index.php?s=$1 [QSA,PT,L]

  6. 第一百七十七节，jQuery，知问前端--概述及 jQuery UI

    jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一．项目介绍 我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能 ...

  7. Laravel Lumen 数组操作

    php原生:http://www.w3school.com.cn/php/php_ref_array.asp Lumen方法:https://laravel.com/docs/5.6/helpers ...

  8. Java手记

    由于腾讯的MTA只有JAVA的demo,为了测试用php实现的加密算法是否正确,所有只能运行一下Java 配置环境:http://www.runoob.com/java/java-environmen ...

  9. Linux之（node.js）服务

    1.1下载源码 你需要在下载最新的Nodejs版本, https://nodejs.org/en/download/ http://nodejs.org/dist/ 现在以node-v7.7.1.ta ...

  10. ios中的coredata

    本文转载至 http://blog.csdn.net/chen505358119/article/details/9334831 分类: ios2013-07-15 18:12 12449人阅读 评论 ...