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 功能。

地址