AJAX的动态脚本载入
创建一个新的<SCRIPT />元素,然后将其src特性指向一个Javascript文件来载入一个无需预先写在该页面中的Javascript脚本。
scriptimage.php
1
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
2 < HTML >
3 < HEAD >
4 < TITLE > 获取顾客信息 </ TITLE >
5 < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
6 < script type ="text/javascript" >
7 function requestCustomerInfo(){
8 var cid = document.getElementById( ' cid ' ).value;
9 var oScript = document.createElement( ' script ' );
10 oScript.type = ' text/javascript ' ;
11 oScript.src = ' getcusdata.php?id= ' + cid + " &callback=displayCustomerInfo " ;
12 document.body.appendChild(oScript);
13 }
14 function displayCustomerInfo(str){
15 var returnInfo = document.getElementById( ' returnInfo ' );
16 returnInfo.innerHTML = str;
17 }
18 </ script >
19 </ HEAD >
20 < BODY >
21 < input type ="text" id ="cid" />
22 < input type ="button" value ="查看顾客信息" onclick ="requestCustomerInfo()" />
23 < div id ="returnInfo" ></ div >
24 </ BODY >
25 </ HTML >
26
2 < HTML >
3 < HEAD >
4 < TITLE > 获取顾客信息 </ TITLE >
5 < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
6 < script type ="text/javascript" >
7 function requestCustomerInfo(){
8 var cid = document.getElementById( ' cid ' ).value;
9 var oScript = document.createElement( ' script ' );
10 oScript.type = ' text/javascript ' ;
11 oScript.src = ' getcusdata.php?id= ' + cid + " &callback=displayCustomerInfo " ;
12 document.body.appendChild(oScript);
13 }
14 function displayCustomerInfo(str){
15 var returnInfo = document.getElementById( ' returnInfo ' );
16 returnInfo.innerHTML = str;
17 }
18 </ script >
19 </ HEAD >
20 < BODY >
21 < input type ="text" id ="cid" />
22 < input type ="button" value ="查看顾客信息" onclick ="requestCustomerInfo()" />
23 < div id ="returnInfo" ></ div >
24 </ BODY >
25 </ HTML >
26
getcusdata.php
1
<?
php
2 header("Content-Type:text/javascript");
3 header("Cache-Control:no-cache");
4 $cid = $_GET['id'];
5 $callbackfunc = $_GET['callback'];
6 $info = '';
7 if(is_numeric($cid)){
8 $conn = mysql_connect('localhost','root','123456789') or $info = '数据库连接错误';
9 mysql_select_db('test',$conn) or $info = '数据库不存在';
10 if($oResult = mysql_query(" SELECT * FROM customers WHERE customerid = $cid") and mysql_num_rows($oResult) > 0){
11 $value = mysql_fetch_array($oResult);
12 $info = '姓名:'.$value['name'].' 地址:'.$value['address'];
13 mysql_free_result($oResult);
14 }else{
15 $info = '顾客ID不存在';
16 }
17 }else{
18 $info = '顾客ID不合法';
19 }
20 mysql_close($conn);
21 echo "$callbackfunc(\"$info\");";
22 ?>
2 header("Content-Type:text/javascript");
3 header("Cache-Control:no-cache");
4 $cid = $_GET['id'];
5 $callbackfunc = $_GET['callback'];
6 $info = '';
7 if(is_numeric($cid)){
8 $conn = mysql_connect('localhost','root','123456789') or $info = '数据库连接错误';
9 mysql_select_db('test',$conn) or $info = '数据库不存在';
10 if($oResult = mysql_query(" SELECT * FROM customers WHERE customerid = $cid") and mysql_num_rows($oResult) > 0){
11 $value = mysql_fetch_array($oResult);
12 $info = '姓名:'.$value['name'].' 地址:'.$value['address'];
13 mysql_free_result($oResult);
14 }else{
15 $info = '顾客ID不存在';
16 }
17 }else{
18 $info = '顾客ID不合法';
19 }
20 mysql_close($conn);
21 echo "$callbackfunc(\"$info\");";
22 ?>
只要处理对相同页面的重复调用,就必须考虑缓存机制。解决办法是使用Cache-Control或Expires首部。