现在来写ajax教材。。其实已经超级简单了。。
以前的时候只是针对IE的时候。。还是可以写个函数就KO了的。。但是现在各大浏览器林立。。弄的我们
有时候也没有办法。。支持IE。。支持FF。。我可是很懒的。。
既然已经有了ajax框架。。何必再自己写一个呢。。o(∩_∩)o...
这里我们来用jQuery的吧。。jQuery的ajax超级简单。。一个get函数搞定!
可是很多基础不好的家伙。。还是有点不能理解。。没办法。。还是讲下原理吧。。
ajax 白话 ---> 异步传输。。就是不刷新页面获得数据。。
那么再白点就是,用个函数从一个文件获得你所需要的数据。。
这个时候就会出现了一个事件了。。啥事件尼。。那就是装载事件啊。。你比如点击一个按钮。。执行一
个函数了。这个函数获取一个文件的数据。。而这个时候,这个数据的数据量很大,这个时候,你是不是
会等那么一会儿啊。。比如说5秒。。那么你获取完数据才把数据显示到页面上。。这个时候就出现了咱
们的重头演员了!! [装载完毕事件] 也就是说,你的操作都要写在这里,比如把数据显示出来啊。。什
么的。。
说了这么多。。其实就是为了引出 [装载完毕事件]
其他的也就没什么了。。下面看看实际上的代码是如何写的吧。。实在是太简单了。。幸福吧!
第一步 加入jQuery类库 放在<head></head>里面
<script language="JavaScript" type="text/javascript" src="jquery-1.2.1.pack.js"></script>
第二步 写这个ajax函数吧!在这之前我来布置下body的成员吧。。
<a href="#" onclick="javascript:o();">kkk</a>
<div id="pp">55</div>
一个a和一个div,a的onclick事件运行了o函数。。现在咱们来写这个o函数吧!!
function o(){
$.get(
"peng.txt",
function(data){
$("#pp").html(data);
}
);
}
peng.txt 是咱们获取数据的文件,这个可以是任何web文件。。
function(data) 就是咱们上面反复说的 [装载完毕事件] 而data就是获得的数据。。
$("#pp").html(data); 这个就是咱们执行的函数体。。它相当与 document.getElementById("pp").innerHTML = data;
就是语法不同。。意思是一样的。。简单吧。。吼吼。。
最后小提示下:数据要是utf8 的哦。。 也就是这里的peng.txt 的编码