Ajax

1,用ajax做注册页面用户名提示

加入已经存在相同用户名，则提示用户，不存在则提示用户可以注册

前台代码：

View Code

<% @ Page Language = " C# " AutoEventWireup = " true " CodeBehind = " Default.aspx.cs " Inherits = " Ajax._Default " %>

<! 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 id = " Head1 " runat = " server " >
< title ></ title >

< script type = " text/javascript " >
function sa() {
var a = document.getElementById( " Text1 " ).value;

var httphtml = new ActiveXObject( " Microsoft.XMLHTTP " );
if ( ! httphtml) {
alert( " httphtml异常 " );
return false ;
}

httphtml.open( " POST " , " Handler1.ashx?name= " + encodeURI(a), false );
httphtml.onreadystatechange = function() {
if (httphtml.readyState == 4 ) {
// 状态码是200则成功
if (httphtml.status == 200 ) {
// 将ajax请求处理后返回的值显示出来
document.getElementById( " div " ).innerHTML = httphtml.responseText;
alert(a);
} else {
alert( " ajax请求错误！ " );
}
}

}
httphtml.send();
}

</ script >

</ head >
< body >
< form id = " form1 " runat = " server " >
< div >
< table >
< tr >
< td >
< input id = " Text1 " type = " text " onblur = " sa() " />
</ td >
</ td >
</ tr >
< tr >
</ tr >
</ table >
< div id = " div " >
</ div >
< input id = " Button1 " type = " button " value = " button " />
</ div >
</ form >
</ body >
</ html >

处理请求的httphandler的页面：

View Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;
using System.Configuration;

namespace Ajax
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Handler1 : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = " text/plain " ;
// 接收ajax请求的参数值
string name = context.Request[ " name " ];
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings[ " learning " ].ConnectionString))
{
conn.Open();
using (SqlCommand cmd = conn.CreateCommand())
{
cmd.CommandText = string .Format( " select username from Users where username='{0}' " , name);
int i = cmd.ExecuteNonQuery();
if (i > 1 )
{
// 返回提示信息
context.Response.Write( " 数据库存在重复数据 " );
}
if (i == 1 )
{
context.Response.Write( " 此用户名以注册！ " );
}

context.Response.Write( " 恭喜你可以注册！ " );

}

}

}

public bool IsReusable
{
get
{
return false ;
}
}
}
}

2，Ajax无刷新评论：

主要是用ajax将用户的评论信息返回到httphandler页面进行无刷新处理，存入数据库，之后再用Dom动态加载的形式将用户评论内容加载到页面，

这样就实现了无刷新评论功能

首先建立两个httphandler页面，一个“Global.asax”拼接显示已有评论信息，一个“todata.ashx”将心评论信息存入数据库并返回是否插入成功

Global.asax：

View Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;

namespace Ajax
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class GetData : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = " text/plain " ;
StringBuilder bur = new StringBuilder();
// 将原始评论信息逐行读取并以"|"分隔每列，以"$"分隔每行
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings[ " Learning " ].ConnectionString))
{
conn.Open();
using (SqlCommand cmd = conn.CreateCommand())
{
cmd.CommandText = " select * from T_post " ;
SqlDataReader reader = cmd.ExecuteReader();
while (reader.Read())
{
// 将所有信息拼接起来
bur.Append(reader.GetSqlString( 1 )).Append( " | " ).Append(reader.GetSqlString( 2 )).Append( " | " ).Append(reader.GetSqlDateTime( 3 )).Append( " $ " );

}
}
}
// 将拼接起来的数据去掉最后一个"$"符号返回
context.Response.Write(bur.ToString().Trim( ' $ ' ));
}

public bool IsReusable
{
get
{
return false ;
}
}
}
}

todata.ashx：

View Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Text;
using System.Data.SqlClient;
using System.Configuration;

namespace Ajax
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class todata : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = " text/plain " ;
// 取得ajax返回的评论信息插入数据库
string mas = context.Request[ " msg " ];
using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings[ " Learning " ].ConnectionString))
{
conn.Open();
using (SqlCommand cmd = conn.CreateCommand())
{
cmd.CommandText = string .Format( " insert into T_post(IpAdd,Msg,Date) values('{0}','{1}','{2}') " , context.Request.UserHostAddress, mas, DateTime.Now);
int i = cmd.ExecuteNonQuery();
if (i >= 0 )
{
context.Response.Write( " 评论成功! " );
}
else
{
context.Response.Write( " 评论失败，请重试! " );
}
}
}
}

public bool IsReusable
{
get
{
return false ;
}
}
}
}

前台显示：

建立html静态页面

View Code

<! 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 >
< title ></ title >

< script src = " js/jquery-1.4.2.js " type = " text/javascript " ></ script >

< script type = " text/javascript " >
// 用javascript显示ajax信息


// 当按钮点击是用ajas将数据返回到httphandler页面进行处理
function sa() {
var ms = document.getElementById( " TextArea1 " ).value;
var Xmlhttp = new ActiveXObject( " Microsoft.XMLHTTP " );
if ( ! Xmlhttp) {
alert( " http异常 " );
return ;
}
Xmlhttp.open( " POST " , " todata.ashx?msg= " + encodeURI(ms), false );
Xmlhttp.onreadystatechange = function() {
if (Xmlhttp.readyState == 4 ) {
if (Xmlhttp.status == 200 ) { /// /状态码是200则成功
// 将成功信息返回到ajax显示
alert(Xmlhttp.responseText);
// javascript添加
// var li = document.createElement("li");
// li.innerText = "IP地址是：127.0.0.1" + "内容是：" + ms + "发布日期：" + new Date();
// document.getElementById("comm").appendChild(li);

/// / //jquery添加我建议用jquery添加，
// 动态拼接显示用户信息
var child = " <li>IP地址是：127.0.0.1 " + " 内容是： " + ms + " 发布日期： " + new Date() + " </li> "
$( " #comm " ).append(child);
}
else {
alert( " ajax错误！ " );
}
}
}
Xmlhttp.send();
}
// 用jquery显示ajax信息

// 当页面加载时动态的将数据库信息从GetData.ashx拼接好返回到ajax动态加载显示
$(function() {
$.post( " GetData.ashx " , function(data, status) {
// data为返回的数据，status为ajax的请求状态，success为ajax成功

if (status != " success " ) {
$( " #comm " ).appand( " <li>加载失败</li> " );
return ;
}
// 因为从数据库读取是已经将每行数据以"$"分隔。将每列数据一"|"分隔
// 将数据一"$"分隔遍历每行
var lines = data.split( " $ " );
for (var i = 0 ; i < lines.length; i ++ ) {
// 将每行数据一"|"分隔遍历每列
var line = lines[i];
var filed = line.split( " | " );
// 拼接显示
var commen = $( " <li>IP地址是： " + filed[ 0 ] + " 内容是： " + filed[ 1 ] + " 发布日期： " + filed[ 2 ] + " </li> " );
$( " #comm " ).append(commen);
}
});
});
</ script >

< style type = " text/css " >
#TextArea1
{
width: 316px;
height: 87px;
}
#Button1
{
width: 70px;
}
</ style >
</ head >
< body >
< ul id = " comm " >
</ ul >
< p >
< textarea id = " TextArea1 " name = " S1 " ></ textarea ></ p >
< p >
< input id = " Button1 " type = " button " value = " 评论 " onclick = " sa() " /></ p >
</ body >
</ html >

3,前台ajax想服务器端返回xml对象，服务器端接收处理，并且想ajax返回处理后的xml

好处是数据量没有限制，而且安全

前台：

View Code

<% @ Page Language = " C# " AutoEventWireup = " true " CodeBehind = " AjaxXml.aspx.cs " Inherits = " 注册.AjaxXml " %>

<! 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 >
< script type = " text/javascript " >

function Load() {
// 创建xml
sXML = " <?xml version=\"1.0\" encoding=\"gb2312\" ?> " ;
sXML += " <Info> " ;
sXML += " <kcid>11</kcid> " ;
sXML += " <ksfs>0</ksfs> " ;
sXML += " <tgfs>0</tgfs> " ;
sXML += " <kspd>zy</kspd> " ;
sXML += " </Info> " ;
// 创建xmldocument对象
xmlDocument = new ActiveXObject( " Msxml2.DOMDocument " );
xmlDocument.async = false ;
// 将创建的xml加入到xmldocument中
xmlDocument.loadXML(sXML);

// =========================================================
// 定义xmlhttp协议
var XmlHTTP = new ActiveXObject( " Microsoft.XMLHTTP " );
if ( ! XmlHTTP) {
alert( " ajax异常！ " );
return false ;
}
// 发送
XmlHTTP.open( " POST " , " Handler2.ashx " , false );
XmlHTTP.onreadystatechange = function() {
if (XmlHTTP.readyState == 4 ) {
if (XmlHTTP.status == 200 ) {
// 如果发送成功,则接收服务端返回的xml对象，首先定义xmldom协议
xdDoc = new ActiveXObject( " Microsoft.XMLDOM " );
xdDoc.async = false ;
// 将返回的xml加载到对象中
xdDoc.loadXML(XmlHTTP.ResponseText);
// 获取返回对象getip节点的值
var x = xdDoc.getElementsByTagName( " getIp " )[ 0 ].childNodes[ 0 ].nodeValue;

alert(x);
}
else {
alert( " ajax错误 " );
}
}
}
// 将xmldocument对象发送到服务端
XmlHTTP.send(xmlDocument);
}
</ script >
</ head >
< body onload = " Load() " >
< form id = " form1 " runat = " server " >
< div >

</ div >
</ form >
</ body >
</ html >

服务器端：

View Code

using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.IO;
using System.Xml;

namespace 注册
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Handler2 : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = " text/plain " ;
string ip = "" ;
try
{
context.Response.Write( " <?xml version='1.0' encoding='gb2312' ?> " );
context.Response.Write( " <getIp> " );

// //处理从ajax返回的Xml，此处没用 // /
// 定义xml对象
XmlDocument xmlDoc = new XmlDocument();
// 接收前台返回的xml对象
xmlDoc.Load(context.Request.InputStream);
// 将xml对象转换为io流（注：必须）
StringReader reader = new StringReader(xmlDoc.InnerXml.ToString());
DataSet ds = new DataSet();
// 将io流加入DataSet
ds.ReadXml(reader);
// 获取返回的xml中kspd的值
ip = ds.Tables[ 0 ].Rows[ 0 ][ " kspd " ].ToString();
/ //

context.Response.Write(ip);
context.Response.Write( " </getIp> " );


}
catch
{
context.Response.Write( " <?xml version='1.0' encoding='gb2312' ?> " );
context.Response.Write( " <getIp> " );
context.Response.Write( " 大哥，我错了！哈哈哈！ " );
context.Response.Write( " </getIp> " );

}
}

public bool IsReusable
{
get
{
return false ;
}
}
}
}

转载于:https://www.cnblogs.com/happygx/archive/2011/05/16/2047406.html