您的位置：首页 > Web前端 > JQuery

ajax入门,jQuery+ashx （二）

2010-12-12 21:20 253 查看

上节说到一般处理程序，由于时间关系就晚上继续了。下面按照一个实例项目来具体说明一下。

首先新建一个空白解决方案"AjaxPj"

添加一个新的项目（asp.net web application）"Ajax.Website"

修改配置文件，如下图所示

新建文件MyHandler.ashx,代码如下

using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
namespace Ajax.Website
{
/// <summary>
/// Summary description for $codebehindclassname$
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class MyHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string action = context.Request["action"].ToString();
string text = "";
switch (action.ToUpper())
{
case "GETALLUSER":
text = new UserService().GetAllUser();
break;
case "OTHERACTION":
text = "";
break;
default:
break;
}
context.Response.ContentType = "text/plain";
context.Response.Write(text);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}

新建User.cs,代码如下

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
namespace Ajax.Website
{
public class User
{
private string _id = string.Empty;
public string Id
{
get { return _id; }
set { _id = value; }
}
private string _name = string.Empty;
public string Name
{
get { return _name; }
set { _name = value; }
}
private string _password = string.Empty;
public string Password
{
get { return _password; }
set { _password = value; }
}
private int _age = 0;
public int Age
{
get { return _age; }
set
{ _age = value; }
}
public User(string id, string name, string password, int age)
{
this.Id = id;
this.Name = name;
this.Password = password;
this.Age = age;
}
}
}

新建文件Result.cs,代码如下

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
namespace Ajax.Website
{
/// <summary>
/// 返回结果对象
/// </summary>
public class Result
{
//错误信息
public string Error = string.Empty;
//返回的Json
public string Json = string.Empty;
public Result()
{ }
}
}

新建文件UserService.cs，代码如下

using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Collections.Generic;
using Newtonsoft.Json;
namespace Ajax.Website
{
public class UserService
{
public string GetAllUser()
{
IList<User> users = new List<User>();
User user1 = new User("1","user1","pwd1",21);
User user2 = new User("2", "user2", "pwd2", 22);
User user3 = new User("3", "user3", "pwd3", 23);
User user4 = new User("4", "user4", "pwd4", 24);
users.Add(user1);
users.Add(user2);
users.Add(user3);
users.Add(user4);
Result result = new Result();
string error = "";
string json = "";
result.Error = error;
result.Json = Newtonsoft.Json.JavaScriptConvert.SerializeObject(users);
return Newtonsoft.Json.JavaScriptConvert.SerializeObject(result);
}
}
}

新建文件defaul.js，代码如下

$(document).ready(function(){
$.post("getUser.test",{action:"GETALLUSER"},function(data){showUser(data);});
});
function showUser(data)
{
debugger;
var obj=$.parseJSON(data);
var error=obj.Error;
var json=obj.Json;

var div=$("#content");

var html="";
html+="<table border=/"1px/"><tr><td>ID</td><td>NAME</td><td>PASSWORD</td><td>AGE</td></tr>";

var users=$.parseJSON(json);

$.each(users,function(n,user){
html+="<tr><td>"+user.Id+"</td><td>"+user.Name+"</td><td>"+user.Password+"</td><td>"+user.Age+"岁</td></tr>";
});
html+="</table>";

div.append(html);
}

新建文件Index.htm，代码如下

<!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>Untitled Page</title>
<mce:script src="js/jquery-1.4.2.js" mce_src="js/jquery-1.4.2.js" type="text/javascript"></mce:script>
<mce:script src="js/default.js" mce_src="js/default.js" type="text/javascript" ></mce:script>
</head>
<body>
<div id="content">

</div>
</body>
</html>

到此代码基本上就写完了，全部的目录结构如下

下面配置IIS，相信细心的你一定发现了default.js中用jQuery的ajax函数$.post中的URL为"getUser.test",".test"是什么文件？为什么能够作为URL来进行请求，这就是在web.config中配置的处理Myhandler,但是想要浏览器识别".test"，就必须在IIS中进行配置，过程如下：

好了，现在IIS也配置好了。执行浏览Index.htm,你将在你的浏览器中看到如下结果

手酸了，写好了，老婆在催了，完了

2010-12-12 21：17：30 写于重庆市渝北区大竹林银竹苑（家中）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航