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;
    }
    }
    }
    }
  • 相关阅读:
    MongoDB 释放磁盘空间 db.runCommand({repairDatabase: 1 })
    RK 调试笔记
    RK Android7.1 拨号
    RK Android7.1 移植gt9271 TP偏移
    RK Android7.1 定制化 itvbox 盒子Launcher
    RK Android7.1 双屏显示旋转方向
    RK Android7.1 设置 内存条作假
    RK Android7.1 设置 蓝牙 已断开连接
    RK Android7.1 进入Camera2 亮度会增加
    RK 3128 调触摸屏 TP GT9XX
  • 原文地址:https://www.cnblogs.com/happygx/p/2047406.html
Copyright © 2011-2022 走看看