PHP_AJAX 2015-1-3 11:44
var XMLHttp=null
if (window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 创建XMLHttpRequest对象
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
// 在 Internet Explorer 6 及更高的版本可用(微软方式)
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
// Internet Explorer 5.5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
<html>
<head>
<script src="clienthint.js"></script>
</head>
<body>
<form>
First Name: <input type="text" id="txt1" οnkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
->clienthint.js
var xmlHttp;
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="gethint.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random(); //添加一个随机数，以防服务器使用缓存文件
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
->gethint.php
<?php
// 名字数组
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
// 请求参赛
$q=$_GET["q"];
// 寻求匹配
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// 结果响应
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
echo $response; // 想客户端响应；
?>
1、HTML表单
<html>
<head>
<script src="selectcd.js"></script>
</head>
<body>
<form>
Select CD:
<select name="cds" οnchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<p>
<div id="txtHint"><b>CD info will be listed here.</b></div>
</p>
</body>
</html>
2、XML文件
->cd_catalog.xml
<CATALOG>
<CD>
<TITLE>主题</TITLE>
<ARTIST>作家</ARTIST>
<COUNTRY>国家</COUNTRY>
<COMPANY>公司</COMPANY>
<PRICE>价格</PRICE>
<YEAR>年份</YEAR>
</CD>
</CATALOG>
3、JavaScript
->selectcd.js
var xmlHttp;
function showCD(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="getcd.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
// 事件监听
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
// 创建XMLHttpRequest对象
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
4、PHP 页面
->getcd.php
<?php
// 1、请求参数
$q=$_GET["q"];
/// XML DOM 解析器
// 2、加载XML
$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
// 3、作者数组
$x=$xmlDoc->getElementsByTagName('ARTIST');
// 4、循环数组
for ($i=0; $i<=$x->length-1; $i++)
{
if ($x->item($i)->nodeType==1){// nodeType为1则为元素；
if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
{
$y=($x->item($i)->parentNode); // 保存匹配CD；
}
}
}
// 5、CD子元素
$cd=($y->childNodes);
for ($i=0; $i<$cd->length; $i++)
{
// 向客户端输出响应，输出的属于responseText值；
if ($cd->item($i)->nodeType==1){
echo($cd->item($i)->nodeName);
echo(": ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br />");
}
}
?>
<html>
<head>
<script src="selectuser.js"></script>
</head>
<body>
<form>
Select User:
<select name="users" οnchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<p>
<div id="txtHint"><b>User info will be listed here.</b></div>
</p>
</body>
</html>
2、JavaScript脚本
->selectuser.js
var xmlHttp;
function showUser(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="getuser.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged ;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
// xmlHttp.responseText为响应文本
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
->getuser.php
<?php
// 请求参数
$q=$_GET["q"];
// 创建链接
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
// 定数据库
mysql_select_db("ajax_demo", $con);
// 执行查询
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysql_query($sql);
// 输出响应
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
// 关闭连接
mysql_close($con);
?>
<html>
<head>
<script src="responsexml.js"></script>
</head>
<body>
<form>
Select User:
<select name="users" οnchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<h2>
<span id="firstname"></span> <span id="lastname"></span>
</h2>
<span id="job"></span>
<div >
<span id="age_text"></span>
<span id="age"></span>
<span id="hometown_text"></span>
<span id="hometown"></span>
</div>
</body>
</html>
->responsexml.js
var xmlHttp;
function showUser(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="responsexml.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
// 响应XML
xmlDoc=xmlHttp.responseXML;
// firstname
document.getElementById("firstname").innerHTML=
xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
// lastname
document.getElementById("lastname").innerHTML=
xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
// job
document.getElementById("job").innerHTML=
xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;
// age
document.getElementById("age_text").innerHTML="Age: ";
document.getElementById("age").innerHTML=
xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
// hometown
document.getElementById("hometown_text").innerHTML="<br/>From: ";
document.getElementById("hometown").innerHTML=
xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null;
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
->responsexml.php
<?php
header('Content-Type: text/xml'); // 响应类型；
header("Cache-Control: no-cache, must-revalidate"); // 以防止缓存；
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); //A date in the past
// 请求参数
$q=$_GET["q"];
// 创建链接
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
// 定数据库
mysql_select_db("ajax_demo", $con);
// 执行查询
$sql="SELECT * FROM user WHERE id = ".$q."";
$result = mysql_query($sql);
// xml响应
echo '<?xml version="1.0" encoding="ISO-8859-1"?>
<person>';
while($row = mysql_fetch_array($result))
{
echo "<firstname>" . $row['FirstName'] . "</firstname>";
echo "<lastname>" . $row['LastName'] . "</lastname>";
echo "<age>" . $row['Age'] . "</age>";
echo "<hometown>" . $row['Hometown'] . "</hometown>";
echo "<job>" . $row['Job'] . "</job>";
}
echo "</person>";
// 关闭连接
mysql_close($con);
?>
->links.xml
<pages>
<link>
<title>页面标题</title>
<url>页面地址</url>
</link>
</pages>
(2)、HTML页面
->livesearch.html
<html>
<head>
<script src="livesearch.js"></script>
<style type="text/css">
#livesearch
{
margin:0px;
width:194px;
}
#txt1
{
margin:0px;
}
</style>
</head>
<body>
<form>
<input type="text" id="txt1" size="30" οnkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
->livesearch.js
var xmlHttp;
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch"). style.border="0px";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="livesearch.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("livesearch").innerHTML=xmlHttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
(4)、PHP 页面
->livesearch.php
// 代码会搜索 XML 文件中匹配搜索字符串的标题，并以 HTML 返回结果
<?php
// 加载XML
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");
// 连接数组
$x=$xmlDoc->getElementsByTagName('link');
// 请求参数
$q=$_GET["q"];
// 寻找匹配
if (strlen($q) > 0)
{
$hint=""; // 响应字串；
for($i=0; $i<($x->length); $i++)
{
$y=$x->item($i)->getElementsByTagName('title'); //title元素数组；
$z=$x->item($i)->getElementsByTagName('url'); //url元素数组；
if ($y->item(0)->nodeType==1)
{
// 是否匹配_stristr()_查找字符串在另一字符串中第一次出现的位置(大小写不敏感)
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
{
if ($hint=="")
{
$hint="<a href='" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
else
{
$hint=$hint . "<br /><a href='" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// 返回响应
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
echo $response;
?>
->getrss.html
<html>
<head>
<script type="text/javascript" src="getrss.js"></script>
</head>
<body>
<form>
Select an RSS-Feed:
<select οnchange="showRSS(this.value)">
<option value="Google">Google News</option>
<option value="MSNBC">MSNBC News</option>
</select>
</form>
<p>
<div id="rssOutput">
<b>RSS Feed will be listed here.</b>
</div>
</p>
</body>
</html>
2、JavaScript代码
->getrss.js
var xmlHttp;
function showRSS(str)
{
xmlHttp=GetXmlHttpObject();
if(xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="getrss.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("rssOutput").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
->getrss.php
<?php
// 请求参数
$q=$_GET["q"];
// 订阅XML
if($q=="Google")
{
$xml=("http:///news?ned=us&topic=h&output=rss");
}
elseif($q=="MSNBC")
{
$xml=("http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml");
}
// 加载XML
$xmlDoc = new DOMDocument();
$xmlDoc->load($xml);
// 首个channel
$channel=$xmlDoc->getElementsByTagName('channel')->item(0);
// channel标题
$channel_title = $channel->getElementsByTagName('title')->item(0)->childNodes->item(0)->nodeValue;
// channel链接
$channel_link = $channel->getElementsByTagName('link')->item(0)->childNodes->item(0)->nodeValue;
// channel描述
$channel_desc = $channel->getElementsByTagName('description')->item(0)->childNodes->item(0)->nodeValue;
// 输出channel信息
echo("<p><a href='".$channel_link."'>".$channel_title ."</a>");
echo("<br />");
echo($channel_desc."</p>");
//输出item元素
$x=$xmlDoc->getElementsByTagName('item');
for ($i=0; $i<=2; $i++)
{
// 标题
$item_title=$x->item($i)->getElementsByTagName('title')->item(0)->childNodes->item(0)->nodeValue;
// 链接
$item_link=$x->item($i)->getElementsByTagName('link')->item(0)->childNodes->item(0)->nodeValue;
// 描述
$item_desc=$x->item($i)->getElementsByTagName('description')->item(0)->childNodes->item(0)->nodeValue;
// 输出
echo ("<p><a href='".$item_link."'>".$item_title ."</a>");
echo ("<br />");
echo ($item_desc . "</p>");
}
?>
<html>
<head>
<script src="poll.js"></script>
</head>
<body>
<div id="poll">
<h2>Do you like PHP and AJAX so far?</h2>
<form>
Yes: <input type="radio" name="vote" value="0" οnclick="getVote(this.value)"><br />
No: <input type="radio" name="vote" value="1" οnclick="getVote(this.value)">
</form>
</div>
</body>
</html>
->poll.js
var xmlHttp;
function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="poll_vote.php";
url=url+"?vote="+int;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("poll").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null;
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return objXMLHttp;
}
->poll_vote.php
<?php
// 请求参数
$vote = $_REQUEST['vote'];
// 读取文件：file()函数把整个文件读入数组中，以行为单元；
$filename = "poll_result.txt";
$content = file($filename);
// 处理数据：化成数组
$array = explode("||", $content[0]); //把第一行字符串打散为数组;
$yes = $array[0];
$no = $array[1];
if ($vote == 0)
{
$yes = $yes + 1;
}
if ($vote == 1)
{
$no = $no + 1;
}
// 写入文件：把结果写入文本
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w"); // 写入方式打开，将文件指针指向文件头并将文件大小截为零。如果文件不存在则尝试创建之。
fputs($fp,$insertvote); // fputs() 函数写入文件（可安全用于二进制文件）。fputs() 函数是 fwrite() 函数的别名。
fclose($fp);
?>
<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<!--round(x,prec) 函数对浮点数进行四舍五入。prec规定小数点后的位数-->
<img src="poll.gif" width='<?php echo(100 * round($yes/($no+$yes),2)); ?>' height='20'>
<?php echo(100 * round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif" width='<?php echo(100 * round($no/($no+$yes),2)); ?>' height='20'>
<?php echo(100 * round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>