您的位置：首页 > Web前端 > JavaScript

js的ajax做的省市联动

2015-01-15 10:06 169 查看 
xml写法
<?xml version="1.0" encoding="utf-8" ?>
<shengs>
<陕西>
<city>西安</city>
<city>咸阳</city>
</陕西>
<河南>
<city>郑州</city>
<city>洛阳</city>
</河南>
</shengs>
jsp页面写法
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>省市联动</title>
<script language="javascript" type="text/javascript">

var xmlHttp = null;
var objXML;

function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
}
else
{
xmlHttp = new XMLHttpRequest();
}

}

function work()
{
if (xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
objXML = xmlHttp.responseXML;
showSheng();
}
else
{
alert("服务器返回错误");
}
}
}

function showSheng()
{
var shengList = objXML.getElementsByTagName("shengs");
for(var i=0;i<shengList[0].childNodes.length;i++)
{
document.getElementById("SelectSheng").options.add(new Option(shengList[0].childNodes[i].nodeName,shengList[0].childNodes[i].nodeName));
//给select标签加入选项
//select标签对象.options.add(new Option(文本,值))
}
showShi();
//     var selectSheng = document.createElement("select");
//     selectSheng.onchange = showShi;
}

function showShi()
{
var shiList = objXML.getElementsByTagName(document.getElementById("SelectSheng").value);
document.getElementById("SelectShi").options.length=0;
//清空select标签下的选项
//select标签对象.options.length= 0
for (var i=0;i<shiList[0].childNodes.length;i++)
{
document.getElementById("SelectShi").options.add(new Option(shiList[0].childNodes[i].firstChild.nodeValue,i));
}
}

function getContent()
{
createXMLHttpRequest();
if (xmlHttp == null)
{
alert("xmlHttp对象没有创建");
}
else
{
xmlHttp.onreadystatechange = work;
xmlHttp.open("GET","shengshi.xml",true);
xmlHttp.send();
}
}
</script>
</head>

<body onload="getContent()">
<form id="form1" runat="server">
<div>
<select id="SelectSheng" onchange="showShi()"></select>
<select id="SelectShi"></select>
</div>
</form>
</body>
</html>

javascript的window.ActiveXObject对象，区别浏览器的方法
(window.ActiveXObject)的作用，用来判断浏览器是否支持ActiveX控件，如果支持ActiveX控件，我们可以利用var xml=new ActiveXObject("Microsoft.XMLHTTP")的形式来创建XMLHTTPRequest对象（这是在IE7以前的版本中）。在较新的IE版本中可以利用var xml=new ActiveXObject("Msxml2.XMLHTTP")的形式创建XMLHttpRequest对象；而在IE7及非IE浏览器中可以利用var xml=new XMLHttpRequest()创建XMLHttpRequest对象。因此我们在创建这个对象的时候必须得考虑浏览器的兼容问题。

然后是XMLHTTPRequest的区别

我们这里来看看这里是怎么使用它。在使用XMLHTTPRequest对象发送请求和处理响应之前，我们必须要用javascript创建一个XMLHTTPRequest对象。（IE把XMLHTTPRequest实现为一个ActiveX对象，其他的浏览器[如Firefox/Safari/Opear]则把它实现为一个本地的javascript对象）。下面我们就来看看具体怎么运用javascript来创建它吧：

<script language="javascript" type="text/javascript">
<!--
var xmlhttp;    // 创建XMLHTTPRequest对象
function createXMLHTTPRequest(){
if(window.ActiveXObject){ // 判断是否支持ActiveX控件
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // 通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象
}
else if(window.XMLHTTPRequest){ // 判断是否把XMLHTTPRequest实现为一个本地javascript对象
xmlhttp = new XMLHTTPRequest(); // 创建XMLHTTPRequest的一个实例（本地javascript对象）
}
}
//-->
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航