zoukankan      html  css  js  c++  java
  • 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异常");
    returnfalse;
    }

    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)]
    publicclass Handler1 : IHttpHandler
    {

    publicvoid 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(
    "恭喜你可以注册!");

    }

    }

    }

    publicbool IsReusable
    {
    get
    {
    returnfalse;
    }
    }
    }
    }

    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)]
    publicclass GetData : IHttpHandler
    {

    publicvoid 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('$'));
    }

    publicbool IsReusable
    {
    get
    {
    returnfalse;
    }
    }
    }
    }

    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)]
    publicclass todata : IHttpHandler
    {

    publicvoid 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(
    "评论失败,请重试!");
    }
    }
    }
    }

    publicbool IsReusable
    {
    get
    {
    returnfalse;
    }
    }
    }
    }

    前台显示:

    建立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
    {
    316px;
    height: 87px;
    }
    #Button1
    {
    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异常!");
    returnfalse;
    }
    //发送
    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)]
    publicclass Handler2 : IHttpHandler
    {

    publicvoid 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>");

    }
    }

    publicbool IsReusable
    {
    get
    {
    returnfalse;
    }
    }
    }
    }
  • 相关阅读:
    android之Toast多次提示延时处理
    android之双击返回键退出程序
    android之对话框“确定退出吗?”
    数组随机排序
    android全屏显示,去掉标题栏和信息栏
    android四大组件之service生命周期
    android四大组件之activity生命周期
    struct和union,enum分析
    const和volatile分析
    goto,void,extern,sizeof分析
  • 原文地址:https://www.cnblogs.com/happygx/p/2047406.html
Copyright © 2011-2022 走看看