05_jQuery与Ajax的操作及应用

jQuery与Ajax的应用

1、  Ajax的XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键---发送异步请求、接收响应及执行回调都是通过它来完成的。

示例0501：

单击一个按钮，然后通过传统的JavaScript的Ajax的方式从服务器端取回一个”Hello Ajax!”的字符串并显示在页面上。                                                                                                                                                                                                                                                                             

2、  jQuery中的Ajax

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是$.load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。

2.1、load()方法：

是jQuery中最简单、常用的Ajax方法，能载入远程HTML代码并插入DOM中。通常用来获取静态数据文件。

语法结构：load(url [, data] [, callback])

示例0502

2.2、$.get()方法：

使用GET方式来进行异步请求。

语法结构：$.get(url [, data] [, callback] [, type])

示例0503

2.3、$.post()方法：

与$.get()方法的结构和使用方式都相同，区别是：

1)       GET请求将参数跟在URL后进行传递，而POST请求是作为HTTP消息的实体内容发送给Web服务器。

2)       GET方式对传输的数据大小有限制(通常不能大于2KB)，而POST方式传递的数据量要比GET方式大得多(理论上不受限制)。

3)       GET方式请求的数据会被浏览器缓存起来，会有安全问题，而POST相对可以避免这些问题。

示例0504

2.4、$.getScript()方法：

有时候，在页面初次加载时就取得所需的全部JavaScript文件是没有必要的。jQuery提供了$.getScript()方式来直接加载.js文件。

示例0505

2.5、$.getJSON()方法：

用于加载JSON文件，用法与$.getScript()方法相同。

示例0506

2.6、$.ajax()方法：

是jQuery最底层的Ajax实现。之前的方法都是基于$.ajax()方法构建的，它可以代替前面所有的方法。

语法结构：$.ajax(options)

只有一个参数以key/value形式存在，所有参数都是可选的。

示例0507

3、  序列化元素

1)serialize()方法：

作用于一个jQuery对象，能将DOM元素内容序列化为字符串，用于Ajax请求。

2)serializeArray()方法：

与serialize()类似，该方法不是返回字符串，而是将DOM元素序列化后返回JSON格式的数据。

3)$.param()方法：

是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。如：

Var obj = {a:1,b:2,c:3};

Var k = $.param(obj);

Alert(k);//输出a=1&b=2&c=3

示例0508

4、  Ajax的全局事件

无论创建它们的代码位于何处，只要有Ajax请求发生时就会触发它们。如：

在网页加载较慢时加一个提示信息”加载中…”

<div id=”loading”>加载中…</div>

$(“#loading”).ajaxStart(function(){

                             $(this).show();

});

$(“#loading”).ajaxStop(function(){

                             $(this).hide();

});

全局事件还有几个方法如下：

示例0509