1 ajax简介
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
(1)XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject ::
创建 XMLHttpRequest 对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
(2)向服务器发送请求
XMLHttpRequest 对象用于和服务器交换数据。当你的页面全部加载完毕后,客户端会通过 XMLHttpRequest 对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据。
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();
一个简单 POST 请求:
xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();
open() 方法的url参数是服务器上文件的地址:
该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。
当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
(3)服务器响应
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
如果来自服务器的响应并非 XML,请使用 responseText 属性。
responseText 属性返回字符串形式的响应,因此您可以这样使用:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
对于 responseText 属性,只有当 readyState 属性值变为4时,responseText 属性才可用,因为这表明AJAX请求已经结束!
如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
(4)onreadystatechange 事件
当发送一个请求后,客户端需要确定这个请求什么时候会完成,因此,XMLHttpRequest对象提供了 onreadystatechange 事件机制来捕获请求的状态,继而实现响应。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
(5)回调函数
回调函数是一种以参数形式传递给另一个函数的函数。如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
2 安装web环境 appserv
安装成功以后,将编写程序文件放到Appserv\www文件夹中,然后在地址栏输入:http://localhost/ajaxstudy出现如下结果:
3 jQuery中的ajax
jQuery对ajax操作进行了封装
底层方法 | $.ajax() |
第二层 | load() $.get() $.post() |
第三层 | $.getScript() $.getJSON() |
(1)load方法 能够远程载入并插入DOM中
load(url [,data][,callback])
url | 字符串类型(string) | 请求html页面的url地址 |
data[可选] | 对象(object) | 发送至服务器的key/value数据 |
callback[可选] | 功能函数(function) | 请求完成时的回调函数,无论请求成功或失败 |
首先构造一个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>
再新建一个空白页面
<input type="button" id="send" value="ajax获取"/>
<div class="comment">已有评论</div>
<div id="resText"></div>
jQuery代码如下
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
})
})
注意:test.html页面中没有样式,但现在加载的内容有样式了,这些样式在主页面中添加的,主页面相应的样式会立即应用到加载的样式上。
筛选载入的HTML文档,load()方法的URL参数的语法结构为:“url selector”,url 和选择器之间有一个空格。例如想要载入test.html页面中的class为“para”的内容,用如下代码来完成:
$("#resText").load("test.html .para");
运行结果如下:
传递方式:load()方法的传递方式根据data来自动指定,没有参数传递,采用get()方式传递,反之为post()方式。
$("#resText").load("test.html,function(){
});//无参数传递,get方式
$("#resText").load("test.html,{name:"rain",age:"22"},function(){
});//有参数传递,post方式
回调参数,load()方法提供了回调函数callback,该函数有三个参数:
responseTest | 请求返回的内容 |
textStatus | 请求状态,共4种 |
XMLHttpRequest | XMLHttpRequest对象 |
(2)$.get()方法和$.post()方法
load()方法从服务器上获取静态的数据文件,而在项目中,如果需要传递一些参数给服务器中的页面,可以使用$.get()方法和$.post()方法,它们是jQuery中的全局函数。
$.get()方法用get()方式来进行异步请求
$.get(url [,data] [,callback] [,type])
url:请求html页面的url地址
data: 发送至服务器的key/value数据会作为QueryString附加到请求url中
callback:载入成功时的回掉函数
其中type为服务器端返回内容的样式,包括xml,html,script,json,text和_default
$("#send").click(function(){
$.get("get1.html",{
username:$("#username").val(),
content:$("#content").val()
},function(data,textStatus){
$("#resText").html(data); //将返回的数据添加到页面上
})
})
$.get()方法的回调函数接收两个参数,data 返回的内容,可以是xml,json,html;textStatus 请求状态,而且回调函数只有当数据成功返回后才被调用,这点和load()方法不一样。
$.post()方法 与$.get()方法的结构和使用方式都相同,几点区别如下:
参数传递 | get请求会将参数跟在url后进行传递,post请求则是作为HTTP请求的实体内容发送给web服务器 |
传输数据大小 | get传输数据大大小一般不超过2kb,post传输数据大小不受限制 |
缓存问题 | get请求的数据会被浏览器缓存起来,会带来安全性问题 |
传递的数据在服务器端的获取方式 | php中,get $_GET[]而post 是$_POST[]获取 |
$("#send").click(function(){
$.post("get1.html",{
username:$("#username").val(),
content:$("#content").val()
},function(data,textStatus){
$("#resText").append(data); //将返回的数据添加到页面上
})
})
另外当load()带有参数传递时,会使用post方式发送请求,可以用load()方法来完成同样的功能。
$("#send").click(function(){
$("#send").load("post1.html",{
username:$("#username").val(),
content:$("#content").val()
})
})
如果还需要编写一些复杂的ajax程序,就需要用到,jQuery中的$.ajax()方法。它不仅能实现与load()、$.get()、$.post()方法同样的功能,而且还能设定beforeSend(提交前回调函数)\error(请求失败后处理)、success(请求成功后处理)以及complete(请求完成后处理),通过这些回调函数,可以给用户更多的ajax提示信息。
(3) $.getScript()和$.getJson()方法
$.getScript()方法
在页面初次加载时获取全部的js文件是没有必要的,当然,可以在需要哪个js文件时,动态的创建<script>标签
$("<script type="text/javascript" src="test.js"></script>").appendTo("head");
但是这种方式并不理想,为此jQuery提供了$.getScript()方法来直接加载js文件。
这里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);
$("#send").click(function(){
$.getScript("test.js");
})
运行结果:
$.getJson()方法
用于加载json文件,与$.getScript()方法的用法相同。
$("#send").click(function(){
$.getScript("test.json");
})
但是,当点击“加载”按钮,网页看不到任何效果,虽然函数加载了json文件,但是并没有告诉javascript对返回的数据如何处理。为此,jQuery提供了回调函数,在回调函数里处理返回的数据。
json文件如下:
[
{
"username": "张三",
"content": "沙发."
},
{
"username": "李四",
"content": "板凳."
},
{
"username": "王五",
"content": "地板."
}
]
$("#send").click(function(){
$.getJSON("test.json",function(data){
// data:返回的数据
});
})
举例如下:
$(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);
});
});
})
运行结果如下:
(4)$.ajax()方法
$.ajax(options)该方法只有一个参数,但这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息,参数以key/value的形式存在,所有参数都是可选的。
语法如下:
$.ajax({name:value, name:value, ... })
常用的参数解释
4 序列化元素
(1)serialize()方法
此方法也是作用于一个jQuery对象,能够将DOM元素内容序列化为字符串,用于ajax请求
$("#send").click(function(){
$.get("get1.html",$("#form1").serialize(),function(data,textStatus){
$("#resText").html(data);
});
});
serialize()方法作用于一个jQuery对象,不止表单可以使用他,其它选择器选取的元素也都能使用他。实例如下:
$(function(){
$("#send").click(function(){
var $data = $(":checkbox,:radio").serialize();
alert( $data );
})
})
html代码段如下:
<input type="checkbox" name="check" value="1" checked/>篮球<br/>
<input type="checkbox" name="check" value="2" />足球<br/>
<input type="checkbox" name="check" value="3" />乒乓球<br/>
<input type="checkbox" name="check" value="4" />羽毛球<br/>
<input type="radio" name="radio" value="1" checked/>篮球<br/>
<input type="radio" name="radio" value="2" />足球<br/>
<input type="radio" name="radio" value="3" />乒乓球<br/>
<input type="radio" name="radio" value="4" />羽毛球<br/>
<button id="send">提交</button>
点击提交后,运行结果如下:
(2)serializeArray()方法
该方法不是返回字符串,将dom元素序列化以后,返回json格式的数据,举例如下:
$("#send").click(function(){
$.get("get1.html",$("#form1").serialize(),function(data,textStatus){
$("#resText").html(data);
});
});
serialize()方法作用于一个jQuery对象,不止表单可以使用他,其它选择器选取的元素也都能使用他。实例如下:
$(function(){
var fields = $(":checkbox,:radio").serializeArray();
console.log(fields);// Firebug输出
$.each( fields, function(i, field){
$("#results").append(field.value + " , ");
});
})
html代码段如下:
<p id="results"><b>结果:</b> </p>
<input type="checkbox" name="check" value="1" checked="checked"/>篮球<br/>
<input type="checkbox" name="check" value="2" checked="checked"/>足球<br/>
<input type="checkbox" name="check" value="3" checked="checked"/>乒乓球<br/>
<input type="checkbox" name="check" value="4" />羽毛球<br/>
<input type="radio" name="radio" value="1" checked="checked"/>篮球<br/>
<input type="radio" name="radio" value="2" />足球<br/>
<input type="radio" name="radio" value="3" />乒乓球<br/>
<input type="radio" name="radio" value="4" />羽毛球<br/>
运行结果如下:
(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
})
5 jQuery中的ajax全局事件
通过jQuery提供的一些自定义全局函数,能够为各种与ajax相关的事件注册回调函数。例如,当Ajax请求开始时,会触发ajaxStart()方法的回调函数,当Ajax请求结束时,会触发ajaxStop()方法的回调函数。这些方法都是全局的方法,因此无论创建他们的代码位于何处,只要右ajax请求发生,就会触发他们。
$("#loading").ajaxStart(function(){
$(this).show();
});
$("#loading").ajaxStop(function(){
$(this).hide();
});
html代码段如下:
<div id="loading">加载中</div>
这样一来,在ajax请求中,只要图片还未加载完毕,就会一直显示“加载中”。
如果想使某个ajax请求不受全局方法的影响,可以在使用$.ajax(options)方法时,将参数中的global设置为false。
$.ajax({
url:"test.html",
global:false
});