load(url[,data][,callback])------------->通常用来从WEB服务器上获取静态的数据文件
url: string类型 请求HTML页面的URL地址
data(可选): object 发送至服务器的key/value数据
callback(可选):function 请求完成时回调函数
例子：
主页面代码：
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
$(function(){
$("#send").click(function(){
$("#resText").load("test.html .para",function (responseText, textStatus, //test.html .para为test.html中.class为para的内容XMLHttpRequest){
alert( $(this).html() ); //在这里this指向的是当前的DOM对象，即 $("#iptText")[0]
alert(responseText); //请求返回的内容
alert(textStatus); //请求状态：success，error
alert(XMLHttpRequest); //XMLHttpRequest对象
});
})
})
<input type="button" id="send" value="Ajax获取" />
<div class="comment">
已有评论：
</div>
<div id="resText" ></div>
test.html中的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="comment">
<h6>张三:</h6>
<p class="para">沙发.</p>
</div>
<div class="comment">
<h6>李四:</h6>
<p class="para">板凳.</p>
</div>
<div class="comment">
<h6>王五:</h6>
<p class="para">地板.</p>
</div>
</body>
</html>
传递方式
load()方法的传递方式根据蚕食data来自动指定。
如果没有参数传递，则采用GET方式传递；
反之，就会自动转换为POST方式
load的回调函数为function (responseText, textStatus,XMLHttpRequest))
responseText:请求返回的内容
textStatus:请求状态：success/error/notmodified/timeout4种状态
XMLHttpRequest：//XMLHttpRequest对象
$.get()使用异步GET方式来进行异步请求
$.get(url[,data][,callback][,type])
url:请求的页面的URL
data(可选) object 发送服务器的Key/value数据会作为QueryString附加到请求URL中
callback(可选) function 载入成功时回调函数(只有当Response的返回状态为success才返回此函数)
type : string 服务器返回的内容的格式,包括xml/html/script/json/text和_default
<div id="resText" >
$(function(){
$("#send").click(function(){
$.get("get1.php", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
而get1.php中的代码
echo "<div class='comment'><h6>{$_REQUEST['username']}:</h6><p class='para'>{$_REQUEST['content']}</p></div>";
$(function(){
$("#send").click(function(){
$("#resText").load("get1.php?username="+$('#username').val()+"&content="+$('#content').val());
//如果是中文需要编码
})
})
如果返回的类型是XML类型则要在异步的界面head文件里
header("Content-Type:text/html; charset=utf-8");//PHP
但是XML文档类型体积大和难以解析。
资源:http://json.org 了解JSON
例子：
$("#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");
})
get3.php
<?php
header("Content-Type:text/html; charset=utf-8");
echo "{ username : /"{$_REQUEST['username']}/" , content : /"{$_REQUEST['content']}/"}"
?>
$.post()
POST请求则是作为HTTP消息的实体内容发送给WEB服务器
GET方式对传输的数据有大小限制(通常不能大于2KB)
POST方式传递的数据量要比GET方式大得多(理论上不受限制)
GET方式请求的数据会被浏览器缓存起来，而其他人可以从浏览器的历史记录中读取到这些数据
在某种情况下，get方式会带来严重的安全性问题，而POST方式相对于来说就可以避免这些问题
例子：
$(function(){
$("#send").click(function(){
$.post("post1.php", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
post1.php
<?php
header("Content-Type:text/html; charset=utf-8");
echo "<div class='comment'><h6>{$_REQUEST['username']}:</h6><p class='para'>{$_REQUEST['content']}</p></div>";
?>
例子2：
$(function(){
$("#send").click(function(){
$.post("post2.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");
})
})
post2.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>";
?>
例子3：
$(function(){
$("#send").click(function(){
$.post("post3.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");
})
})
post3.php
<?php
header("Content-Type:text/html; charset=utf-8");
echo "{ username : /"{$_REQUEST['username']}/" , content : /"{$_REQUEST['content']}/"}"
?>
$.getScript()
有时候，在页面初次加载时就取得所需的全部JavaScript文件时完全没有必要。
$.getScript()来加载.js文件
$(function(){
$('#send').click(function() {
$.getScript('test.js');//加载后自动执行JS
});
})
test.js内容为：
var comments = [
{
"username": "张三",
"content": "沙发."
},
{
"username": "李四",
"content": "板凳."
},
{
"username": "王五",
"content": "地板."
}
];
var html = '';
$.each( comments , function(commentIndex, comment) {
html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
})
$('#resText').html(html);
例子：
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
.block{width:80px;height:80px;background:#DDD;}
</style>
$(function(){
$.getScript('http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js',function(){
$("<p>加载JavaScript完毕</p>").appendTo("body");
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
});
})
//jquery.color.js为jQuery官方颜色插件
<button id="go">运行</button>
<div class="block"></div>
$.getJSON()
$(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);
})
})
})
test.json
[
{
"username": "张三",
"content": "沙发."
},
{
"username": "李四",
"content": "板凳."
},
{
"username": "王五",
"content": "地板."
}
]
例子2：
$(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;
}
});
}
);
})
})
http://api.flickr.com/services/feeds/photos_public.gnetags=car&tagmode=any&format=json&jsoncallback=?
得到的内容：
({
"title": "Recent Uploads tagged car",
"link": "http://www.flickr.com/photos/tags/car/",
"description": "",
"modified": "2010-01-26T16:13:42Z",
"generator": "http://www.flickr.com/",
"items": [
{
"title": "Hwy 395 4",
"link": "http://www.flickr.com/photos/adrianjm/4306207627/",
"media": {"m":"http://farm5.static.flickr.com/4058/4306207627_b555857078_m.jpg"},
"date_taken": "2010-01-26T11:13:42-08:00",
"description": "<p><a href=/"http://www.flickr.com/people/adrianjm//">adrianjm<//a> posted a photo:<//p> <p><a
href=/"http://www.flickr.com/photos/adrianjm/4306207627//" title=/"Hwy 395 4/"><img src=/"http://farm5.static.flickr.com/4058/4306207627_b555857078_m.jpg/"
width=/"240/" height=/"160/" alt=/"Hwy 395 4/" /><//a><//p> <p>This area of the 395 (not much further north than photos Hwy 395 photos 1 and 2) is significantly
greener and flatter than that of North Eastern California. <br /> <br /> Really enjoyable drive. Clear, blue skies, and nice scenery. The road was diverse enough so
that you never got bored.<//p>",
"published": "2010-01-26T16:13:42Z",
"author": "[email protected] (adrianjm)",
"author_id": "59761920@N00",
"tags": "from road trip car oregon shot south hwy eastern 395"
},
{
"title": "Parade car __D_09-12-07",
"link": "http://www.flickr.com/photos/pamelasag61/4306947712/",
"media": {"m":"http://farm5.static.flickr.com/4011/4306947712_0a94f2fd05_m.jpg"},
"date_taken": "2009-12-07T21:28:16-08:00",
"description": "<p><a href=/"http://www.flickr.com/people/pamelasag61//">pamelasag61<//a> posted a photo:<//p> <p><a
href=/"http://www.flickr.com/photos/pamelasag61/4306947712//" title=/"Parade car __D_09-12-07/"><img
src=/"http://farm5.static.flickr.com/4011/4306947712_0a94f2fd05_m.jpg/" width=/"240/" height=/"150/" alt=/"Parade car __D_09-12-07/" /><//a><//p> ",
"published": "2010-01-26T16:12:40Z",
"author": "[email protected] (pamelasag61)",
"author_id": "9592695@N03",
"tags": "man car parade"
},
{
"title": "2011 Ford Mustang GT Official Pace Car of the Daytona 500",
"link": "http://www.flickr.com/photos/dream-car-tv/4306162859/",
"media": {"m":"http://farm5.static.flickr.com/4006/4306162859_91446da327_m.jpg"},
"date_taken": "2010-01-26T16:50:54-08:00",
"description": "<p><a href=/"http://www.flickr.com/people/dream-car-tv//">www.Dream-car.tv<//a> posted a photo:<//p> <p><a
href=/"http://www.flickr.com/photos/dream-car-tv/4306162859//" title=/"2011 Ford Mustang GT Official Pace Car of the Daytona 500/"><img
src=/"http://farm5.static.flickr.com/4006/4306162859_91446da327_m.jpg/" width=/"240/" height=/"135/" alt=/"2011 Ford Mustang GT Official Pace Car of the Daytona 500/"
/><//a><//p> ",
"published": "2010-01-26T15:50:54Z",
"author": "[email protected] (www.Dream-car.tv)",
"author_id": "35138136@N04",
"tags": "ford car official pace mustang 500 gt daytona 2011"
}
]
})
什么是JASONP格式？
$.AJAX()方法
$.ajax(options) 改方法只有一个参数，但在这个对象里包含了$.ajax()所需要的请求设置以及回调函数，参数以Key/value的形式存在，所有的参数都是可选的。常用参数如下：
url String 发送请求的地址
type string 请求方式 默认为GET，注意其他HTTP请求方法，例如PUT和DELETE也可以使用，单仅部分浏览器支持
timeout Number 设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置
data Object或String 发送到服务器的数据。将自动转换为字符串格式。。防止这种自动转换，可以查看processData选项，对象必须为KEY/VALUE格式。
例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2
如果是数组，jquery将自动为不同值对应同一个名称
{foo:["bar1",bar2]}转换为&foo=bar1&foo=bar2
datatype String 预期服务器返回的数据类型。
如果不指定，jquery将自动根据http包MIME信息返回responseXML或responseText ，并作为回调参数传递。
可用的类型如下：
xml:返回XML文档，可用jquery处理
html:返回纯文本HTML信息，包含的script标签会在插入DOM时执行
script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意才远程请求时(不在同一个域下)，所有POST请求都将转为GET请求
域的概念是什么？
jason:返回JASON数据
jasonp:使用SONP形式调用函数时，例如myurl?callback=?，JQUERY将自动替换后一个"?"为正确的函数名，以执行回调函数
text:返回纯文本字符串
beforeSend Function 发送请求前可用修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中，如果返回false，可用取消本次请求。
XMLHttpRequest对象是唯一的参数。 function(XMLHttpRequest){this;}
complete Function 请求完成后调用的回调函数(请求成功或失败后均调用) function(XMLHttpRequest,textStatus){this;}
success Function 请求成功后调用的回调函数，由服务器返回，并根据datatype参数进行处理后的数据 function (data,textStatus){};
error Function 请求失败时被调用的函数 function(XMLHttpRequest ,textStatus,errorThrown){} //通常情况下textStatus,errorThrown只有其中一个包含信息
global Boolean 默认为true.表示是否触发全局ajax事件.设置为false，将不会触发全部ajax事件，AjaxStart或AjaxStop可用于控制各种Ajax事件
AjaxStart或AjaxStop是什么？
序列化元素
1.serialize()方法
如果表单元素复杂，使用ajax对数据的操作也太大，缺乏弹性。所以提供了这个方法。
该方法能够将DOM元素序列化为字符串，用于AJAX请求。
不光表单可以使用此方法，其他选择器选取的元素也都能使用它。
上面的例子改进成：
$(function(){
$("#send").click(function(){
$.get("get1.php", $("#form1").serialize() , function (data, textStatus){//.serialize()也会自动将编码问题解决，实现自动转码
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
var $data = $(":checkbox,:radio").serialize();
返回的是check=1&check=2&check=3&check=4&radio=3，仅仅对值的序列化为字符串形式
$(function(){
$("#send").click(function(){
$.get("get1.php", "username="+encodeURIComponent($('#username').val())+"&content="+encodeURIComponent($('#content').val()), function (data,
textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
encodeURIComponent和escape() encodeURI()的区别是什么？
unescape 不会被此方法编码的字符： @ * / +
encodeURI() 方法：把URI字符串采用UTF-8编码格式转化成escape格式的字符串。不会被此方法编码的字符：! @ # $& * ( ) = : / ; ? + '不会被此方法编码的字符：! * ( )
encodeURIComponent 不会被此方法编码的字符：! * ( )
因此，对于中文字符串来说，如果不希望把字符串编码格式转化成UTF-8格式的（比如原页面和目标页面的charset是一致的时候），只需要使用 escape。如果你的页面是GB2312或者其他的
编码，而接受参数的页面是UTF-8编码的，就要采用encodeURI或者 encodeURIComponent。
另外，encodeURI/encodeURIComponent是在javascript1.5之后引进的，escape则在javascript1.0版本就有。
2.serializeArray()
该方法不是返回字符串，而是将DOM元素序列化后，返回JSON格式的数据。
$(function(){
var fields = $(":checkbox,:radio").serializeArray();
console.log(fields);// Firebug输出
$.each( fields, function(i, field){
$("#results").append(field.value + " , ");
});
})
3.param()方法
它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。
$(function(){
var obj={a:1,b:2,c:3};
var k = $.param(obj);
alert(k) // 输出 a=1&b=2&c=3
})
返回的数据为：
a=1&b=2&c=3
JQuery中的Ajax全局事件
只要是调用JQUERY触发的Ajax的请求，就会触发公用的全局事件
Ajax请求开始时，会触发ajaxStart()
Ajax请求结束时，会触发ajaxStop()
ajaxComplete(callback) Ajax请求完成时执行的函数
ajaxEroor(callback)Ajax请求发生错误时执行的函数，捕捉到的错误可以最为最后一个参数传递
ajaxSend(callback)Ajax请求发送前执行的函数
ajaxSuccess(callback)Ajax请求成功时执行的函数
例子：
#loading{
width:80px;
height: 20px;
background:#bbb;
color:#000;
display:none;
}
<div id="loading">加载中...</div>
//共用这2个全局的ajax事件
$("#loading").ajaxStart(function(){
$(this).show();
});
$("#loading").ajaxStop(function(){
$(this).hide();
});
例子2：
$("status",xml)方法 通知jQuery去XML文档中寻找"status"标签。
$("status",xml).text() 寻找"status"标签的值
<style type="text/css">
body{
margin:0;
padding:0;
font-size:12px;
}
#messagewindow {
height: 250px;
border: 1px solid;
padding: 5px;
overflow: auto;
}
#wrapper {
margin: auto;
width: 438px;
}
</style>
<div id="wrapper">
<p id="messagewindow"><span id="loading">加载中...</span></p>
<form id="chatform" action="#">
姓名： <input type="text" id="author" size="50"/><br />
内容： <input type="text" id="msg" size="50"/> <br />
<input type="submit" value="发送" /><br />
</form>
</div>
$(function(){
//定义时间戳
timestamp = 0;
//调用更新信息函数
updateMsg();
//表单提交
$("#chatform").submit(function(){
$.post("backend.php",{
message: $("#msg").val(),
name: $("#author").val(),
action: "postmsg",
time: timestamp
}, function(xml) {
//清空信息文本框内容
$("#msg").val("");
//调用解析xml的函数
addMessages(xml);
});
return false; //阻止表单提交
});
});
//更新信息函数，每隔一定时间去服务端读取数据
function updateMsg(){
$.post("backend.php",{ time: timestamp }, function(xml) {
//移除掉 等待提示
$("#loading").remove();
//调用解析xml的函数
addMessages(xml);
});
//每隔4秒，读取一次.
setTimeout('updateMsg()', 4000);
}
//解析xml文档函数，把数据显示到页面上
function addMessages(xml) {
//如果状态为2，则终止
if($("status",xml).text() == "2") return;
//更新时间戳
timestamp = $("time",xml).text();
//$.each循环数据
$("message",xml).each(function() {
var author = $("author",this).text(); //发布者
var content = $("text",this).text(); //内容
var htmlcode = "<strong>"+author+"</strong>: "+content+"<br />";
$("#messagewindow").prepend( htmlcode ); //添加到文档中
});
}
php的内容
<?php
// 配置信息：
// 1,数据库连接的具体信息
// 2,我们要存储的消息的数目
// 3,用户进到聊天室的时候消息显示的数目
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "123456";
$dbname = "chat";
$store_num = 10;
$display_num = 10;
// 错误报告
error_reporting(E_ALL);
// 头部信息
header("Content-type: text/xml;charset=gb2312");
header("Cache-Control: no-cache");
//连接mysql
$dbconn = mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db($dbname,$dbconn);
//为容易操作请求数据,我们为请求中的每个参数设置一个变量,每个变量将把请求中的参数值作为其自己的值
//foreach语句遍历所有的POST数据,并且为每个参数创建一个变量,并且给它赋值
foreach($_POST as $key => $value){
$$key = mysql_real_escape_string($value, $dbconn);
}
//屏敝任何错误提示,判断action是否等于 postmsg
if(@$action == "postmsg"){
//插入数据
mysql_query("INSERT INTO messages (`user`,`msg`,`time`)
VALUES ('$name','$message',".time().")",$dbconn);
//删除数据(因为我们默认值存储10条数据)
mysql_query("DELETE FROM messages WHERE id <= ".
(mysql_insert_id($dbconn)-$store_num),$dbconn);
}
//查询数据
$messages = mysql_query("SELECT user,msg
FROM messages
WHERE time>$time
ORDER BY id ASC
LIMIT $display_num",$dbconn);
//是否有新记录
if(mysql_num_rows($messages) == 0) $status_code = 2;
else $status_code = 1;
//返回xml数据结构
echo "<?xml version=/"1.0/"?>/n";
echo "<response>/n";
echo "/t<status>$status_code</status>/n";
echo "/t<time>".time()."</time>/n";
if($status_code == 1){ //如果有记录
while($message = mysql_fetch_array($messages)){
$message['msg'] = htmlspecialchars(stripslashes($message['msg']));
echo "/t<message>/n";
echo "/t/t<author>$message[user]</author>/n";
echo "/t/t<text>$message[msg]</text>/n";
echo "/t</message>/n";
}
}
echo "</response>";
?>
jquery AJAX应用
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章