上手ajax

来源：互联网发布：正规购买淘宝小号平台编辑：程序博客网时间：2024/05/22 19:35

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

（1）首先我们需要一个运行环境

我使用的是xampp，具体安装使用自己可以百度。

再次我只打开xampp control panel的apache，如下图：

（2）写两个文件，一个为ajaxTest.html，一个为test.txt。

ajaxTest.html的内容为

<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8">

</head>
<body>
<input type="button" id="test" value="test" onclick="ajaxFunction()" />
<div id="vv">test ajax</div>
<script type="text/javascript">
function ajaxFunction(url){
try {
xmlHttp = new XMLHttpRequest() ;
} catch(e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e) {
alert("您的浏览器不支持ajax") ;
return false;
}
}
}
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState ==4 ) {
if (xmlHttp.status == 200 ) {
document.getElementById('vv').innerHTML = xmlHttp.responseText; }
}
}
xmlHttp.open("post","test.txt",true);
xmlHttp.send();
}
</script>
</body>
</html>

test.txt的内容可以随便写，但不能不写，不写怎么看效果，是吧。

举例：123456

（3）将两个文件都直接放在xampp的htdocs下：

（3）在浏览器窗口输入localhost:8080/ajaxTest.html(注意8080是我的xampp中Apache的端口号，你的改写为你的端口号)

点击按钮运行，运行结果为：

好啦，我们这就运行成功了一个简单的ajax实例了。。

注意还有中文问题的解决，我们现在的html页面用的编码方式是utf-8，如果我们在txt中写了中文文字，那么可能的情况就是出现了乱码，解决方式是将txt另存为，将默认编码改为utf-8.

阅读全文

0 0