Asynchronous JavaScript and XML(异步JavaScript和XML),它并不是指一种单一的技术,而是有机地利用了一系列交互网页应用相关的技术所形成的结合体。
Ajax的优势和不足
1.Ajax的优势
- 不需要插件支持:只需允许JavaScript。
- 优秀的用户体验:更新数据不需刷新整个页面。
- 提供Web程序的性能:提供XMLHttpRequest对象向服务器提交希望提交的数据,按需发送。
- 减轻服务器和带宽的负担:作为用户与服务器之间的中间层,使两者响应异步化。
2.Ajax的不足
- 浏览器对XMLHttpRequest对象的支持度不足:复杂的兼容性问题。
- 破坏浏览器前进、“后退”按钮的正常功能
- 对搜索引擎的支持的不足
- 开发和调试工具的缺乏
Ajax的XMLHttpRequest对象
核心,Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。
绝大多数浏览器都提供了类似的属性和方法。
API:http://www.w3school.com.cn/xmldom/dom_http.asp
安装Web环境——AppServ
AppServ,PHP网页架站工具组合包。
包含的软件有:Apache、Apache Monitor、PHP、MySQL、PHP-Nuk和phpMy Admin。
1.下载AppServ
下载地址:http://www.appservnetwork.com
2.安装AppServ
点击“Next”按钮,输入网址、电子邮箱、密码等常用信息即可。端口默认为80,当然也可以在安装时进行修改。
安装教程:https://www.appserv.org/en/howto/
3.配置示例程序
将示例程序复制到安装好后的AppServ\www文件夹中,然后在地址栏输入
http://localhost/jQuery/book/sourceCode/Ch6/php/
AppServ我觉得没有特别简单,wampserver更简单
下载地址:https://sourceforge.net/projects/wampserver/
编写第1个Ajax例子
传统的JavaScript实现的Ajax例子。
HTML
<input type="button" id="" value="Ajax提交" onclick="Ajax();" />
<div id="resText"></div>
JavaScript
//通过这个函数来异步获取信息
function Ajax() {
var xmlHttpReq = null; //声明一个空对象用来装入XMLHttpRequest
if (window.ActiveXObject) { //IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) { //除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
xmlHttpReq = new XMLHttpRequest(); //实例化一个XMLHttpRequest
}
if (xmlHttpReq != null) { //如果对象实例化成功
xmlHttpReq.open("GET", "test.asp", true); //调用open()方法并采用异步方式
xmlHttpReq.onreadystatechange = RequestCallBack; //设置回调函数
xmlHttpReq.send(null); //因为使用get方式提交,所以可以使用null参调用
}
function RequestCallBack() { //一旦readyState值改变,将会调用这个函数
if (xmlHttpReq.readyState == 4) {
if (xmlHttpReq.status == 200) {
//将xmlHttpReq.responseText的值赋给ID为 resText 的元素
document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
}
}
}
}
XMLHttpRequest对象的很多属性和方法,对于想快速入门Ajax的人不太容易,jQuery提供了一些日常开发中需要的快捷操作。如load、ajax、get和post等。
jQuery中的Ajax
jQuery对象Ajax操作进行了封装,在jQuery中$.ajax()
方法属于最底层的方法,第2层(使用频率最高)是load()
、$.get()
和$.post()
方法,第3层是$.getScript()
和$.getJSON()
方法。
load()方法
1.载入HTML文档
能载入远程HTML代码并插入DOM中。
结构:load( url [, data] [, callback] )
- url : 类型(String),请求HTML页面的URL地址。
- data(可选):类型(Object),发送至服务器的key/value数据。
- callback(可选):类型(Function),请求完成时的回调函数,无论请求成功或失败。
示例:
HTML
test.html
<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>
新建测试HTML文档
<input type="button" id="send" value="Ajax获取" />
<div class="comment">
已有评论:
</div>
<div id="resText"></div>
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;
}
jQuery
$(function () {
$("#send").click(function () {
$("#resText").load("test.html");
})
})
load()方法完成了原本很繁琐的工作。开发人员只需要使用jQuery选择器为HTML片段指定目标位置。
参数:将要加载的文件的URL。
test.html的样式是在新建的HTML文档上加载的。
2.筛选载入的HTML文档
通过为load()方法的URL参数指定选择符,就可以从加载过来的HTML文档里筛选出所需的内容。
URL参数的语法结构:
url selector(URL和选择器之间有一个空格)
示例:加载test.html页面中class为“para”的内容
$("#resText").load("test.html .para");
3.传递方式
根据参数data来自动指定。
没有参数传递,采用GET方式传递,反之,则会自动转换为POST方式。
//无参数传递,则是GET方式
$("#resText").load("test.php",function(){
//...
});
//有参数传递,则是POST方式
$("#resText").load("test.php", {name: "rain", age: "22"}, function(){
//...
});
4.回调参数
对于必须加载完毕后才能继续的操作。
3个参数:
- 请求返回的内容
- 请求状态
- XMLHttpRequest对象
jQuery示例
$(function(){
$("#send").click(function(){
$("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
//responseText : 请求返回的内容
//textStatus : 请求状态: success、error、notmodified、timeout 4种。
//XMLHttpRequest : XMLHttpRequest对象
alert( $(this).html() ); //在这里this指向的是当前的DOM对象,即 $("#iptText")[0]
alert(responseText); //请求返回的内容
alert(textStatus); //请求状态:success,error
alert(XMLHttpRequest); //XMLHttpRequest对象
console.log(XMLHttpRequest); //XMLHttpRequest对象
});
})
})
$.get()
方法和$.post()
方法
传递一些参数给服务器中。
1.$.get()方法
使用GET方式来进行异步请求。
结构:
$.get( url [, data] [, callback] [, type] );
type:类型(String),服务器端返回内容的格式,包括xml、html、script、json、text和_default
示例
HTML
<form id="form1" action="#">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea name="content" id="content"></textarea></p>
<p><input type="button" id="send" value="提交" /></p>
</form>
<div class='comment'>已有评论:</div>
<div id="resText">
</div>
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;
}
jQuery
不知为何,网上提供的源码,后端脚本我只有拍黄片(php)的好用。
若服务端返回的数据是HTML片段
$(function(){
$("#send").click(function(){
$.get("get1.php", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
get1.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>";
?>
若服务端返回的数据是XML片段
$(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); // 把返回的数据添加到页面上
});
})
})
get2.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>";
?>
XML文档的可移植性是其他数据格式无法比拟的。
XML文档体积相对较大,与其他文件格式相比,解析和操作它们的速度要慢一些。
若服务端返回的数据是JSON文件
$(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");
})
})
get3.php
<?php
header("Content-Type:text/html; charset=utf-8");
echo "{ \"username\" : \"{$_REQUEST['username']}\" , \"content\" : \"{$_REQUEST['content']}\"}"
?>
JSON文件可以方便重用,简洁,易阅读。
将$.get()
方法的第4个参数(type)设置为“json”来代表期待服务器端返回的数据格式。
JSON的格式非常严格。
总结
1.不需要与其他应用程序共享数据:HTML。
2.数据需要重用:JSON。
3.远程应用程序未知:XML。
2. $.post()
方法
结构和使用方式和$.get()
方法相同。
区别:
1.GET请求参数跟在URL后,POST请求是作为HTTP消息的实体内容。
2.GET方式传输的数据有大小限制(不能大于2KB),POST理论上不受限制。
3.GET方式请求的数据会被浏览器缓存,不安全。
4.两种方式传递的数据在服务器的获取不相同。
实例:
$(function () {
$("#send").click(function () {
$.post("post1.php", {
username: $("#username").val(),
content: $("#content").val()
}, function (data, textStatus) {
$("#resText").html(data); // 把返回的数据添加到页面上
});
})
})
php中使用$_REQUEST[]来获取。
<?php
header("Content-Type:text/html; charset=utf-8");
echo "<div class='comment'><h6>{$_REQUEST['username']}:</h6><p class='para'>{$_REQUEST['content']}</p></div>";
?>
load()方法可以达到相同效果
$(function () {
$("#send").click(function(){
$("#resText").load("post1.php",{
username : $("#username").val(),
content : $("#content").val()
})
})
})
关于$.ajax()方法:
不仅能实现上面get、post、load三个方法的功能,还有
- beforeSend:提交前回调函数。
- error:请求失败后处理。
- success:请求成功后处理。
- complete:请求完成后处理。
$.getScript()
方法和$.getJSON()
方法
1. $.getScript()
动态创建script标签
$(document.createElement("script")).sttr("src","test.js").appendTo("head");
或者
$("<script type='text/javascript' src='test.js'/>").appendTo("head");
以上两种方式都不理想。
使用$.getScript()
$(function () {
$('#send').click(function () {
$.getScript('test.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);
有回调函数
$(function () {
$.getScript('jquery.color.js', function () {
$("<p>加载JavaScript完毕</p>").appendTo("body");
$("#go").click(function () {
$(".block").animate({
backgroundColor: 'pink'
}, 1000)
.animate({
backgroundColor: 'blue'
}, 1000);
});
});
})
2. $.getJSON()
用于加载JSON文件。
$(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": "地板."
}
]
通过使用JSONP形式的对调函数来加载其他网站的JSON数据。
$(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;
}
});
}
);
})
搜索汽车类别的4张最新图片。
jsoncallback=?中的"?"jQuery将自动将其替换为正确的函数名,以执行回调函数。
JSONP:JSON with Padding,是一个非官方协议。
$.ajax(
)方法
是jQuery最底层的Ajax实现。
结构:
$.ajax(options)
参数:
- url
- type:GET、POST。
- timeout:请求超时时间。
- data
- dataType:xml、html、script、json、jsonp、jQuery、text。
- beforeSend:请求前
- complete:请求完成
- success:请求成功
- error:请求失败
- global:是否全局Ajax事件,默认true。
实例
实现$.getScript()
$(function () {
$('#send').click(function () {
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
});
})
实现$.getJSON()
$(function () {
$('#send').click(function () {
$.ajax({
type: "GET",
url: "test.json",
dataType: "json",
success: 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);
}
});
});
})
序列化元素
1. serialize()方法
serialize()方法:作为一个jQuery对象,能够将DOM元素内容序列化为字符串,用于Ajax请求。
使用Ajax技术异步提交表单,并将服务器返回的数据显示在当前页面中。
实例:
HTML
<form id="form1" action="#">
<p>评论:</p>
<p>姓名: <input type="text" name="username" id="username" /></p>
<p>内容: <textarea name="content" id="content" rows="2" cols="20"></textarea></p>
<p><input type="button" id="send" value="提交" /></p>
</form>
<div class='comment'>已有评论:</div>
<div id="resText">
</div>
jQuery
$(function () {
$("#send").click(function () {
$.get("get1.php", $("#form1").serialize(), function (data, textStatus) {
$("#resText").html(data); // 把返回的数据添加到页面上
});
})
})
$.get()方法的数据,可以说映射方式,也可以是字符串方式:
{
username : $("#username").val(),
content : $("#content".val()
}
或者
"username="+encodeURIComponent($('#username').val())
+"&content="+encodeURIComponent($('#content').val())
$(function () {
$("#send").click(function () {
$.get("get1.php", "username=" + encodeURIComponent($('#username').val()) + "&content=" + encodeURIComponent($(
'#content').val()), function (data, textStatus) {
$("#resText").html(data); // 把返回的数据添加到页面上
});
})
})
使用字符串方式需要注意字符编码(中文问题)。
解决方法:使用serialize()方法
实例:将复选框和单选框的值序列化为字符串形式。
$(function () {
$("#send").click(function () {
var $data = $(":checkbox,:radio").serialize();
alert($data);
})
})
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
})
jQuery中的Ajax全局事件
Ajax请求开始:触发ajaxStart()方法的回调函数。
Ajax请求结束:触发ajaxStop()方法的回调函数。
实例:模拟数据请求过程文字提示
$(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 () {
$.get("get1.php", {
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();
});
})
get1.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>";
?>
Ajax全局事件中的方法
- Ajax请求开始:ajaxStart(callback)方法。
- Ajax请求结束:ajaxStop(callback)方法。
- Ajax请求完成:ajaxComplete(callback)方法。
- Ajax请求发生错误:ajaxError(callback)方法。
- Ajax请求发送前:ajaxSend(callback)方法。
- Ajax请求成功:ajaxSuccess(callback)方法。
基于jQuery的Ajax聊天室程序
步骤:
- 基本设想
- 设计数据库
--Database "chat"
CREATE TABLE `messages` (
`id` int(7) NOT NULL auto_increment,
`user` varchar(255) NOT NULL,
`msg` text NOT NULL,
`time` int(9) NOT NULL,
PRIMARY KEY (`id`)
);
- 服务器端处理
1.服务器端链接数据库
2.用户提交信息插入数据库
3.从数据库中获取新的信息并以XML格式输出返回
XML格式如下:
<?xml version="1.0" encoding="UTF-8"?>
<response>
<status>1</status>
<time>1170323512</time>
<message>
<author>张三</author>
<text>沙发!</text>
</message>
<message>
<author>李四</author>
<text>板凳!</text>
</message>
</response>
- 客户端处理
1.提交用户聊天信息
2.每隔一定时间发起查询数据库中聊天记录的请求
- 客户端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>newDemo</title>
<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>
</head>
<body>
<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>
<!-- 引入jQuery -->
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(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); //添加到文档中
});
}
//]]>
</script>
</body>
</html>
数据库访问不了,哎,小白弄了一天了,确实是一头雾水,等以后学到数据库和后端语言在回来改正!!!