C# XMLHttpRequest对象—Ajax实例
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实例的更多相关文章
- XmlHttpRequest对象 ajax核心之一
XMLHttpRequest 对象 XML XSLT XML 解析器 XMLHttpRequest 对象用于在后台与服务器交换数据. 什么是 XMLHttpRequest 对象? XMLHttpReq ...
- Ajax 学习之创建XMLHttpRequest对象------Ajax的核心
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 使用XMLHttpRequest对象完成原生的AJAX请求
1.大家眼中的Ajax 说到Ajax,只要有过前端开发经验的童鞋一定都不陌生,大都知道它就是一种与后端之间的通信技术,通过这个神奇的家伙,我们不用像传统表单那样填完信息一点提交就呼啦呼啦跳转了.Aja ...
- Ajax中的XMLHttpRequest对象详解
XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...
- Ajax学习（三）——XMLHttpRequest对象的五步使使用方法
Ajax的核心技术是XMLHttpRequest对象,它能够在不向server提交整个页面的情况下.实现局部更新网页.通过这个对象,Ajax能够像桌面应用程序那样仅仅与server进行数据层的 ...
- AJAX 核心 —— XMLHTTPRequest 对象回顾
一.AJAX概述 不使用 AJAX 的网页,如果要更新内容,需要重载整个页面. AJAX ( Asynchronous Javascript And XML ,异步 Javascript 和 XML) ...
- Ajax中的XMLHttpRequest对象详解(转)
XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...
- AJAX——XMLHttpRequest对象的使用
AJAX是web2.0即动态网页的基础,而XMLHttpRequest对象又是AJAX的核心.XMLHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器响应信息和数据 一. ...
- Ajax技术---核心XMLHttpRequest对象
Ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. (一)ajax技术的意义 我 ...
随机推荐
- Java重构-策略模式、状态模式、卫语句
前言 当代码中出现多重if-else语句或者switch语句时.弊端之一:如果这样的代码出现在多处,那么一旦出现需求变更,就需要把所有地方的if-else或者switch代码进行更改,要是遗漏了某一处 ...
- Android 之布局
1.RelativeLayout相对布局 a).第一类:属性值为true或false android:layout_centerHrizontal 水平居中 android:layout_center ...
- mySQL 开启事件存储过程
怎样在Navicat中设置,是数据库按照记录中的日期更新状态字段 其实这个很常用,比如你网站里的某条记录的日期——比如说数据库中某条活动记录的审核日期字段已经过期,亦即当前时间已经超过审核日期,那么定 ...
- Photoshop脚本之jpg转换成eps
function saveEPS( doc, saveFile ) { var saveOptions = new EPSSaveOptions( ); saveOptions.encoding = ...
- 关闭数据库时SHUTDOWN: waiting for active calls to complete.处理
有时候在关闭数据库时,发出shutdown immediate;命令后一直未关闭.查看ALERT日志.在等待一段时间后日志中有提示: SHUTDOWN: waiting for active call ...
- Spark OOM：java heap space，OOM:GC overhead limit exceeded解决方法
问题描述: 在使用spark过程中,有时会因为数据增大,而出现下面两种错误: java.lang.OutOfMemoryError: Java heap space java.lang.OutOfMe ...
- Failed to load the JNI shared library jvm.dl
. 原因1:该目录下jvm.dll不存在 2 解决办法:重新安装jdk或者jre并配置好环境变量.copy一个jvm.dll放在该目录下 3 原因2:eclipse的版本与jdk或者jre版本不一致 ...
- FileToolkit 文件工具箱
import org.apache.commons.io.FileUtils; import org.apache.commons.io.filefilter.*; import org.apache ...
- Java 基础巩固：装箱拆箱 你真的熟悉吗
先考两道题: Integer a1 = 300; Integer a2 =300; System.out.print(a1 == a2); Integer b1 = 1; Integer b2 = 1 ...
- EasyGBS国标流媒体服务器GB28181国标方案安装使用文档
EasyGBS - GB28181 国标方案安装使用文档 下载 安装包下载,正式使用需商业授权, 功能一致 在线演示 在线API 架构图 EasySIPCMS SIP 中心信令服务, 单节点, 自带一 ...