1. 导入等下我们要使用的文件AjaxMsgHelper.cs和DataHelper.cs他们的代码如下
using System;
using System.Collections.Generic;
using
System.Linq;
using System.Text;
namespace WebApplication1
{
/// <summary>
/// 生成 Ajax
响应消息 字符串
///
数据格式：{"statu":"err","msg":"出错啦~~","data":[{},{}],"nextUrl":"Login.aspx"}
/// </summary>
public static class AjaxMsgHelper
{
#region 1.0 生成 Ajax消息 字符串 +static string AjaxMsg
///
<summary>
/// 生成 Ajax消息 字符串
/// </summary>
/// <param name="statu"></param>
/// <param
name="msg"></param>
/// <returns></returns>
public static void AjaxMsg(string statu, string msg)
{
AjaxMsgHelper.AjaxMsg(statu, msg, "null", "null");
}
/// <summary>
/// 生成 Ajax消息 字符串
/// </summary>
/// <param name="statu"></param>
/// <param
name="msg"></param>
/// <param
name="data"></param>
/// <returns></returns>
public static void AjaxMsg(string statu, string msg, string data)
{
AjaxMsgHelper.AjaxMsg(statu, msg, data, "null");
}
/// <summary>
/// 生成 Ajax消息 字符串
///
</summary>
/// <param name="statu"></param>
/// <param name="msg"></param>
/// <param
name="data"></param>
/// <param
name="nextUrl"></param>
///
<returns></returns>
public static void AjaxMsg(string
statu, string msg, string data, string nextUrl)
{
//{"statu":"err","msg":"出错啦~~","data":[{},{}],"nextUrl":"Login.aspx"}
string strMsg = "{\"statu\":\"" + statu + "\",\"msg\":\"" + msg +
"\",\"data\":" + data + ",\"nextUrl\":\"" + nextUrl + "\"}";
//直接输出 数据 到 浏览器
System.Web.HttpContext.Current.Response.Write(strMsg);
}
#endregion
}
}
using System;
using System.Collections.Generic;
using
System.Linq;
using System.Text;
using System.Web.Script.Serialization;
namespace WebApplication1
{
public static class DataHelper
{
/// <summary>
/// js 序列化器
///
</summary>
static JavaScriptSerializer jss = new
JavaScriptSerializer();
/// <summary>
/// 将 对象 转成 json格式字符串
///
</summary>
/// <param name="obj"></param>
/// <returns></returns>
public static string
Obj2Json(object obj)
{
//把集合 转成 json 数组格式字符串
return
jss.Serialize(obj);
}
}
}
2.写好等下我们要用的一般处理程序 handler.ashx 代码如下
using System;
using System.Collections.Generic;
using
System.Linq;
using System.Web;
using
System.Web.Script.Serialization;
namespace WebApplication1
{
public class Student
{
private string name;
public string Name
{
get { return name;
}
set { name = value; }
}
private string
pass;
public string Pass
{
get { return pass;
}
set { pass = value; }
}
}
///
<summary>
/// handler 的摘要说明
/// </summary>
public
class handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
List<Student> students = new List<Student>();
for (int i = 0; i < 5; i++)
{
Student stu =
new Student() { Name="Name"+i,Pass="Pass"+i};
students.Add(stu);
}
string datas
= DataHelper.Obj2Json(students);
AjaxMsgHelper.AjaxMsg("200","hello",datas);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
3.新建Comjs文件夹 在里面写一个msgbox.js文件
代码如下
/*{
imghref:图片文件夹所在路径,
waitImg:等待图片名,
bgImg:背景图片名
}
*/
function
MsgBox(s) {
var secondConst = 2000;//系统默认显示时间
var secondWait =
2000;//显示时间
var timer;//计时器
var lf, tp;//左边距,顶边距
var paras = {};
//json参数
function readyMsgBox() {
if (s != null){
if (s.imghref != null) paras.imghref = s.imghref; else paras.imghref =
"images/";
if (s.waitImg != null) paras.waitImg = s.waitImg; else
paras.waitImg = "loader.gif";
if (s.bgImg != null) paras.bgImg =
s.bgImg; else paras.bgImg = "qzonebg.gif";
}
else paras =
{ imghref: "./images/", waitImg: "loader.gif", bgImg: "qzonebg.gif" };
paras.waitImgTag = "<img src=‘" + paras.imghref + paras.waitImg + "‘
style=‘margin-right:10px;‘ align=‘middle‘/> ";
preloadImg(new
Array(paras.imghref + paras.bgImg, paras.imghref + paras.waitImg));
writeMsgBox();
window.onresize = function(){setPosition();}
}
this.showMsgWait = function (msg) {
this.showMsgAllT(paras.waitImgTag + msg, 0);
}
this.showMsgAllT =
function (msg, type) {
clearTimer();
changeIco(type);
gelContainer().innerHTML = msg;
showBox();
}
this.hidBox = function () { hideBox(); };
this.showMsgText = function
(msg) {
showMsgAllT(msg, 0);
}
this.showMsgInfo =
function (msg) {
if (arguments.length > 1) paras.callBack =
arguments[1];
showSysMsg(msg, 1);
}
this.showMsgInfoSide = function (eleId, msg, doHid) {//doHid 是否消失
if
(arguments.length > 3) paras.callBack = arguments[1];
showSysMsgSideEle(eleId, msg, 1, doHid);
}
function
analysisPara(args) {
if (args.length > 1) paras.callBack =
args[1];
}
this.showMsgOk = function (msg) {
if
(arguments.length > 1) paras.callBack = arguments[1];
showSysMsg(msg, 2);
}
this.showMsgOkSide = function (eleId, msg,
doHid) {
if (arguments.length > 3) paras.callBack =
arguments[1];
showSysMsgSideEle(eleId, msg, 2, doHid);
}
this.showMsgErr = function (msg) {
if (arguments.length > 1)
paras.callBack = arguments[1];
showSysMsg(msg, 3);
}
this.showMsgErrSide = function (eleId,msg,doHid) {
if
(arguments.length > 3) paras.callBack = arguments[1];
showSysMsgSideEle(eleId, msg, 3, doHid);
}
this.showSysMsgWTime =
function (msg, type, second) {
if (arguments.length > 3)
paras.callBack = arguments[3];
changeIco(type);
gelContainer().innerHTML = msg;
showBox();
secondWait =
second;
if (second >= 0)
startTimer(emptyMsg);
}
function showSysMsg(msg, type) {
changeIco(type);
gelContainer().innerHTML = msg;
showBox();
secondWait =
secondConst;
startTimer(emptyMsg);
}
//---显示在元素右边
function showSysMsgSideEle(eleId, msg, type, doHid) {
changeIco(type);
gelContainer().innerHTML = msg;
setPosSideEle(eleId);
if (doHid) {
secondWait =
secondConst;
startTimer(emptyMsg);
} else
clearTimer();
}
function setPosSideEle(eleId) {
var wid
= document.getElementById(eleId).offsetWidth;
var hig =
document.getElementById(eleId).offsetHeight;
var pos =
getPos(eleId);
gelBox().style.left = (wid+2 + pos.left) + "px";
gelBox().style.top = (pos.top - (hig/2)) + "px";
gelBox().style.display = "block";
}
//--------------
this.showReqErr=function(){this.showMsgErr("请求错误
ToT!");}
this.showReqOk=function(){this.showMsgOk("操作成功 ^o^!");}
this.showReqVF = function () { this.showSysMsgWTime("会话过期,3秒后自动返回登录界面
-o-!",1,3000); }
this.showWait = function () { this.showMsgWait("请稍后 l _
l ..."); }
//-------------
function startTimer(functionName) {
clearTimer();
timer=window.setTimeout(functionName,
secondWait);
}
function clearTimer() {
if (timer !=
null && timer != undefined) { clearTimeout(timer); }
}
function emptyMsg() {
gelContainer().innerHTML = "";
hideBox();
if (paras.callBack != null) {paras.callBack();
paras.callBack = null; }
}
function writeMsgBox() {
var
msgBox = document.createElement("table");
var msgTbody =
document.createElement("tbody");
var msgTr =
document.createElement("tr");
var msgBoxL =
document.createElement("td");
var msgBoxC =
document.createElement("td");
var msgBoxR =
document.createElement("td");
document.body.appendChild(msgBox);
msgBox.appendChild(msgTbody);
msgTbody.appendChild(msgTr);
msgTr.appendChild(msgBoxL);
msgTr.appendChild(msgBoxC);
msgTr.appendChild(msgBoxR);
msgBox.setAttribute("id",
"msgBox");
msgBox.setAttribute("cellpadding", "0");
msgBox.setAttribute("cellspacing", "0");
msgBox.style.cssText =
"height:52px;width:auto;position:absolute;z-index:999999;display:none;
background:url(" + paras.imghref + paras.bgImg+") 0px -161px;";
msgBoxL.setAttribute("id", "msgBoxL");
msgBoxL.style.cssText =
"width:50px;background:url(" + paras.imghref + paras.bgImg+") -7px -108px
no-repeat;";
msgBoxC.setAttribute("id", "msgBoxC");
msgBoxC.style.cssText =
"width:auto;line-height:51px;color:#666666;font-weight:bold;font-size:14px;padding-right:10px;";
msgBoxR.setAttribute("id", "msgBoxR");
msgBoxR.style.cssText =
"width:5px;background:url(" + paras.imghref + paras.bgImg+") 0px 0px
no-repeat;";
}
function changeIco(ty) {
if (ty ==
0)//none
document.getElementById("msgBoxL").style.width =
"10px";
else document.getElementById("msgBoxL").style.width =
"50px";
if (ty == 1)//info
document.getElementById("msgBoxL").style.backgroundPosition = "-7px -54px";
else if (ty == 2)//ok
document.getElementById("msgBoxL").style.backgroundPosition = "-7px 0px";
else if (ty == 3)//err
document.getElementById("msgBoxL").style.backgroundPosition = "-7px -108px";
}
function gelBox() {
return
document.getElementById("msgBox");
}
function gelContainer() {
return document.getElementById("msgBoxC");
}
function
hideBox() {
gelBox().style.display = "none";
}
function
showBox() {
setPosition();
gelBox().style.display =
"block";
}
function setPosition() {
lf =
document.body.clientWidth / 2 -
(gelBox().innerHTML.replace(/<[^>].*?>/g, "").length) * 10;
tp = window.screen.height / 2 - 200 + document.documentElement.scrollTop;
gelBox().style.left = lf + "px";
gelBox().style.top = tp +
"px";
}
function preloadImg() {
var Arrimg = new
Array();
if (typeof (arguments[0]) == "string") Arrimg[0] =
arguments[0];
if (typeof (arguments[0]) == "object") {
for (var i = 0; i < arguments[0].length; i++) {
Arrimg[i]
= arguments[0][i];
}
}
var img = new
Array()
for (var i = 0; i < Arrimg.length; i++) {
img[i] = new Image();
img[i].src = Arrimg[i];
}
}
function getPos(eid) {var target = document.getElementById(eid);var
left = 0, top = 0;
do {left += target.offsetLeft || 0;top +=
target.offsetTop || 0;target = target.offsetParent;} while (target);
return {left: left,top: top}
}
readyMsgBox();
}
4.在要使用ajax的页面写入如下代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head
runat="server">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title></title>
<style
type="text/css">
#div1
{
border:1px
solid red;
display:block;
}
</style>
<script src="Comjs/jquery-1.8.0.min.js"
type="text/javascript"></script>
<script
src="Comjs/jquery-1.8.0.js" type="text/javascript"></script>
<script src="Comjs/msgBox.js"></script>
<script
src="Comjs/PageBar.js"></script>
<script type="text/javascript">
var msgbpx =
null;
$(function () {
msgbpx = new
MsgBox();
// msgbpx.showMsgErr("好奇怪没放映");
$.ajax({
url:"Comjs/handler.ashx",
type:
"get",
dataType: "json",
data: ‘dj=‘ +
Math.random(),
success: function (json) {
if (json.data!=null) {
msgbpx.showMsgErr("wait");
}
var
inhtml = "";
inhtml +=
"<div><table><tr><td>用户名</td><td>密码</td></tr>";
for (i = 0; i < json.data.length; i++) {
var stu = json.data[i];
//
msgbpx.showMsgInfo(tu.Pass);
inhtml +=
"<tr><td>" + stu.Name+ "</td>";
inhtml += "<td>" + stu.Pass+ "</td></tr>";
//alert("为什么");
}
inhtml += "</div>";
$(‘#div1‘).html(inhtml);
},
error: function (xhr, status,
errorThrown) {
alert("errorThrown=" + errorThrown);
}
})
});
</script>
</head>
<body>
<form id="form1"
runat="server">
<div id="div1" style="height:500px;
width:500px;">
</div>
</form>
</body>
</html>