前言：这次介绍的是利用ajax与后台进行数据交换的小例子，所以demo必须通过服务器来打开。服务器环境非常好搭建，从网上下载wamp或xampp，一步步安装就ok，然后再把写好的页面放在服务器中指定的位置。打开时，在浏览器地址栏输入“localhost/指定页面”或者“127.0.0.1/指定页面”打开。
下面列出demo的HTML、PHP、原生ajax 、jq ajax代码。
HTML代码：
复制代码 代码如下:
- 春
- 夏
- 秋
- 冬
<script type="text/javascript" charset="utf-8" src="js/jQuery.js"></script>
PHP代码：
复制代码 代码如下:
$details = array (
'spring' => "
人间四月芳菲尽，山寺桃花始盛开
",'summer' => "
水晶帘动微风起，满架蔷薇一院香
",
'fall' => "
金井梧桐秋叶黄，珠帘不卷夜来霜
",'winter' => "
梅须逊雪三分白，雪却输梅一段香
");
echo $details[$_REQUEST['LiName']];
?>
原生ajax：
复制代码 代码如下:
<script type="text/javascript"><br> var lis = document.getElementById('list').getElementsByTagName('li');<br> window.onload = initPage;<br> function initPage() {<br> for (var i=0; i<lis.length; i++) {<br> txt = lis[i];<br> txt.onclick = function () {<br> getDetails(this.id);<br> }<br> }<br> }<br> function creatRequest() {<br> try {<br> request = new XMLHttpRequest();<br> }<br> catch (tryMS) {<br> try {<br> request = new ActiveXObject("Msxml2.XMLHTTP");<br> }<br> catch (otherMS) {<br> try {<br> request = new ActiveXObject("Miscrosoft.XMLHTTP");<br> }<br> catch (failed) {<br> request = null;<br> }<br> }<br> }<br> return request;<br> }<br> function getDetails(itemName) {<br> request = creatRequest();<br> if (request == null) {<br> alert('没有成功创建请求')<br> return;<br> }<br> var url = "getDetails.php?LiName="+escape(itemName);<br> request.open("GET",url,true);<br> request.onreadystatechange = displayDetails;<br> request.send(null);<br> }<br> function displayDetails() {<br> if (request.readyState == 4) {<br> if (request.status == 200) {<br> detailDiv = document.getElementById("inf");<br> detailDiv.innerHTML = request.responseText;<br> }<br> }<br> } <br> </script>
JQ ajax:
复制代码 代码如下:
<script type="text/javascript"><br> $('#list li').click ( function () { <br> $.ajax({ <br> type:'GET', <br> data:'', <br> <a href="%22getDetails.php?LiName=%22+this.id">url:"getDetails.php?LiName="+this.id, <br> success:function(data){ <br> $('#inf').html(data); <br> },<br> dataType:'text',<br> error:function (){ <br> alert("失败！"); <br> }<br> }) <br> });<br> </script>
