下面的代码是利用Ajax实现在输入框中写入一个ID号,即时的从数据库中取得数据并在页面无刷新的情况下显示。
Ajax.aspx的代码:
<%
@
Page Language="C#" AutoEventWireup="true" CodeFile="Ajax.aspx.cs" Inherits="Activity_Ajax" %>
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
runat="server">
<title>Ajax
取参数title>
<script lang="javascript">
function
showHint()
{
var str = document.getElementById("txt1").value;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="AjaxService.aspx";
url=url+"?q="+str;
xmlHttp.onreadystatechange = updatePage;
xmlHttp.open("GET",url,true);
xmlHttp.send();
}
function GetXmlHttpObject()
{
var objXMLHttp=null;
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// IE
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return objXMLHttp;
}
function updatePage()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
script>
head
>
<
body
>
<form id="form1">
<div>
<input id="txt1" type="text" onkeyup="showHint()"/>
<p>
参数:<span id="txtHint">span>p>
div>
form>
body
>
html
>
后台什么都不需要。
这个页面请求的页面为AjaxService.aspx页面。该页面应该怎么写呢?
其实,最好的写法是:AjaxService.aspx什么都不要写,只有以下这一行:
<%
@
Page
Language="C#" AutoEventWireup="true" CodeFile="AjaxService.aspx.cs"
Inherits
="Activity_ AjaxService"
%>
后台代码为(
AjaxService.aspx.cs):
using
System;
using
System.Data;
using
System.Configuration;
using
System.Collections;
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 Activity_AjaxService : System.Web.UI.Page
{
Connection conn = new Connection();
string strSql;
protected void Page_Load(object sender, EventArgs e)
{
conn.Open();
strSql = "select * from GCGL.Parameter where id=";
string queryStr = Request.QueryString["q"];
if (queryStr != null || queryStr != "")
{
strSql = strSql + queryStr;
}
DataTable dt = conn.GetTable(strSql);
if (dt.Rows.Count > 0)
{
Response.Write(dt.Rows[0]["Content"].ToString());
}
}
}
这里用到了企业库,但只要修改部分程序就可以运行在本机上。
下面这张图是
GCGL.Parameter
表中的部分数据。
运行效果如下:
下面,再试试在AjaxService.aspx添加一些html代码。改为:
<%
@
Page Language="C#" AutoEventWireup="true" CodeFile="AjaxService.aspx.cs" Inherits="Activity_AjaxService" %>
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
runat="server">
<title>
无标题页title>
head
>
<
body
>
<form id="form1" runat="server">
<div>
div>
form>
body
>
html
>
这时再运行Ajax.aspx,发现程序报错,什么原因呢?数据的传送是没有问题的,因为开始的时候传送过来了,获取数据的代码都在AjaxService.aspx.cs中,我们并没有修改那里的代码。调试程序时,也发现是JavaScript的错误。我们将Ajax.aspx中下面这行:
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
改为:
document.getElementById("txtHint").innerText=xmlHttp.responseText;
程序运行效果为:
我想到这里大家一定知道了什么原因:responseText属性包含了从服务器返回的文字信息。这些信息其实就是所请求的页面。如果包括标签,那么在调用某个span的innerHTML()方法时,由于不能嵌套在
中,就会引发“未知运行期错误”。