AJAX初探-XMLHTTP与服务端交互的小示例修正

现在的位置: 首页 > 综合 > 正文

AJAX初探-XMLHTTP与服务端交互的小示例修正

2012年09月24日 ⁄ 综合 ⁄ 共 5052字 ⁄ 字号小中大 ⁄ 评论关闭

为何标题为修正，主要因为大部分代码来自于网上的摘抄，由于抄来的代码本人调试之后始终不能另我满意，找了DOM的相关资料，终于修正了该示例，修正之处在代码中有注释，其实就是一个取值方式的小错误而已。该示例的功能是通过AJAX来实现无刷新的下拉框联动（同数据库交互）。

首先上主菜AjaxExa1_a.aspx

<%@ Page Language="C#" AutoEventWireup="true" Codebehind="AjaxExa1_a.aspx.cs" Inherits="TestScript.AjaxExa1_a" %>

<!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">
    var xmlHttp;

function SetBList(){
var avalue = document.getElementById("AList").value;

        var url = "AjaxExa1_b.aspx?Avalue=" + avalue;
        createXMLHttpRequest();  // 创建xmlHttp对象
        xmlHttp.onreadystatechange = handleStateChange;  // 当xmlHttp状态码发生改变时，调用handleStateChage方法
        xmlHttp.open("GET", url, true);   // GET方法发送请求
        xmlHttp.send(null);
    }

    function BListInitial(){
        // 先清空一下BList的option
        clearBList();

        var blist = document.getElementById("BList");  // 获取BList对象
        var rs = xmlHttp.responseXML.getElementsByTagName("City");  // 从返回xml文档中，读取<City>标签的数据
        // 这个循环取值的地方，卡了我一会，将xmlHttp.responseXML创建成一个xml文档，然后找读文档的方法，但问题是不同浏览器创建xml文档的方法不一样
        for(var i=0;i<rs.length;i++) {
            var option = document.createElement("OPTION");
            /**************LIFY修改_START**************/
            option.text = rs[i].getElementsByTagName("CityName")[0].firstChild.data;
            option.value = rs[i].getElementsByTagName("CityCode")[0].firstChild.data;
            /**************LIFY修改_END**************/
            blist.options.add(option);
        }
    }

    function clearBList(){
        var ven = document.getElementById("BList");
        while(ven.options.length > 0)
            ven.removeChild(ven.childNodes[0]);
    }

    function handleStateChange(){
        if(xmlHttp.readyState == 4){
            if(xmlHttp.status == 200) {
                BListInitial();
            }
        }
    }

    function createXMLHttpRequest(){
        // IE
        if (window.ActiveXObject){
            xmlHttp = new ActiveXObject("MSXML2.XMLHTTP.3.0");
        }
        // Mozilla
        else if (window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest();
        }
    }
    </script>
</head>
<body>
    <form id="Form1" method="post" runat="server">
        <select id="AList" onchange="SetBList()">
            <option value="0">A</option>
            <option value="1">B</option>
            <option value="3">C</option>
        </select>
        <select id="BList">
        </select>
    </form>
</body>
</html>

与数据库交互的界面AjaxExa1_b.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxExa1_b.aspx.cs" Inherits="TestScript.AjaxExa1_b" %>

后台代码

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;
using System.Data.SqlClient;

namespace TestScript
{
    public partial class AjaxExa1_b : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string Avalue = "";
            string strSql = "select CityName,CityCode from City ";
            if (this.Request.QueryString["Avalue"] != null)
                Avalue = this.Request.QueryString["Avalue"].ToString();

            DataSet ds = new DataSet();
            ConnectionClass cc = new ConnectionClass();
            if (Avalue != "")
                strSql += "where Avalue = " + Avalue;
            SqlDataAdapter sd = new SqlDataAdapter(strSql, cc.getConn());
            sd.Fill(ds, "city");
            DataTable dt = ds.Tables["city"];

            string xml = "<Data>";
            foreach (DataRow row in dt.Rows)
            {
                xml += "<City>";
                xml += "<CityName>" + row["CityName"] + "</CityName>";
                xml += "<CityCode>" + row["CityCode"] + "</CityCode>";
                xml += "</City>";
            }
            xml += "</Data>";

            //  清页面格式，写xml
            Response.ClearContent();
            Response.Cache.SetNoStore();
            Response.ContentType = "text/xml";
            Response.ContentEncoding = System.Text.Encoding.UTF8;
            Response.Write(xml);
        }
    }
}

ConnectionClass cc = new ConnectionClass();此类为本人构造的连接字符串类，各位可以用自己的方式来连接数据库。

然后再点辅料--数据表表结构如下:

CREATE TABLE [City] (
    [CityName] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
    [CityCode] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NOT NULL ,
    [Avalue] [int] NULL ,
    CONSTRAINT [PK_City] PRIMARY KEY  CLUSTERED
    (
        [CityCode]
    )  ON [PRIMARY]
) ON [PRIMARY]
GO

表记录此处为了各位学习方便也给出：

insert [City] (CityName,CityCode,Avalue)  values ( '太原','001',0)
insert [City] (CityName,CityCode,Avalue)  values ( '石家庄','002',0)
insert [City] (CityName,CityCode,Avalue)  values ( '北京','003',1)
insert [City] (CityName,CityCode,Avalue)  values ( '海口','004',3)
insert [City] (CityName,CityCode,Avalue)  values ( '乌兰巴托','005',3)

最后编译就看各位的了，代码中也都有注释，就不详解了！祝各位吃的开心

【上篇】使用IConfigurationSectionHandler在web.config中增加自定义配置
【下篇】log4net 对配置的ConnectionString 进行加密

作者: hongtong8

该日志由 hongtong8 于12年前发表在综合分类下，最后更新于 2012年09月24日.
转载请注明: AJAX初探-XMLHTTP与服务端交互的小示例修正 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

AJAX初探-XMLHTTP与服务端交互的小示例修正

作者: hongtong8

书签

最新文章New

本站推荐

返回首页