ajax操作调用后台代码之(一)

======================================================
注：本文源代码点此下载
======================================================

通过ajax在客户端调用后台代码,通过后台代码更改,修复,查询数据,并把结果返回给客户端,在客户端获取到服务器返回的数据在做相应的操作,从而实现通过html控件操作一些在javascript比较难实现的功能;比如通过html的控件访问查询数据库,并把结果传给客户端显示,这方面在google地图开发应用得比较多,下面以一个简单的实例说明:

添加一个.aspx的页面,命名为:ajaxpkashx.aspx,全部代码如下:

1 @ page language="c#" autoeventwireup="true" codebehind="ajaxpkashx.aspx.cs" inherits="ajaxtest.ajaxpkashx" %>

2

3doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

4

5html xmlns="http://www.w3.org/1999/xhtml" >

6head runat="server">

7title>通过ajax实现客户端获取后台数据/title>

8/head>

9body>

10script language="javascript" type="text/javascript">

11//对于没有xmlhttprequest对象的浏览器,需要构造一个

12//该方法可写在公共js文件中,定义全局变量保存

13if (!window.xmlhttprequest) {

14window.xmlhttprequest = function () {

15return new activexobject("microsoft.xmlhttp");

16}

17}

18//html按钮控件的触发事件

19function showuserinfo()

20{

21//获取传递参数

22var userid = document.getelementbyid("tbid").value;

23//接收返回的结果

24var jsuserinfo = "";

25//分解返回的结果字符串,数组形式出现

26var objarray = new array();

27//定义一个xmlhttprequest,用于请求sample.ashx文件

28var arequest = new xmlhttprequest();

29//异步调用sample.ashx文件并传参数

30

31//第一个参数传输方式

32//第二个参数是目标的地址

33//第三个参数是表示是否为异步调用,false非异步,即同步;为true则为异步调用

34arequest.open("post","sample.ashx?userid=" + userid,true);

35

36////请求完成将收到此事件

37arequest.onreadystatechange = function()

38{

39//状态4表示请求成功

40if(arequest.readystate == 4)

41{

42//获取返回结果

43jsuserinfo = arequest.responsetext;

44//对返回结果处理

45if(jsuserinfo.length > 0)

46{

47objarray = jsuserinfo.split(",");

48}

49document.getelementbyid("spno").value = objarray[0].tostring();

50document.getelementbyid("spname").value = objarray[1].tostring();

51document.getelementbyid("sptime").value = objarray[2].tostring();

52}

53}

54arequest.send(null);

55}

56 /script>

57form id="form1" runat="server">

58div>

59asp:textbox id="tbid" runat="server">/asp:textbox>

60input id="btshow" type="button" value="button" onclick="showuserinfo();" />

61/div>

62div>

63asp:label id="label1" runat="server" text="工号:">/asp:label>

64input id="spno" type="text" />

65/div>

66div>

67asp:label id="label2" runat="server" text="姓名:">/asp:label>

68input id="spname" type="text" />

69/div>

70div>

71asp:label id="label3" runat="server" text="入职时间:">/asp:label>

72input id="sptime" type="text" />

73/div>

74/form>

75 /body>

76 /html>

第34行中

arequest.open("post","sample.ashx?userid=" + userid,true);

sample.ashx 为“一般处理程序”文件,也是后台代码编写的地方,根据我的了解,这种文件系统会生成两个方法,不允许在添加任何方法,或是添加了也无效,有待验证,有比较清楚的大虾请指教,以下为该文件的全部代码:

这个方法是在创建文件时自动建立的,当我们在客户端通过

1 using system;

2 using system.data;

3 using system.web;

4 using system.collections;

5 using system.web.services;

6 using system.web.services.protocols;

7

8 namespace ajaxtest

9 {

10///

11/// $codebehindclassname$ 的摘要说明

12///

13[webservice(namespace = "http://tempuri.org/")]

14[webservicebinding(conformsto = wsiprofiles.basicprofile1_1)]

15public class sample : ihttphandler

16{

17

18public void processrequest(httpcontext context)

19{

20context.response.contenttype = "text/plain";

21//用户id,接收客户端传过来的参数

22string userid = "";

23//传回的字符串

24string userinfo = "";

25//读取客户端传过来的参数

26if(!string.isnullorempty(httpcontext.current.request["userid"]))

27userid = httpcontext.current.request["userid"];

28

29//通过客户端传来的参数获取后台数据,包括对数据库的操作后返回的数据集,在此就不累赘了

30//获取后的数据可以以json或xml的格式封装后以string的形式传送到客户端

31//如果数据简单就返回一个字符串,如下:

32userinfo = "8080,张三,2008-07-01";

33context.response.write(userinfo);

34}

35

36public bool isreusable

37{

38get

39{

40return false;

41}

42}

43}

44 }

我们的代码只需要写在这个方法中

public void processrequest(httpcontext context)

arequest.open("post","sample.ashx?userid=" + userid,true);

这个方法调用这个“一般处理程序”时,系统默认调用了该方法,所以我们的处理代码和返回值都在该方法完成,这样有一个不好的地方,就是每调用一次都必须新创建一个“一般处理程序”,可以想象在项目中如果经常用到这种方法那这种文件要创建很多个,这对应项目的管理是比较郁闷的;这个问题其实也是有解决的方法,ajax调用webservice便可以解决,通过调用制定的方法和制定的返回值来实现

返回方法:

context.response.write(userinfo);

通过该方法可以把string类型的userinfo变量传回客户端,客户端接收到该string类型的变量即可对其操作,客户端的接收代码如下:

jsuserinfo = arequest.responsetext;

运行的结果:

绿色通道:好文要顶关注我收藏该文与我联系

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/