初步学习Ajax,希望能给还没入门的人带来一些帮助。
------------------------------------------------------------------------------------------------------------------------------------------
*.html文件
------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<script language="java" type="text/javascript">
//Ajax 开始 by xu 2007-9-17*/
var http = getHTTPObject();
function handleHttpResponse()
{
if(http.readyState == 4)
{
if(http.status == 200)
{
var xmlDocument = http.responseXML;
if(http.responseText!="")
{
document.getElementById("showStr").style.display = "";
document.getElementById("userName").style.background= "#FF0000";
document.getElementById("showStr").innerText = http.responseText;
}
else
{
document.getElementById("userName").style.background= "#FFFFFF";
document.getElementById("showStr").style.display = "none";
}
}
else
{
alert("你所请求的页面发生异常,可能会影响你浏览该页的信息!");
alert(http.status);
}
}
}
function chkUser(){
var url = "ajaxCheckUserName.aspx";
var name = document.getElementById("userName").value;
url += ("?userName="+name);
// window.open(url,"",width="300",height="300");
http.open("GET",url,true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
return ;
}
function chkComNm()
{
var url = "/ajaxCheckUserName.aspx";
var name = document.getElementById("comNm").value;
url += ("&userName="+name+"&oprate=chkCom");
http.open("GET",url,true);
http.onreadystatechange = handleHttpResponse1;
http.send(null);
return ;
}
//该函数可以创建我们需要的XMLHttpRequest对象
function getHTTPObject()
{
var xmlhttp = false;
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
if(xmlhttp.overrideMimeType)
{
xmlhttp.overrideMimeType('text/xml');
}
}
else
{
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xmlhttp = false;
}
}
}
return xmlhttp;
}
</script>
</head>
<body>
<table width="400" border="0" cellpadding="1" cellspacing="1" align="center" >
<tr>
<td><font color="red"> *</font>"</td>
<td>用户帐号:</td>
<td>
<input type="text" name="userName" maxlength="20" style="background:#FFFFFF" οnblur="chkUser()" value="" />
<div id="showStr" style="background-color:#FF9900;display:none"></div>
<div id="comNmStr" style="background-color:#FF9900;display:none"></div>
</td>
</tr>
</table>
</body>
--------------------------------------------------------------------------------------------------------------------------------------
ajaxCheckUserName.aspx.cs文件
--------------------------------------------------------------------------------------------------------------------------------------
public partial class ajaxCheckUserName : System.Web.UI.Page
{
string userName = "";
protected void Page_Load(object sender, EventArgs e)
{
userName=Request.QueryString["userName"].ToString();
validateUser(userName);
}
public void validateUser( string userName)
{
using(SqlConnection conn=new SqlConnection(System.Configuration.ConfigurationManager.AppSettings["users"].ToString()))
{
conn.Open();
SqlCommand cmd=new SqlCommand("select * from userInfo where userName='" + userName +"'" );
cmd.Connection = conn;
if (cmd.ExecuteScalar() != null)
{
Response.Write("用户已存在");
}
else
{
Response.Write("恭喜你,可以注册");
}
}
}
}
------------------------------------------------------------------------------------------------------------------------------------------
*.html文件
------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<script language="java" type="text/javascript">
//Ajax 开始 by xu 2007-9-17*/
var http = getHTTPObject();
function handleHttpResponse()
{
if(http.readyState == 4)
{
if(http.status == 200)
{
var xmlDocument = http.responseXML;
if(http.responseText!="")
{
document.getElementById("showStr").style.display = "";
document.getElementById("userName").style.background= "#FF0000";
document.getElementById("showStr").innerText = http.responseText;
}
else
{
document.getElementById("userName").style.background= "#FFFFFF";
document.getElementById("showStr").style.display = "none";
}
}
else
{
alert("你所请求的页面发生异常,可能会影响你浏览该页的信息!");
alert(http.status);
}
}
}
function chkUser(){
var url = "ajaxCheckUserName.aspx";
var name = document.getElementById("userName").value;
url += ("?userName="+name);
// window.open(url,"",width="300",height="300");
http.open("GET",url,true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
return ;
}
function chkComNm()
{
var url = "/ajaxCheckUserName.aspx";
var name = document.getElementById("comNm").value;
url += ("&userName="+name+"&oprate=chkCom");
http.open("GET",url,true);
http.onreadystatechange = handleHttpResponse1;
http.send(null);
return ;
}
//该函数可以创建我们需要的XMLHttpRequest对象
function getHTTPObject()
{
var xmlhttp = false;
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
if(xmlhttp.overrideMimeType)
{
xmlhttp.overrideMimeType('text/xml');
}
}
else
{
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
xmlhttp = false;
}
}
}
return xmlhttp;
}
</script>
</head>
<body>
<table width="400" border="0" cellpadding="1" cellspacing="1" align="center" >
<tr>
<td><font color="red"> *</font>"</td>
<td>用户帐号:</td>
<td>
<input type="text" name="userName" maxlength="20" style="background:#FFFFFF" οnblur="chkUser()" value="" />
<div id="showStr" style="background-color:#FF9900;display:none"></div>
<div id="comNmStr" style="background-color:#FF9900;display:none"></div>
</td>
</tr>
</table>
</body>
--------------------------------------------------------------------------------------------------------------------------------------
ajaxCheckUserName.aspx.cs文件
--------------------------------------------------------------------------------------------------------------------------------------
public partial class ajaxCheckUserName : System.Web.UI.Page
{
string userName = "";
protected void Page_Load(object sender, EventArgs e)
{
userName=Request.QueryString["userName"].ToString();
validateUser(userName);
}
public void validateUser( string userName)
{
using(SqlConnection conn=new SqlConnection(System.Configuration.ConfigurationManager.AppSettings["users"].ToString()))
{
conn.Open();
SqlCommand cmd=new SqlCommand("select * from userInfo where userName='" + userName +"'" );
cmd.Connection = conn;
if (cmd.ExecuteScalar() != null)
{
Response.Write("用户已存在");
}
else
{
Response.Write("恭喜你,可以注册");
}
}
}
}