jQuery与Ajax的综合应用

Ajax是 Asynchronous JavaScript And XML 的缩写,意思是异步的JavaScript和xml,他是基于JavaScript和HTTP请求的一种网页编程模式,其核心就是一个JavaScript对象和相关函数。

以一种异步的方式与web服务器通信,并且只更新页面的一部分。

Ajax由四部分组成:

  • JavaScript
  • DOM
  • CSS
  • XMLHTTPRequest:负责将客户端信息以异步通信的方式发送到服务器端,并接收服务器端返回的响应信息和数据。

GET和POST模式:

  • GET方式一般用来传送简单数据,大小限制在1kb以下,请求的数据被转化成查询字符串并追加到请求的URL之后发送;
  • POST可以达到2MB,他是将数据存放在send方法中发送,在数据发送之前必须先设置HTTP请求的头部。

1. 加载异步数据

  1. 全局函数getJSON()

  2. 全局函数getScript()

    • 可以通过getScript动态载入脚本,即在网页初始化时只要载入必要文件,其他的用的时候再载入。
    • $(selector).getScript("./jquery.min.js");

2. 请求服务器数据

  1. $.get()
jQuery.get(url [,data] [,callback] [,type]);
  • url为必选参数,指定了URL的地址
  • data为可选参数,指定了要发送给服务器端的数据
  • callback也是可选参数,回调函数
  • type可选参数,指定了返回内容的形式,默认为HTML形式
  1. $.post()
jQuery.post(url [,data] [,callback] [,type]);

参数同get

  1. serialize()序列化表单
    在jQuery中,可以使用serialize函数将表单数据序列化为键值对,创建url编码文本字符串进行提交。

3. Ajax中的全局事件

ajax的全局事件会在调用其他事件的时候默认触发:

  • ajaxStart()
  • ajaxSend()
  • ajaxSuccess()
  • ajaxComplete()
  • ajaxStop()
  • ajaxError()

jQuery插件的应用于开发

jQuery插件就是开发爱好者自己利用jQuery制作的特效,然后打包成js文件,发布到网上供大家使用的脚本集合。

好用的jQuery插件:

1. jQuery Form插件

jQuery Form是一个优秀的表单插件,它可以非常容易地使HTML表单支持Ajax。jQuery Form插件有两个核心方法:

  • ajaxForm()
    适用于以提交表单的方式处理数据,需要在表单中标明表单的action、id、method属性,最好在表单中提供submit按钮。此方法大大简化了使用ajax提交表单时的数据传递问题,不需要逐个地以JavaScript的方式获取每个表单属性的值。

  • ajaxSubmit()
    适用于以事件机制提交表单,如通过超链接、图片的click事件等提交表单。使用时只需要指定表单的action属性即可,不需要提供submit按钮。

文档及下载地址

2. jQuery UI插件

jQueryUI 插件是一个基于 jQuery 的用户界面开发,该库提供了UI控件。

  1. 鼠标拖拽页面板块
    只需要分别在拖拽源和目标上调用 draggable() 函数即可。
  2. 实现拖入购物车功能
    droppable()方法实现接收容器。
<script language="javascript">
		$(function () {
			$(".draggable").draggable({
				helper: "clone"
			});
			$("#droppable-accept").droppable({
				accept: function (draggable) {
					return $(draggable).hasClass("green");
				},
				drop: function () {
					$(this).append($("<div></div>").html("接收一次!"));
				}
			});
		});
</script>

文档及下载地址

3. clueTip插件

是一个工具提示插件,可以方便的为链接或其他元素添加 Tooltip 功能。

地址