jQuery中ajax基础教程

时间：2013-01-09 编辑：简简单单来源：一聚教程网

load()方法

load( url [ , data ][ , callback]) 载入远程 HTML 文件代码并插入至 DOM 中。

参数名称类型说明

url string 请求HTML页面的URL地址

data object 发送至服务器的key/value数据

callback function 请求完成后的回调数据，无论请求成功或失败

这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

这个方法可以很方便的动态加载一些HTML文件，例如表单。

示例代码：

代码如下

复制代码

$(function(){

$("#reText").load("test.html");

})

////////// 2 /////////

$(".ajax.load").load("2008/03/30/1130270.html .classname", function (responseText, textStatus, XMLHttpRequest){

this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0]

//筛选载入需要的内容。在url后面空格加选择器如：load("test.html #idname")

//alert(responseText);//请求返回的内容

//alert(textStatus);//请求状态：success，error

//alert(XMLHttpRequest);//XMLHttpRequest对象

});

注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。

$.get( url [ , data] [ , callback ] [ , type] ) 使用GET方式来进行异步请求

参数名称类型说明

url string 发送请求的URL地址

data object 发送至服务器的key/value数据会作为QueryString附加到请求 URL中

callback function 载入成功（当response的返回状态为success）时回调函数自动将请求结果和状态传递给该方法

type string 服务器返回的内容的格式，包括xml、html、script、json、text 和_default

代码如下

复制代码

$.get("./Ajax.php", {Action:"get",Name:"lulu"}, function (data, textStatus){

//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等

alert(data);

//alert(textStatus);//请求状态：success，error等等。
当然这里捕捉不到error，因为error的时候根本不会运行该回调函数 //alert(this);

});

Xml文件php文件

代码如下

复制代码

header("Content-Type:text/xml; charset=utf-8");

echo "".

"".

"{$_REQUEST['content']}".

"".

"";

Html文件（回调函数部分）

代码如下

复制代码

function (data, textStatus){

var username = $(data).find("comment").attr("username");

var content = $(data).find("comment content").text();

var txtHtml = "

"+username+":

"+content+"

$("#resText").html(txtHtml); // 把返回的数据添加到页面上

});

Json文件格式

代码如下

复制代码

header("Content-Type:text/html; charset=utf-8");

echo "{ username : "{$_REQUEST['username']}" , content : "{$_REQUEST['content']}"}"

Html文件（回调函数部分）

代码如下

复制代码

function (data, textStatus){

var username = data.username;

var content = data.content;

var txtHtml = "

"+username+":

"+content+"

$("#resText").html(txtHtml); // 把返回的数据添加到页面上

},"json");

$.post () 方法和 $.get() 方法用法相同，不过仍有有下列区别：

1 GET请求会将参数跟在url后进行传递，而POST请求则是作为HTTP消息的实体内容发送给你Web服务器。当然，在Ajax请求中，这种区别对用户是不可见的

2 GET方式对传输的数据有大小限制（通常不能大于2KB），而是用POST方式传递比GET方式大得多（理论上不受限制）

3 GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，在某些情况下，GET方式会带来严重的安全性问题，而POST方式传递相对来说可以避免这些问题。

4 GET方式和POST方式传递的数据在服务器端的获取也不相同。在PHP中，GET的方式的数据可以用$_GET[]获取，而POST方式可以用$_POST[]获取，两者都可以用$_REQUEST[]获取

$.getScript( url, [callback]) 方法通过 GET 方式请求载入并执行一个 JavaScript 文件。

参数名称类型说明

url string 发送请求的URL地址

callback function 成功载入后回调函数

有时候，在页面初次加载时就取得所需的全部javascript文件是完全没有必要的。虽然可以在需要的那个javascript文是可以动态地创建

推荐专题

最新下载

热门教程

jQuery中ajax基础教程

"+username+":

"+username+":