jqueryAjax的使用

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>