一直用jQuery库,如果不用,还会使用Ajax吗?
参考书:1.PHP与jQuery开发实例;2.Ajax基础教程 (图灵程序设计丛书就是好)
把书1里jQuery代码换成原生JS,实例1是选择省份出现城市列表,实例2改成了联动下拉框。
一、实例1
html代码:
<form> <p> <label for="province">省份:</label> <select id="choice" name="province"> <option value="">请选择</option> <option value="JiangSu">江苏省</option> <option value="AnHui">安徽省</option> </select> </p> <div id="result"></div> </form>
js代码:
var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } }
function doSearch(event) { var province = document.getElementById("choice").value; createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", "data.php?province="+province, false); xmlHttp.send(null); }
//也常取名callBack function handleStateChange() { if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ parseResults(); } } } function parseResults() { document.getElementById("result").innerHTML = xmlHttp.responseText; }
//下拉框值改变出发事件 var evtObject = document.getElementById("choice"); if(evtObject.addEventListener){ evtObject.addEventListener("change",doSearch,false); } else if(evtObject.attachEvent){ evtObject.attachEvent("onchange",doSearch); }
PHP代码:
<?php if($_GET['province']=='JiangSu'){ $citys = array('南京', '苏州','南通','无锡'); echo getHTML($citys); } else if($_GET['province']=='AnHui'){ $citys = array('合肥', '芜湖','黄山','宣城'); echo getHTML($citys); } function getHTML($citys){ $strResult = '<ul>'; for($i=0; $i<count($citys); $i++){ $strResult.='<li>'.$citys[$i].'</li>'; } $strResult.='</ul>'; return $strResult; } ?>
插曲:原书实例中result是<p id="result"></p>,结果在ie6下 innerHTML 报错,所以换成了div。
二、联动下拉框
XMLHttpRequest对象提供了2个可以用来访问服务器响应的属性:1. responseText; 2. responseXML。
第二个实例采用从XML文件中读取数据。
XML代码
<?xml version="1.0" encoding="UTF-8"?> <provinces> <province index="1" name="JiangSu"> <name>江苏</name> <citys> <city>南京</city> <city>苏州</city> <city>南通</city> <city>无锡</city> </citys> </province> <province index="2" name="AnHui"> <name>安徽</name> <citys> <city>合肥</city> <city>芜湖</city> <city>黄山</city> <city>宣城</city> </citys> </province> </provinces>
PHP代码:
<?php header("Content-Type: text/xml"); //必须指明,responseXML才能接收 libxml_use_internal_errors(true); //抑制xml错误,便于代码自行处理错误 $objXML = simplexml_load_file('data.xml'); if(!$objXML){ $errors = libxml_get_errors(); foreach($errors as $error){ echo $errors->message,'<br/>'; } } else { if($_GET['province']=='JiangSu'){ foreach($objXML->province as $province){ if($province->name == "江苏"){ echo $province->citys->asXML(); //asXML(),返回xml字符串 } } } else if ($_GET['province']=='AnHui'){ foreach($objXML->province as $province){ if($province->name == "安徽"){ echo $province->citys->asXML(); } } } } ?>
html代码:
<form> <p> <label for="province">省份:</label> <select id="choice" name="province"> <option value="JiangSu">江苏省</option> <option value="AnHui">安徽省</option> </select> <label for="citys">城市:</label> <select id="city" name="citys"> </select> </p> </form>
JS代码:
var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function doSearch(event) { var province = document.getElementById("choice").value; createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", "data.php?province="+province, false); xmlHttp.send(null); } function handleStateChange() { if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ //clearPreviousResults(); parseResults(); } } } function parseResults() { var xmlDoc = xmlHttp.responseXML; // var htmlStr=""; var cityName; if(xmlDoc.getElementsByTagName("city")[0].text){ cityName = "text"; //IE6下 要用text 取 内容 } else { cityName = "textContent"; //chrome下 要用textContent 取内容 } for(var i=0;i<xmlDoc.getElementsByTagName("city").length;i++){ document.getElementById("city").options[i] = new Option(xmlDoc.getElementsByTagName("city")[i][cityName],i) } } doSearch(); //加载页面的时候先执行一次,因为去掉了“请选择” var evtObject = document.getElementById("choice"); if(evtObject.addEventListener){ evtObject.addEventListener("change",doSearch,false); } else if(evtObject.attachEvent){ evtObject.attachEvent("onchange",doSearch); }
插曲:ie6下,取城市名 得用 xmlDoc.getElementsByTagName("city")[0].text,而Chrome下用textContent,因此我用字符串cityName代替,并且取城市名的时候用了数组写法,不能用“.”取值。 select 在ie6下 设置innerHTML,页面没效果,但值存在。
以上2个实例在ie6和chrome下均可运行。哎,兼容性的确让人头疼,第二个实例JS部分花了好长时间才完全调好。时间太晚了,都没劲写感想了,洗洗睡了.......