Ajax+PHP简单实例
一直用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").text){
cityName = "text"; //IE6下 要用text 取 内容
} else {
cityName = "textContent"; //chrome下 要用textContent 取内容
}
for(var i=0;i<xmlDoc.getElementsByTagName("city").length;i++){
document.getElementById("city").options = new Option(xmlDoc.getElementsByTagName("city"),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").text,而Chrome下用textContent,因此我用字符串cityName代替，并且取城市名的时候用了数组写法，不能用“.”取值。 select 在ie6下 设置innerHTML，页面没效果，但值存在。
以上2个实例在ie6和chrome下均可运行。哎，兼容性的确让人头疼，第二个实例JS部分花了好长时间才完全调好。时间太晚了，都没劲写感想了，洗洗睡了.......
页:
[1]