刘学 | skill | 2014-09-25

科普: what's ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

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

why's JQuery ajax

传统的Javascript 上使用 ajax, 要输入一大堆东西, 但是JQuery库把ajax进行封装,使用起来方便且出错的概率比JS低很多.

    此文旨在从零开始教你使用jquery的ajax,结合的是我目前在银行开发的小型培训系统, 我使用的开发语言是jsp,其他的asp, php等也是同理的. 如有说得不对的地方, 望请见谅且指教! 

    首先, 在网页上, 先引用JQuery库:

<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>

    至于使用哪个版本的JQuery, 看个人喜好吧, 不过从2.0版本开始, JQuery就不支持IE8以下的, 不过目前一般都会使用IE9以上了,使用其他浏览器的(Chrome等)就不用考虑版本了,直接用最新版吧, 不过如果你跟我处在死板的银行等单位的话, 乖乖地用2.0以下的版本吧!

    导入以后, 就可以使用写ajax了, 在引用库的语句下面,输入:

<script type="text/javascript">
    function 函数名() {
	$.ajax({
	cache : false,
	type : "POST",//post形式发送,也可以设置成get
	url : "/web/admin/manage/index.jsp", //把表单数据发送到index.jsp
	data : $('#formID').serialize(), //要发送的是form的id为"formID"的表单中的数据
	async : false,//false为异步更新, true为同步更新
	error : function(request) {
	alert("发送请求失败！");//发送失败时,弹出警告框
	},
	success : function(data) {
	$("#divID").html(data); //将返回的结果显示到id为"divID"的地方中
	}
    });
}
<script>

    至此, 以表单形式提交的ajax就能实现了.

    

    如果发送的数据不是表单, 可以改成:

<script type="text/javascript">
    function 函数名() {
	$.ajax({
	cache : false,
	url : "/web/admin/manage/index.jsp", //把表单数据发送到index.jsp
	dataType: "json",//json形式发送
	data : ["key1":"value1"，"key2":"value2",...], //要发送数据,前者是参数名,后者是参数值,以逗号隔开
	async : false,//false为异步更新, true为同步更新
	error : function(request) {
	alert("发送请求失败！");//发送失败时,弹出警告框
	},
	success : function(data) {
	$("#divID").html(data); //将返回的结果显示到id为"divID"的地方中
	}
    });
}
<script>

   

    引申, 很多时候, 服务器的加载是需要时间的, 当进行ajax提交数据时, 在等待中, 我们希望能显示加载中等字样, 我的思路是:

    网页中先设置一个加载中的容器,样式设置成不显示, 例子如下:

<div id="loading" style="position:fixed;left:45%;top:40%;display:none">
    <img alt="loading" src="./img/loading.gif">
    <h3>加载中...</h3>
</div>

    然后, ajax 改成如下:

<script type="text/javascript">
    function 函数名() {
	$.ajax({
	befordSend:function(){
	    $('#loading').show();
	},
	cache : false,
	type : "POST",//post形式发送,也可以设置成get
	url : "/web/admin/manage/index.jsp", //把表单数据发送到index.jsp
	data : $('#formID').serialize(), //要发送的是form的id为"formID"的表单中的数据
	async : false,//false为异步更新, true为同步更新
	error : function(request) {
	alert("发送请求失败！");//发送失败时,弹出警告框
	},
	success : function(data) {
	$("#divID").html(data); //将返回的结果显示到id为"divID"的地方中
	},
	complete:function(){
	    $('#loading').hide();
	}
    });
}
<script>

    提醒, 要正常显示加载中,  async 必须设置成 false ! 我当时就是设置成true, 一直没成功, 找原因还找了很久! 哭死在路上...

    end...祝愉快~

评 论

---

---