Ajax运用json数组传输数据
Ajax是目前非常流行的技术之一。很多地方都能用到他，比如在不刷新页面的情况下验证用户名是否已经存在等等。下面是，验证通过后，返回用户各个属性值的方法。
aspx页面代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>查询用户信息</title>
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementById("<%=btnOK.ClientID %>");
btn.onclick = function () {
//1.创建XMLHttpRequest
var xmlHttpRequest = createXMLHttpRequest();
//2.设置回调函数
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
var XMLDoc = xmlHttpRequest.responseText; //获取服务器端输出的xml,XMLDocument
var users = eval("(" + xmlHttpRequest.responseText + ")");
var showDiv = document.getElementById("showUserInfo");
showDiv.innerHTML = "";
for (var i = 0; i < users.length; i++) {
var htmlStr = "<table style='float:left;border:1px solid #000; margin:3px'><tr><td>";
htmlStr += "真实姓名：" + users[i].Name;
htmlStr += "</td></tr><tr><td>";
htmlStr += "登录名：" + users[i].LoginId;
htmlStr += "</td></tr><tr><td>";
htmlStr += "年龄：" + users[i].Age;
htmlStr += "</td></tr><tr><td>";
htmlStr += "未读信息数：" + users[i].MessageCount;
htmlStr += "</td></tr><tr><td>";
htmlStr += "积分数：" + users[i].Score;
htmlStr += "</td></tr></table>";
document.getElementById("showUserInfo").innerHTML += htmlStr;
}
showDiv.style.display = "";
}
}
//3.初始化xmlHttpRequest
xmlHttpRequest.open("POST", "Handler.ashx", true);
xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.发送请求
var data = "loginId=" + document.getElementById("<%=txtUserName.ClientID %>").value;
xmlHttpRequest.send(data);
return false;
}
}
function createXMLHttpRequest() {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
else {
return new XMLHttpRequest();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
<asp:Button ID="btnOK" runat="server" Text="登陆" />
</div>
<div id="showUserInfo" style="font: 12px/20px; display: none;">
</div>
</form>
</body>
</html>
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
//using System.Xml.Serialization;
using System.Text;
using System.Web.Script.Serialization;
using System.Collections.Generic;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string name = context.Request.Form["LoginId"];
//根据LoginId获取一个用户对象，实际应用中是从业务层获取
Random r = new Random();
List<UserInfo> userList = new List<UserInfo>();
for (int i = 0; i < 10; i++)
{
userList.Add(getUserByName(name, r));
}
string jsonStr = new JavaScriptSerializer().Serialize(userList);
context.Response.Write(jsonStr);
}
private UserInfo getUserByName(string name, Random r)
{
//根据loginId获取一个用户对象，实际应用中是从业务层获取
UserInfo user = new UserInfo();
user.Age = r.Next(16, 80);
user.LoginId = GetRandomString(r);
user.MessageCount = r.Next(100);
user.Name = name;
user.Score = r.Next(100);
return user;
}
public string GetRandomString(Random r)
{
char[] chars = { 'a','b','c','d','e','f','g'};
StringBuilder sb = new StringBuilder();
for (int i = 0; i < 5; i++)
{
sb.Append(chars[r.Next(6)]);
}
return sb.ToString();
}
public bool IsReusable {
get {
return false;
}
}
}
