Ajax:Asynchronous JavaScript and XML
Ajax用来异步通信,用户不需要长长的等待。
实现也很简单,主要用到XMLHttpRequest对象
<body>
<form>
<p>City: <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>State: <input type="text" name="state" id="state" size="25"
onChange="callServer();" /></p>
<p>Zip Code: <input type="text" name="zipCode" id="zipCode" size="5" /></p>
</form>
</body>
<script>
var
XMLHttp=
null
;//兼容多种浏览器
try
{
new
ActiveXObject(
"Msxml2.XMLHTTP"
);
}
catch
(e){
{
"Microsoft.XMLHTTP"
);
}
}
if
(XMLHttp==
){
XMLHttpRequest();
}
function callServer(){
var city=document.getElementById("city").value;
var state=document.getElementById("state").value;
if((city==null)||(city=="")) return;
if((state==null)||(state=="")) return;
var url="__APP__/Index/test2?city="+escape(city)+"&state="+escape(state);//这里用的thinkPHP框架,一般是xx/yy/z.PHP
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);
var city=document.getElementById("city").value;
var state=document.getElementById("state").value;
if((city==null)||(city=="")) return;
if((state==null)||(state=="")) return;
var url="__APP__/Index/test2?city="+escape(city)+"&state="+escape(state);//这里用的thinkPHP框架,一般是xx/yy/z.PHP
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);
}
function updatePage(){
if (xmlHttp.readyState==4) {
if (xmlHttp.status==200){
var response=xmlHttp.responseText;
document.getElementById("zipCode").value=response;
if (xmlHttp.readyState==4) {
if (xmlHttp.status==200){
var response=xmlHttp.responseText;
document.getElementById("zipCode").value=response;
}
}
</script>
public function test2(){
//获得来自 URL 的参数
$c=$_GET["city"];
$s=$_GET["state"];
//查找数组中的所有提示
if ((strlen($c) > 0)&&(strlen($s) > 0)){
$response = 112;
echo $response;
}
}
后台处理后的数据放到$response(这只是随便取的变量名,可以改的)里
然后前台的updatePage函数通过xmlHttp.responseText获取,就行啦~
如果要传数组,就要用json格式,比如:
$response=("1","2","3");
echo json_encode($response);
原文链接:https://www.f2er.com/ajax/163580.html