下面分别是用DOM和HTTP实现AJAX的简单实例,希望对大家有所帮助!
一.JS文件
//LoadXml函数
function __ATLoadXml(vstrReq)
{
var root, source;
var sT;
status = 'searching, please wait....';
source = new ActiveXObject('Microsoft.XMLDOM');
source.async = false;
source.load(vstrReq);
//Check to see if there was an error parsing the response from the server
if (source.parseError != 0)
{
sT = 'XML Error...<br>reason:' + source.parseError.reason + '<br>';
sT += 'errorCode:' + source.parseError.errorCode + '<br>';
sT += 'filepos:' + source.parseError.filepos + '<br>';
sT += 'line:' + source.parseError.line + '<br>';
sT += 'linepos:' + source.parseError.linepos + '<br>';
sT += 'reason:' + source.parseError.reason + '<br>';
sT += 'srcText:' + source.parseError.srcText + '<br>';
sT += '<pre>' + source.xml + '</pre><br>';
alert(sT);
status = 'XML Error!';
}
else
{
root = source.documentElement; //Get a reference to root XML object
status = 'Done';
return root;
}
}
//用DOM—XML方式帮定下拉框
function GetDom_Dt()
{
var strpass="Default.aspx?senderCtl=DOM_dt";
var objDrp=document.getElementById("dpDom");
var vntRetArray=__ATLoadXml(strpass)
if(typeof(vntRetArray)=='object')
{
BindListCtl(objDrp,vntRetArray.getElementsByTagName('Dom_Dt'),true);
}
}
//绑定下拉框函数
function BindListCtl(oCtlDrp,XmlNodeList,IsFirstSpace)
{
oCtlDrp.options.length=0;
if(IsFirstSpace)
{
oCtlDrp.options.add(new Option('',''));
}
for(var i=0;i<XmlNodeList.length;i++)
{
var node=XmlNodeList(i).childNodes;
oCtlDrp.options.add(new Option(node.item(1).text , node.item(0).text));
}
}
//初始化HTTP對象
function GetXmlHttpRequest()
{
var A=null;
try
{
A=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
A=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
{
A=null;
}
}
if(!A && typeof XMLHttpRequest != "undefined")
{
A=new XMLHttpRequest();
}
return A;
}
//用HTTP方式绑定下拉框
function GetHTTP()
{
document.getElementById("dpHttp").options.length=0;
var xmlhttp = GetXmlHttpRequest();
var weburl="Default.aspx?senderCtl=Http_string";
xmlhttp.open("Post",weburl,false);
xmlhttp.send("");
var returns=xmlhttp.responseText;
if(returns!=""&&returns!=null)
{
var tempxmlRtn=returns.replace('<ID>','').replace('</ID>','');
var arrayList =tempxmlRtn.split("**");
var arrayValue =new Array();
for(i=0;i<arrayList.length;i++)
{
arrayValue=arrayList[i].split("##");
document.getElementById("dpHttp").options[i+1]=new Option(arrayValue[1],arrayValue[0]);
arrayValue[0]="";
arrayValue[1]="";
}
document.getElementById("dpHttp").options[0]=new Option("","");
document.getElementById("dpHttp").value="";
}
}
//Dom读曲XML的节点值
function GetDom_Nodes()
{
document.getElementById("txtDom").value="";
var strpass="Default.aspx?senderCtl=DOM_Node";
var vntRetArray=__ATLoadXml(strpass);
if(typeof(vntRetArray)=='object')
{
var strState=fnGetSingleNodeValue(vntRetArray,"//bookstore//book//author");
document.getElementById("txtDom").value=strState;
}
}
//读取节点的函数
function fnGetSingleNodeValue(XmlDoc,NodeName)
{
var strResult="";
try
{
strResult=XmlDoc.selectSingleNode(NodeName).text;
}
catch(oc)
{
alert(e.message);
}
return strResult;
}
//处理AJAX类型函数
function GetType()
{
if(document.getElementById("rdoA").checked==true)
{
GetDom_Dt();
document.getElementById("txtDom").value="";
document.getElementById("dpHttp").options.length=0;
document.getElementById("dpHttp").options.add(new Option('',''));
}
else if(document.getElementById("rdoB").checked==true)
{
GetDom_Nodes()
document.getElementById("dpDom").options.length=0;
document.getElementById("dpDom").options.add(new Option('',''));
document.getElementById("dpHttp").options.length=0;
document.getElementById("dpHttp").options.add(new Option('',''));
}
else if(document.getElementById("rdoC").checked==true)
{
GetHTTP();
document.getElementById("dpDom").options.length=0;
document.getElementById("dpDom").options.add(new Option('',''));
document.getElementById("txtDom").value="";
}
}
二.前台文件(.aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html>
<head id="Head1" runat="server">
<title>未命名頁面</title>
<script language="javascript" type="text/jscript" src="ajax.js" ></script>
</head>
<body>
<form id="form1" runat="server" method="post">
<table>
<tr>
<td>
<asp:RadioButton ID="rdoA" runat="server" GroupName="1" Text="DOM-讀取table" />
</td>
<td>
<asp:DropDownList ID="dpDom" runat="server"></asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:RadioButton ID="rdoB" runat="server" GroupName="1" Text="DOM-讀取節點" />
</td>
<td>
<asp:TextBox ID="txtDom" runat="server" ReadOnly="true" ></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:RadioButton ID="rdoC" runat="server" GroupName="1" Text="HTTP-返回字串" />
</td>
<td>
<asp:DropDownList ID="dpHttp" runat="server"></asp:DropDownList>
</td>
</tr>
</table>
</form>
</body>
</html>
三.后台文件(.cs)
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
#region 公用函数
protected void Page_Load(object sender, EventArgs e)
{
if (Ajax() == true)
{
return;
}
//注册JS
this.AddJS();
}
/// <summary>
/// 注册JS
/// </summary>
private void AddJS()
{
this.rdoA.Attributes.Add("onclick", "javascript:GetType();");
this.rdoB.Attributes.Add("onclick", "javascript:GetType();");
this.rdoC.Attributes.Add("onclick", "javascript:GetType();");
}
/// <summary>
/// 处理AJAX事件
/// </summary>
/// <returns></returns>
private bool Ajax()
{
bool Return = false;
string senderCtl = "";
if (Request["senderCtl"] != null)
{
senderCtl = Request["senderCtl"].ToString().Trim();
switch (senderCtl)
{
case "DOM_dt": //使用DOM返回DT的XML
Response.Write(this.GetDom_Dt());
break;
case "DOM_Node"://使用DOM返回XML文件
Response.Write(this.GetXmlDoc());
break;
case "Http_string"://使用HTTP返回字串
Response.Write(this.GetHttp_string());
break;
default: break;
}
Response.Flush();
Response.Close();
Return = true;
}
else
{
Return = false;
}
return Return;
}
/// <summary>
/// 创建一个DataTable
/// </summary>
/// <returns></returns>
private DataTable Setdt()
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("ID"));
dt.Columns.Add(new DataColumn("VALUE"));
for (int i = 0; i < 3; i++)
{
DataRow dr = dt.NewRow();
dr["ID"] = i.ToString();
dr["VALUE"] = "test_" + i.ToString();
dt.Rows.Add(dr);
}
return dt;
}
#endregion
#region 使用DOM返回DT的XML
private string GetDom_Dt()
{
string strXML = "<?xml version=" + Convert.ToChar(34) + "1.0" + Convert.ToChar(34) + " ?>";
DataTable Dom_dt = this.Setdt();
DataSet ds = new DataSet("AJAX");
ds.Tables.Add(Dom_dt);
ds.Tables[0].TableName = "Dom_Dt";
strXML += ds.GetXml();
return strXML;
}
#endregion
#region 使用DOM返回XML文件
private string GetXmlDoc()
{
string strValue = "<?xml version=" + Convert.ToChar(34) + "1.0" + Convert.ToChar(34) + " ?>";
strValue += "<bookstore>";
strValue += " <book>";
strValue += "<title>Harry Potter</title> ";
strValue += "<author>J K. Rowling</author> ";
strValue += " </book>";
strValue += "</bookstore>";
return strValue;
}
#endregion
#region 使用HTTP返回字串
private string GetHttp_string()
{
string strValue = "<ID>";
string strLink = "";
DataTable Http_dt = this.Setdt();
for(int i=0;i<Http_dt.Rows.Count;i++)
{
strValue += strLink;
strValue += Http_dt.Rows[i]["ID"] .ToString()+ "##";
strValue+= Http_dt.Rows[i]["VALUE"].ToString();
strLink = "**";
}
strValue += "</ID>";
return strValue;
}
#endregion
}
