AjAx 页面传值 从入门到精通（含javascript ，AjAx,Json）（好） 自作演示版 第二节
第一种方法(javascript)，第二种方法(Jquery) 共用html页面和GetDate.ashx页面，这两种方法传递的是单字符串；第三种方法利用json传递数组（键值对，是字典数组）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!---------------------------方法一-------------------->
<!-- //javascript方法实现ajax传值
<script type="text/javascript">
function btnClick() {
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp) {
alert("创建xmlhttp对象异常");
return false;
}
//准备向服务器的GetDate.ashx页面发出post请求，并传递参数id,&ts=new date().getdate()为预防页面有缓存
xmlhttp.open("POST", "GetDate.ashx?id=" + encodeURI("历史") + " &ts=" + new Date().getTime(), false);
//xmlhttp默认（也推荐）不是同步请求的，也就是open方法并不像webclient的dropdowmstring那样把服务器返回数据拿到哦才返回
//，是异步的，因此需要监听Onreadystatechange事件
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readystate == 4) { //服务器请求完成
if (xmlhttp.status == 200) { //如果状态吗是200，则请求成功
document.getElementById("Text1").value = xmlhttp.responseText;
//responseText属性为服务器返回的文本
}
else {
alert("AJAX服务器返回错误！");
}
}
}
xmlhttp.send();//这时候才开始发送请求
}
</script>-->
<!---------------------------方法二-------------------->
<!-- //用Jquery实现AjAx 比较方便
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript">
function btnClick() {//推荐用post方式，因为post方式没有缓存的问题
$.post("GetDate.ashx", { "id": "中国" }, function (data, status) {
if (status == "success") { // 第二个参数status为服务器返回状态码，success表示返回成功
$("#Text1").val(data); // 第一个参数data为服务器返回的内容
}
else { //如果返回失败
alert("AJAX错误");
}
})
}
</script>-->
<!---------------------------方法三-------------------->
<!-- 上边方法回传的数据都是单字符串，可用Json实现传递数组-->
</head>
<body>
获取服务器时间:<br />
<input id="Text1" type="text" style="width:400px;" />
<input id="Button1" type="button" value="获取" onclick="btnClick()" />
</body>
</html>
GetDate.ashx页面 方法一，方法二公用的页面：
<%@ WebHandler Language="C#" class="GetDate" %>
using System;
using System.Web;
public class GetDate : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
string id = context.Request["id"];
context.Response.Write(DateTime.Now.ToString()+id);
//获取服务器时间，通过context.response.write()返回数据
}
public bool IsReusable {
get {
return false;
}
}
}
方法三：Json 用于传递数组
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<!---------------------------方法三-------------------->
<!-- 上边（方法一，方法二）方法回传的数据都是单字符串，可用Json实现传递数组-->
<script type="text/javascript">
$(function () {
$.post("JsonTest.ashx", function (data, status) {
var person = $.parseJSON(data);
alert(person.Name+","+person.Age.toString());
});
});
</script>
</head>
<body>
</body>
</html>
JsonTest.ashx页面
<%@ WebHandler Language="C#" class="JsonTest" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;
[WebService(Namespace="http://tempuri.org")]
[WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]
public class JsonTest : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
JavaScriptSerializer jss = new JavaScriptSerializer();//javascriptSerializer为启用AFAX的应用程序提供序列化和反序列化功能。
string json = jss.Serialize(new Person { Name="tom",Age=30});//Serialize()；挡在派生类中重写时候，生成名称/值对的字典数组。
context.Response.Write(json);//返回一个字典数组形式的字符串{"Name"："tom","Age":30}
}
public bool IsReusable {
get {
return false;
}
}
}
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
}
