前端技术分享之jQuery中的Ajax

随着WEB前端技术的发展，开发中很少使用纯js实现Ajax，取而代之的是jQuery的Ajax实现。jQuery的Ajax实现除了Ajax()方法外，还有load()、$.get()、$.post()、$.getScript()、$.getJson()等方法。

load()方法是jQuery中最为简单的方法，使用它可以远程载入HTML代码，并插入DOM中，它的语法结构为：load(url [, data] [, callback])。参数url的类型是String，它表示请求的HTML页面的URL地址；data参数是可选参数，类型为Object，它表示发送到服务器的key / value数据；callback参数也是可选的，类型是函数，该函数将在请求完成是触发执行，不管请求失败还是成功，都将执行。下面 例一 给出load()方法的核心代码：

// 页面标签

请求数据如下：

// js代码，包含在ajaxMethod方法内

// load() 方法

     var url = "jsp/conHtml.html";

$("#showText").load(url, function(){

alert(“html文件载入成功”);

});

该例子中，conHtml.html的内容会被加载到id为showText的页面元素中。参数url后面可以添加jQuery选择器，选择器和 url 之间需要一个空格。需要注意一点：load() 方法不是全局的。回调函数有三个参数，分别是请求返回的内容responseText，请求状态textStatus和XMLHttpRequest对象。

$.get()方法可以传递参数给服务器，它是jQuery的全局函数。$.get()方法使用GET方式来进行异步请求，它的语法结构： g e t ( u r l [ , d a t a ] [ , c a l l b a c k ] [ , t y p e ] ) 。 其 参 数 u r l 类 型 为 字 符 串 型 ， 指 向 请 求 的 H T M L 文 件 的 u r l 地 址 ； 参 数 d a t a （ 可 选 ） 类 型 为 O b j e c t ， 表 示 发 送 到 服 务 器 的 键 值