AJAX 回忆录 (一)
用JAXA也有一段时间了(用过:anthem,ajax,ajax.net,msajax),现在把以前学习的一些小例子贴起来,好给自己的学习过程留条线...
不知大伙昨晚有没看中国队VS乌兹别克斯坦队的比赛,不看还好不然不然准让它气晕...感到中国的足球,叫了这么多年也搞了这么年,连个亚洲杯都打不出去....晕....
下面来看一下XMLHTTP 的相关工作及DEMO
一、使用步骤:
1、创建XMLHTTP对象 //需MSXML4.0支持
2、打开与服务端的连接,同时定义指令发送方式,服务网页(URL)和请求权限等。客户端通过Open命令打开与服务端的服务网页的连接。与普通HTTP指令传送一样,可以用"GET"方法或"POST"方法指向服务端的服务网页。
3、发送指令。
4、等待并接收服务端返回的处理结果。
5、释放XMLHTTP对象及相关资源
二、XMLHTTP方法:
Open( bstrMethod, bstrUrl, varAsync [,bstrUser][,bstrPassword] )
bstrMethod: 数据传送方式,即GET或POST。
bstrUrl: 服务网页的URL。
varAsync: 是否同步执行。缺省为True,即异步执行,但只能在DOM中实施同步执行。用中一般将其置为False,即异步执行。
bstrUser: 用户名,可省略。
bstrPassword:用户口令,可省略。
注:[] 为可选参数
Send( varBody )
varBody:指令集(参数)。可以是XML格式数据,也可以是字符串,流,或者一个无符号整数数组。也可以省略,让指令通过Open方法的URL参数代入。
setRequestHeader( bstrHeader, bstrvalue )
bstrHeader:HTTP 头(header)
bstrvalue: HTTP 头(header)的值
如果Open方法定义为POST,可以定义表单方式上传:
xmlhttp.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded")
三、XMLHTTP属性:
onreadystatechange:在同步执行方式下获得返回结果的事件句柄。只能在DOM中调用。
responseBody: 结果返回为无符号整数数组。
responseStream: 结果返回为IStream流。
responseText : 结果返回为字符串。
responseXML: 结果返回为XML格式数据。
四、示例:
前台页面代码
因为比较简单也没有添加什么注解...
不知我的理解是否有误,欢迎大虾们指正一下...
忙里偷闲,写了点东东...
要下去吃饭了...回来继续写代码...
不知大伙昨晚有没看中国队VS乌兹别克斯坦队的比赛,不看还好不然不然准让它气晕...感到中国的足球,叫了这么多年也搞了这么年,连个亚洲杯都打不出去....晕....
下面来看一下XMLHTTP 的相关工作及DEMO
一、使用步骤:
1、创建XMLHTTP对象 //需MSXML4.0支持
2、打开与服务端的连接,同时定义指令发送方式,服务网页(URL)和请求权限等。客户端通过Open命令打开与服务端的服务网页的连接。与普通HTTP指令传送一样,可以用"GET"方法或"POST"方法指向服务端的服务网页。
3、发送指令。
4、等待并接收服务端返回的处理结果。
5、释放XMLHTTP对象及相关资源
二、XMLHTTP方法:
Open( bstrMethod, bstrUrl, varAsync [,bstrUser][,bstrPassword] )
bstrMethod: 数据传送方式,即GET或POST。
bstrUrl: 服务网页的URL。
varAsync: 是否同步执行。缺省为True,即异步执行,但只能在DOM中实施同步执行。用中一般将其置为False,即异步执行。
bstrUser: 用户名,可省略。
bstrPassword:用户口令,可省略。
注:[] 为可选参数
Send( varBody )
varBody:指令集(参数)。可以是XML格式数据,也可以是字符串,流,或者一个无符号整数数组。也可以省略,让指令通过Open方法的URL参数代入。
setRequestHeader( bstrHeader, bstrvalue )
bstrHeader:HTTP 头(header)
bstrvalue: HTTP 头(header)的值
如果Open方法定义为POST,可以定义表单方式上传:
xmlhttp.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded")
三、XMLHTTP属性:
onreadystatechange:在同步执行方式下获得返回结果的事件句柄。只能在DOM中调用。
responseBody: 结果返回为无符号整数数组。
responseStream: 结果返回为IStream流。
responseText : 结果返回为字符串。
responseXML: 结果返回为XML格式数据。
四、示例:
前台页面代码
1 <%@ Page language="c#" Codebehind="Ajax.aspx.cs" AutoEventWireup="false" Inherits="TempApp.Ajax" %>
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
3 <HTML>
4 <HEAD>
5 <title>Ajax</title>
6 <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
7 <meta name="CODE_LANGUAGE" Content="C#">
8 <meta name="vs_defaultClientScript" content="JavaScript">
9 <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
10 <script language="javascript">
11 <!--
12 function $( controlid)
13 {
14 return document.getElementById(controlid);
15 }
16 function CreateXMLHttpObject()
17 {
18 if (window.XMLHttpRequest)
19 {
20 return new XMLHttpRequest();
21 }
22 else
23 {
24 var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
25
26 for(var n = 0; n < MSXML.length; n ++)
27 {
28 try
29 { //创建一个能用的对象
30 return new ActiveXObject(MSXML[n]);
31 }
32 catch(e){}
33 }
34 }
35 }
36 function Show_Detail(id,rid)
37 {
38 var xmlHttp=CreateXMLHttpObject();
39 if(xmlHttp)
40 {
41 xmlHttp.open('POST','?',true);//当URL为空时为本页面
42 xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
43 var SendData = 'gid='+rid;//页面参数
44 xmlHttp.send(SendData);
45 xmlHttp.onreadystatechange=function()
46 {
47 if(xmlHttp.readyState==4)
48 {
49 if(xmlHttp.status==200)
50 {//正确的返回
51 $(id).innerHTML = xmlHttp.responseText;
52 }
53 else
54 {
55 $(id).innerHTML='出错:'+xmlHttp.statusText;
56 }
57 }
58 else
59 {
60 $(id).innerHTML="正在提交数据";
61 }
62 }
63 }
64 else
65 {
66 $(id).innerHTML='抱歉,您的浏览器不支持XMLHttpRequest,请使用IE6以上版本!';
67 }
68
69 }
70
71
72
73 //-->
74 </script>
75 </HEAD>
76 <body MS_POSITIONING="GridLayout">
77 <form id="Form1" method="post" runat="server">
78 <input id="btn0" type="button" value="btnSend0" onclick="Show_Detail('divDetail',0)">
79 <input id="btn1" type="button" value="btnSend1" onclick="Show_Detail('divDetail',1)">
80 <input id="btn2" type="button" value="btnSend2" onclick="Show_Detail('divDetail',2)">
81 <input id="btn3" type="button" value="btnSend3" onclick="Show_Detail('divDetail',3)">
82 <input id="btn4" type="button" value="btnSend4" onclick="Show_Detail('divDetail',4)">
83 <input id="btn5" type="button" value="btnSend5" onclick="alert('dsfsdfd');">
84 <div id="divDetail"></div>
85 </form>
86 </body>
87 </HTML>
88
后台页面代码:2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
3 <HTML>
4 <HEAD>
5 <title>Ajax</title>
6 <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
7 <meta name="CODE_LANGUAGE" Content="C#">
8 <meta name="vs_defaultClientScript" content="JavaScript">
9 <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
10 <script language="javascript">
11 <!--
12 function $( controlid)
13 {
14 return document.getElementById(controlid);
15 }
16 function CreateXMLHttpObject()
17 {
18 if (window.XMLHttpRequest)
19 {
20 return new XMLHttpRequest();
21 }
22 else
23 {
24 var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
25
26 for(var n = 0; n < MSXML.length; n ++)
27 {
28 try
29 { //创建一个能用的对象
30 return new ActiveXObject(MSXML[n]);
31 }
32 catch(e){}
33 }
34 }
35 }
36 function Show_Detail(id,rid)
37 {
38 var xmlHttp=CreateXMLHttpObject();
39 if(xmlHttp)
40 {
41 xmlHttp.open('POST','?',true);//当URL为空时为本页面
42 xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
43 var SendData = 'gid='+rid;//页面参数
44 xmlHttp.send(SendData);
45 xmlHttp.onreadystatechange=function()
46 {
47 if(xmlHttp.readyState==4)
48 {
49 if(xmlHttp.status==200)
50 {//正确的返回
51 $(id).innerHTML = xmlHttp.responseText;
52 }
53 else
54 {
55 $(id).innerHTML='出错:'+xmlHttp.statusText;
56 }
57 }
58 else
59 {
60 $(id).innerHTML="正在提交数据";
61 }
62 }
63 }
64 else
65 {
66 $(id).innerHTML='抱歉,您的浏览器不支持XMLHttpRequest,请使用IE6以上版本!';
67 }
68
69 }
70
71
72
73 //-->
74 </script>
75 </HEAD>
76 <body MS_POSITIONING="GridLayout">
77 <form id="Form1" method="post" runat="server">
78 <input id="btn0" type="button" value="btnSend0" onclick="Show_Detail('divDetail',0)">
79 <input id="btn1" type="button" value="btnSend1" onclick="Show_Detail('divDetail',1)">
80 <input id="btn2" type="button" value="btnSend2" onclick="Show_Detail('divDetail',2)">
81 <input id="btn3" type="button" value="btnSend3" onclick="Show_Detail('divDetail',3)">
82 <input id="btn4" type="button" value="btnSend4" onclick="Show_Detail('divDetail',4)">
83 <input id="btn5" type="button" value="btnSend5" onclick="alert('dsfsdfd');">
84 <div id="divDetail"></div>
85 </form>
86 </body>
87 </HTML>
88
1 using System;
2 using System.Collections;
3 using System.ComponentModel;
4 using System.Data;
5 using System.Drawing;
6 using System.Web;
7 using System.Web.SessionState;
8 using System.Web.UI;
9 using System.Web.UI.WebControls;
10 using System.Web.UI.HtmlControls;
11
12 namespace TempApp
13 {
14 /// <summary>
15 /// Ajax 的摘要说明。
16 /// </summary>
17 public class Ajax : System.Web.UI.Page
18 {
19 private string _gid=string.Empty;
20 private void Page_Load(object sender, System.EventArgs e)
21 {
22 if(Request["gid"]!=null && Request["gid"].Trim()!=string.Empty)
23 _gid=Request["gid"].Trim();
24
25 switch(_gid)
26 {
27 case "0":
28 ResponseDetail(0);
29 break;
30 case "1":
31 ResponseDetail(1);
32 break;
33 default:
34 break;
35 }
36
37 }
38
39 private void ResponseDetail(int ty)
40 {
41 Response.Write("你的请求数据为: "+ty);
42 Response.End();//
43 }
44
45 #region Web 窗体设计器生成的代码
46 override protected void OnInit(EventArgs e)
47 {
48 //
49 // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
50 //
51 InitializeComponent();
52 base.OnInit(e);
53 }
54
55 /// <summary>
56 /// 设计器支持所需的方法 - 不要使用代码编辑器修改
57 /// 此方法的内容。
58 /// </summary>
59 private void InitializeComponent()
60 {
61 this.Load += new System.EventHandler(this.Page_Load);
62 }
63 #endregion
64 }
65 }
66
2 using System.Collections;
3 using System.ComponentModel;
4 using System.Data;
5 using System.Drawing;
6 using System.Web;
7 using System.Web.SessionState;
8 using System.Web.UI;
9 using System.Web.UI.WebControls;
10 using System.Web.UI.HtmlControls;
11
12 namespace TempApp
13 {
14 /// <summary>
15 /// Ajax 的摘要说明。
16 /// </summary>
17 public class Ajax : System.Web.UI.Page
18 {
19 private string _gid=string.Empty;
20 private void Page_Load(object sender, System.EventArgs e)
21 {
22 if(Request["gid"]!=null && Request["gid"].Trim()!=string.Empty)
23 _gid=Request["gid"].Trim();
24
25 switch(_gid)
26 {
27 case "0":
28 ResponseDetail(0);
29 break;
30 case "1":
31 ResponseDetail(1);
32 break;
33 default:
34 break;
35 }
36
37 }
38
39 private void ResponseDetail(int ty)
40 {
41 Response.Write("你的请求数据为: "+ty);
42 Response.End();//
43 }
44
45 #region Web 窗体设计器生成的代码
46 override protected void OnInit(EventArgs e)
47 {
48 //
49 // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
50 //
51 InitializeComponent();
52 base.OnInit(e);
53 }
54
55 /// <summary>
56 /// 设计器支持所需的方法 - 不要使用代码编辑器修改
57 /// 此方法的内容。
58 /// </summary>
59 private void InitializeComponent()
60 {
61 this.Load += new System.EventHandler(this.Page_Load);
62 }
63 #endregion
64 }
65 }
66
因为比较简单也没有添加什么注解...
不知我的理解是否有误,欢迎大虾们指正一下...
忙里偷闲,写了点东东...
要下去吃饭了...回来继续写代码...