回顾下javascript中的Ajax请求,写一个小例子:
<!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" xml:lang="zh" lang="zh" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="generator" content="Editplus4PHP" /> <meta name="keywords" content="Leo, HentStudio, Editplus4PHP, LeoPHP" /> <meta name="description" content="LeoPHP - Powered by HentStduio" /> <meta name="author" content="Leo" /> <script type="text/javascript" src="Public/Js/jquery-1.7.1.min.js"></script> <!--<link rel="stylesheet" type="text/css" href="css/style.css" />--> <link rel="shortcut icon" href="images/favicon.ico" /> <title>Example | xHTML1.0</title> </head> <body> <div> 省份 <select name="pro" id="pro" onChange="getClass(this.value)"> <option value="1">北京</option> <option value="2">上海</option> </select> <select name="city" id="city_1"> <option value="1">朝阳</option> </select> </div> </body> </html> <script> function getClass(val){ creatXMLHttpRequest(); var pro = val; var url = "f.php?pro="+pro;//url地址, xmlReq.open("GET",url,false);//以GET的方式访问 xmlReq.onreadystatechange = OnMassageBack;//设置回调函数 xmlReq.send(null); } //回调函数 function OnMassageBack(){ if(xmlReq.readyState == 4 && xmlReq.status == 200){//调用成功,返回结果 sum = xmlReq.responseText; alert(sum); } } // 创建一个ActiveXObject 对象使现局部请求到服务器 function creatXMLHttpRequest(){ if(window.XMLHttpRequest){ xmlReq = new XMLHttpRequest(); if(xmlReq.overrideMimeType){ xmlReq.overrideMimeType('text/xml'); } }else if(window.ActiveXObject){ try{ xmlReq = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e){ try{ xmlReq = new ActiveXObject('Microsoft.XMLHTTP'); } catch(e){ } } } } </script>
f.php页面是用来处理请求的: (这里我只做了简单的返回)
<?php <?php $s = $_GET['pro']; $res = "Hello ".$s; echo $res; ?> ?>