javascript之jQuery ajax 操作
ajax不足
1.浏览器的支持度不够,IE 5以后才支持
2.破坏浏览器的前进,后退功能
3.搜索引擎的支持度不同
4.开发调试工具缺乏
三层方法
1.$.ajax()最底层方法
2.$.load(),$.get(),$.post()最常用
3.$.getScript(),$.getJSON()方法
load方法
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
})
})
$(function(){
$("#send").click(function(){
$("#resText").load("test.html .para");
})
})
$(function(){
$("#send").click(function(){
$("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
alert( $(this).html() ); //在这里this指向的是当前的DOM对象，即 $("#iptText")[0]
alert(responseText); //请求返回的内容
alert(textStatus); //请求状态：success，error,notmodified,timeout
alert(XMLHttpRequest); //XMLHttpRequest对象
});
})
})
//无论ajax是否请求成功,只要当请求完成后,回调函数就被触发.
get方法
//<![CDATA[
$(function(){
$("#send").click(function(){
$.get("get1.php", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
//]]>
//返回HTML格式,在不需要与其他应用程序共享数据的时候,使用HTML最为简单
<?php
header("Content-Type:text/html; charset=utf-8");
echo "<div class='comment'><h6>{$_REQUEST['username']}:</h6><p class='para'>{$_REQUEST['content']}</p></div>";
?>
//<![CDATA[
$(function(){
$("#send").click(function(){
$.get("get2.php", {
username : $("#username").val() ,
content : $("#content").val()
}, 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); // 把返回的数据添加到页面上
});
})
})
//]]>
//返回XML格式,体积相对较大,解析和操作的速度都会慢一点
<?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>";
?>
//<![CDATA[
$(function(){
$("#send").click(function(){
$.get("get3.php", {
username : $("#username").val() ,
content : $("#content").val()
}, 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");
})
})
//]]>
//返回JSON文件
<?php
header("Content-Type:text/html; charset=utf-8");
echo "{ \"username\" : \"{$_REQUEST['username']}\" , \"content\" : \"{$_REQUEST['content']}\"}"
?>
//<![CDATA[
$(function(){
$("#send").click(function(){
$("#resText").load("get1.php?username="+$('#username').val()+"&content="+$('#content').val());
//如果是中文需要编码
})
})
//]]>
POST方法
1.GET请求会在URL进行传递,POST是作为消息实体发送给Web服务器
2.GET对传输的数据大小有限制,不大于2KB,POST方法理论上不受限制
3.GET方法请求的数据会被浏览器缓存起来,别人可以从历史记录中查看,存在安全问题
只需要修改$.get()为$.post()就可以，其它不变
$(function(){
$("#send").click(function(){
$.post("post1.php", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})还可以使用load实现相同功能
$(function(){
$("#send").click(function(){
$("#resText").load("post1.php",{
username : $("#username").val() ,
content : $("#content").val()
})
})
})
$.getScript()
动态加载js文件
$(function(){
$('#send').click(function() {
$.getScript('test.js');
});
})
设置回调函数
//<![CDATA[
$(function(){
$.getScript('jquery.color.js',function(){
$("<p>加载JavaScript完毕</p>").appendTo("body");
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
});
})
//]]>
$.getJSON()
$.each()函数不同于jQuery对象的each()方法,它是一个全局函数,不操作jQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数,回调函数拥有两个参数,第1个为对象的成员函数或数组的索引,第2个为对应变量或内容.
//<![CDATA[
$(function(){
$('#send').click(function() {
$.getJSON('test.json', function(data) {
$('#resText').empty();
var html = '';
$.each( data , function(commentIndex, comment) {
html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
})
$('#resText').html(html);
})
})
})
//]]>
JSONP形式
从图片网站搜索汽车类别的4张最新图片
//<![CDATA[
$(function(){
$('#send').click(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function( i,item ){
$("<img class='para'/> ").attr("src", item.media.m ).appendTo("#resText");
if ( i == 3 ) {
return false;
}
});
}
);
})
})
//]]>
ajax方法实现get
//<![CDATA[
$(function(){
$('#send').click(function() {
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
});
})
//]]>
serialize()方法
能够将DOM元素内容序列化为字符串，会自动编码
$(function(){
$("#send").click(function(){
$.post("get1.jsp", $("#form1").serialize() , function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
serializeArray()方法
不是返回字符串,而是将DOM元素序列化后，返回JSON格式的数据.
$(function(){
var fields = $(":checkbox,:radio").serializeArray();
console.log(fields);// Firebug输出
$.each( fields, function(i, field){
$("#results").append(field.value + " , ");
});
})
$.param方法
//<![CDATA[
$(function(){
var obj={a:1,b:2,c:3};
var k = $.param(obj);
alert(k) // 输出 a=1&b=2&c=3
})
//]]>
//用来对一个数组或对象按照key/value进行序列化
ajax全局事件
//可以为网页提供一个提示信息,常用的提示信息是"加载中"
$(function(){
//demo1:
$('#send1').click(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
function(data){
$("#resText1").empty();
$.each(data.items, function( i,item ){
$("<img/> ").attr("src", item.media.m ).appendTo("#resText1");
if ( i == 3 ) {
return false;
}
});
}
);
});
//demo2:
$("#send2").click(function(){
$.post("get1.jsp", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
$("#resText2").html(data); // 把返回的数据添加到页面上
}
);
})
$.ajaxPrefilter(function( options ) {
options.global = true;
});
//共用这2个全局的ajax事件
$("#loading").ajaxStart(function(){
$(this).show();
});
$("#loading").ajaxStop(function(){
$(this).hide();
});
})