jQuery中ajax基础

JavaScript 2012-03-07 jquery,ajax

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");

})

//////////    /////////

$(".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);//请求状态:successerror

//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 服务器返回的内容的格式,包括xmlhtmlscriptjsontext 和_default

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

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

alert(data); 

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

});

Xml文件php文件

<?php 

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

echo "<?xml version='1.0' encoding='utf-8'?>".

"<comments>".

"<comment username='{$_REQUEST['username'] }' >".

"<content>{$_REQUEST['content']}</content>".

"</comment>".

"</comments>";

?>

Html文件(回调函数部分)

function (data, textStatus){

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

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

var txtHtml "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";

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

});


Json文件格式

<?php 

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 "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";

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

},"json");


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

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

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

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

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

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

参数名称 类型 说明

url string 发送请求的URL地址

callback     function  成功载入后回调函数

有时候,在页面初次加载时就取得所需的全部javascript文件是完全没有必要的。虽然可以在需要的那个javascript文是可以动态地创建<script>标签。Jquery代码如下:

$(document.createElement_x("script")).attr("src","test.js").appendTo("head");

或者

$("<script type'='text/javascript' scr='test.js' />").appendTo("head");

但这种方式不太理想,为此,jquery专门提供了$.getScript()方法来直接加载.js文件,

jQuery 代码:

$.getScript("AjaxEvent.js", function(){ alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的GetPost按钮看看有什么不同?"); });

$.getJSON()    加载JSON文件  用法和$.getScript() 用法一样

Jquery提供了一个通用的便利方法$.each(),可以用来便利对象和数组

$.each()是一个全局函数,不操作jquery对象,而是以个数字或对象作为第1个参数,一个回调作为第2个参数。回调函数拥有2个参数,分别是对象的成员或数组的索引和其对于的变量和内容。

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",   //jquery将自动吧url里的回调函数(例如:“url?callback=?”中最后一个 ?),替换成正确的函数名,以执 行回调函数

function(data){

$.each(data.items, function( i,item ){

$("<img class='para'/> ").attr("src", item.media.m ).appendTo("#resText");

if == 

return false;

}

});

 }

); 


$.ajax()  方法  

jquery最底层的Ajax实现

结构为 $.ajax(options)

该方法有一个参数,但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息,参数以key/value的形式操作,所有的参数都是可选的,

参数 类型 说明

Url string 发送请求的url地址

Type string 请求的方式默认是GET

Timeout Number 设置请求超时时间(毫秒),此设置覆盖$.ajaxSetup()方法的 全局设置

Data objectstring 发送到服务器的数据,如果已经不是字符串,将自动转为字 符串格式。Get请求将附加到url后如:{fool'bar',  foo2:'bar2' }转为 &foo1=bar&foo2=bar2

Datatype string 预期服务器返回的数据类型。如果不指定,jquery将自动根 据httpMIME信息返回reponseXMLresponseText,并 作为回调函数参数传递。

可用类型如下:Xml html script json jsonp text

Beforesend  function 发送请求前可以修改XMLHttpRequest对象的函数,例如添 加自定义HTTP头,在beforeSend中如果返回false可以取 消本次ajax请求。XMLHttpRequest对象时唯一的参数

Function(XMLHttpRequest){ this//调用本次ajax请求是传递 的options参数}

Complete   function 请求完成后调用的回调函数(请求成功或失败时均调用)参 数一个XMLHttpRequest对象和一个描述成功请求类型的字 符串

Function(XMLHttpRequest,textStatue){this;//调用本次ajax 求传递的参数}

Success function 请求成功后调用的回调函数,有2个参数:

由服务器返回,并根据dataType参数进行处理后的数据

描述状态的字符串

Function( data textStatus){ //date可能为xml json text

this  //调用本次ajax请求时传递的options参数}

Error function 请求失败时调用的函数。有3个参数

XMLHttpRequest对象,错误信息、捕获的错误对象(可选)

Ajax事件函数如下:

Function(XMLHttpRequest textStatus errorThrown){

//通常情况下testStatuserrorThown只有其中一个包含信 息

this

}

Global boolean 默认为true,表示是否重复全局ajax事件。False时不触发

$.ajax({

 type: "GET",

 url: "photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",

 dataType: "jsonp",

 success function(data){

$.each(data.items, function( i,item ){

$("<img class='para'/> ").attr("src", item.media.m ).appendTo("#resText");

if == 

return false;

}

});

 }

}); 


serialize()序列化元素

$.get("./Ajax.php", {Action:$("#action").val(),Name:$("#name").val()}, function (data, textStatus){ }));

以前传参数都是那么传,但如果参数过多就很不方便了.为此jquery提供了一个简化的方法——serialize()

$.get("./Ajax.php", serialize()}, function (data, textStatus){ }));

它能够将DOM对象元素序列化为字符串,用于ajax请求。同时表单中增加字段,脚本仍然能使用。

serializeArray()  不是返回字符串,而是将DOM元素序列化后,返回JSON格式的数据。

$.param()方法

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

比如讲一个普通的对象序列化

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

Var $.param(obj);

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

Ajax全局事件

ajax请求开始时,会触发ajaxStat()方法(可以在此处定义“加载中”元素显示),当ajaxStop()结束时,会触发ajaxStop()方法(可以在此处取消“加载中”元素隐藏)

ajaxStat()

ajaxStop()

ajaxComplete()    Ajax请求完成时执行的函数

ajaxError() Ajax请求发生错误是执行执行的函数,捕捉到错误可以作为最后一个参 数传入

ajaxSend() Ajax请求发送前是执行的函数

ajaxSuccess() Ajax请求成功时执行的函数

文字链接:《jQuery中ajax基础

文章地址:http://www.qttc.me/20120323.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 0

    Hi,你想第一个做沙发么?