菜单

Ajax级联菜单实例代码,XML实现服务器异步请求

2019年8月9日 - 前端排行

1.Ajax.html

 
在前面那篇笔记中使用ajax实现了向服务器发送一个input的value然后返回一个结果,这里我们再使用ajax来换取服务器的xml文件信息。

复制代码 代码如下:

  
很感谢w3cSchool给出的这么多好东西,然后就是记住ajax必须用到的XMLHttpRequest()方法,会点php,asp和vb(C#)的知识就可以了。当然这都是对我这种初学者来说的,如果需要搞点比较牛X的东东就比较难了。不废话了,开始我们的javascirpt通过vb脚本读取xml文件的ajax例子吧。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;


<html xmlns=”;
<head>
    <title>Ajax</title>
<script type=”text/javascript”>
    function loadXMLDoc(txt) {
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome,
Opera, Safari
4166am金沙下载,            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var citys = xmlhttp.responseText.split(‘,’);
                document.getElementById(“citys”).length = 1;
                for (i = 0; i < citys.length – 1; i++) {

 

                    document.getElementById(“citys”).add(new
Option(citys[i], citys[i]));
                }
                //               
document.getElementById(“myDiv”).innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open(“GET”,”ajax/getdata.aspx?pro=”+txt, true);
        xmlhttp.send();
    }
</script>
</head>
<body>

   首先我们会有个HTML文件包括dropdownlist和一个div。代码如下:

<h2>AJAX</h2>
    <select id=”Select1″ onchange=”loadXMLDoc(this.value)”>
        <option>请选择省份</option>
        <option value=”1″>江苏</option>
        <option value=”2″>上海</option>
    </select>
       <select id=”citys”>
        <option>请选择城市</option>
    </select>
<div id=”myDiv”></div>

<html> <head> <mce:script src=”selectcd.js”
mce_src=”selectcd.js”></mce:script> </head> <body>
<form> Select a CD: <select name=”cds”
onchange=”showCD(this.value)”> <option value=”Bob Dylan”>Bob
Dylan</option> <option value=”Bonnie Tyler”>Bonnie
Tyler</option> <option value=”Dolly Parton”>Dolly
Parton</option> </select> </form> <div
id=”txtHint”><b>CD info will be listed
here.</b></div> </body> </html>

</body>
</html>

可以看到它用到了selectcd.js文件。html文件中的div是作为从服务器请求过来的数据的容器。我们要实现的功能就是当用户在下拉列表’Select
a
CD’中选择一个选项时,<div>中显示不同的数据。内部机制是每当下拉列表的onchange事件发生时页面都会调用’showCD()’这个方法.

2.getdata.aspx.cs

下面是showCD()方法的代码:

复制代码 代码如下:

var xmlhttp function showCD(str) { xmlhttp=GetXmlHttpObject(); if
(xmlhttp==null) { alert (“Your browser does not support AJAX!”); return;
} var url=”getcd.asp”; url=url+”?q=”+str; url=url+”&sid=”+Math.random();
xmlhttp.onreadystatechange=stateChanged; xmlhttp.open(“GET”,url,true);
xmlhttp.send(null); } function stateChanged() { if
(xmlhttp.readyState==4) {
document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText; } }
function GetXmlHttpObject() { if (window.XMLHttpRequest) { // code for
IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if
(window.ActiveXObject) { // code for IE6, IE5 return new
ActiveXObject(“Microsoft.XMLHTTP”); } return null; }

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

这里的大部分功能在前面几篇文章都有介绍,值得注意的是当xmlhttp得readystate为4时也就是当请求已经完成时传回来的文本在txthint中显示,但是现实的格式是在服务器端通过vb脚本来控制的。下面这个asp文件显示了如何通过vb脚本来控制responseText的现实:

public partial class ajax_getdata : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string[] js=new string[]{“南京”,  “苏州”,  “常州” , “无锡”
,  “镇江”};
        string pro=Request.QueryString[“pro”];
        if (pro == “1”)
        {
            string temp = “”;
            for (int i = 0; i < js.Length; i++)
            {
                temp = temp + js[i];

<% response.expires=-1 q=request.querystring(“q”) set
xmlDoc=Server.CreateObject(“Microsoft.XMLDOM”) xmlDoc.async=”false”
xmlDoc.load(Server.MapPath(“cd_catalog.xml”)) set
nodes=xmlDoc.selectNodes(“CATALOG/CD[ARTIST='” & q & “‘]”) for each x
in nodes for each y in x.childnodes response.write(“<b>” &
y.nodename & “:</b> “) response.write(y.text)
response.write(“<br />”) next next %>

                temp = temp + “,”;

  
如果你仔细点就会发现前面的javascript返回的是一个string类型的,这就不怎么有意思了,应该返回个xml格式的该多好啊。呵呵,事实上确实可以返回个xml对象。下面就给个例子,这个例子是通过一个页面请求数据库的信息,先转化为xml格式的m然后再传输给DOM控件显示在页面上。

            }
            Response.Write(temp);
        }
        else
            Response.Write(“”);
    }
}

这个html页面和上面那个例子就不大一样了,这里先得定义好接受服务器传回来的xml文件的控件也就是那几个span。

复制代码 代码如下: !DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“” html
xmlns=”…

<html> <head> <mce:script src=”selectcustomer_xml.js”
mce_src=”selectcustomer_xml.js”></mce:script> </head>
<body> <form action=””> Select a Customer: <select
name=”customers” onchange=”showCustomer(this.value)”> <option
value=”ALFKI”>Alfreds Futterkiste</option> <option
value=”NORTS “>North/South</option> <option
value=”WOLZA”>Wolski Zajazd</option> </select>
</form> <b><span
id=”companyname”></span></b><br /> <span
id=”contactname”></span><br /> <span
id=”address”></span> <span
id=”city”></span><br/> <span
id=”country”></span> </body> </html>

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图