前言：这是Ajax和背景之间的数据交换的一个小例子，演示必须由服务器打开。服务器环境建设是非常好的，从网上下载WAMP或XAMPP安装好，一步一步，然后把写的页面在服务器的指定位置。当打开，在浏览器的地址栏或127.0.0.1 /指定页面输入localhost或指定的页面打开。

以下演示的HTML，PHP，列表原生AJAX，JQ Ajax代码。

HTML代码：

复制代码代码如下所示：







Ajax的例子







。主要{身高：400px；宽度：800px；保证金：100px汽车0；边框1px solid # 000；}

。表{身高：400px；宽度：200px；浮动：左；背景：# DDD；}

INF {身高：400px；宽度：600px；浮动权；背景：# CCC；文本对齐：中心；}

。列表里{宽度：200px；文本对齐：中心50px；保证金：00；字体大小：24px；鼠标指针；

}

INF img {宽度：360px；身高：270px；保证金：15px汽车；}

INF p {宽度：580px；文本对齐：左；文本缩进：2em；字体大小：14px；保证金：0 10px；}













春天

夏天

秋天

冬天





















PHP代码：

复制代码代码如下所示：

< PHP

详细信息=数组（

弹簧=〉人间四月芳菲尽，山寺桃花始盛开

夏天水晶风帘移动，全框房子玫瑰香

秋天= >金井梧桐秋叶黄，珠帘不卷夜霜

冬天>三朵白梅花雪，但雪梅花香

）；

echo $ { $ _request细节'liname'} { }；

>



原生的AJAX：

复制代码代码如下所示：



VaR LIS = document.getelementbyid（'list）。GetElementsByTagName（李的）；

在window.onload = initPage；

功能initPage（）{

对于（var i = 0；i < lis.length；i++）{

txt = { }；

txt.onclick =函数（）{

getdetails（这个ID）；

}

}

}

功能creatrequest（）{

{试

请求=新的XMLHttpRequest（）；

}

抓住（tryms）{

{试

请求=新的ActiveX对象（MSXML2. XMLHTTP ）；

}

抓住（otherms）{

{试

请求=新的ActiveX对象（微软。XMLHTTP ）；

}

catch（失败）{

请求= null；

}

}

}

返回请求；

}

功能getdetails（项目名称）{

请求= creatrequest（）；

如果（请求= NULL）{

警报（不成功的创作要求）

返回；

}

var url =getdetails。phpliname =+逃跑（项目名称）；

Request.open（

request.onreadystatechange = displaydetails；

Request.send（空）；

}

功能displaydetails（）{

如果（request.readystate = = 4）{

如果（request.status = = 200）{

detaildiv = document.getelementbyid（天道酬勤）；

detaildiv.innerhtml = request.responsetext；

}

}

}





JQ Ajax：

复制代码代码如下所示：



$（#列表里）。Click（function（）{）

$ ajax（{

类型：' '，

数据，

网址：getdetails。phpliname =+ this.id，

成功：函数（数据）{

$（# inf）。Html（数据）；

}，

DataType：中，

错误：函数（）{

警报（失败！；

}

}）

}）；