引言:
jQuery对Ajax操作进行了封装,可以在jQuery应用中方便地进行应用和实现。
概述:
Ajax(Asynchronous JavaScript and XML)概述:是异步JavaScript和XML技术,它有机地将一系列交互式网页应用技术结合起来,它的出现揭开了无刷新更新页面的新时代,替代了传统的Web页面刷新模式。
内容:
一 Ajax基础知识:
1 原理:通过XMLHttpRequest对象向服务器发送异步请求,从服务器获得数据,然后利用JavaScript操作DOM来更新页面。
2 作用:Ajax使用JavaScript在浏览器与服务器之间进行数据的发送和接收,通过在后台与服务器交换数据,而不是每当用户做出改变时重载整个Web页面,从而使网页更迅速第响应用户的操作。
3 核心:XMLHttpRequest是Ajax的核心机制,JavaScript可以及时向服务器提出请求和处理响应,而不阻塞用户,从而达到页面屋刷新的效果。
4 创建XMLHttpRequest实例:
function CreateXmlHttp(){
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest){
xmlhttp = new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
try{
xmlhttp = new ActiveXObject("msxm12.XMLHTTP");
}
catch (ex) {}
}
}
}
function use(){
var data = document.getElementById("username").value;
CreateXmlHttp();
if(!xmlhttp)
{
alert("创建xmlhttp对象异常!");
return false;
}
xmlhttp.open("POST",url,false);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
document.getElementById("user1").innerHTML = "数据正在加载...";
if(xmlhttp.status ==200){
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send()
二 jQuery中的Ajax方法:
1 最底层方法$.ajax():
实现原理:通过HTTP请求加载远程数据,并返回其创建的XMLHttpRequest对象,下面的方法都是基于本方法构建的,可以用本方法代替其它方法。
基本语法:$(selector).jQuery.ajax([settings])
实例:代替$.getScript()方法
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "demo.js"
dataType: "script"
});
});
})
2 第二层方法load()、$.get()和$.post():
(1)load()方法:
实现原理: 通过Ajax请求从服务器加载数据,并把返回的数据放置到指定的元素中。
基本语法格式:load(url,data,function(response,status,xhr))
实例:这个实例需要将load.htm以及jQuery的js文件和demo.txt文件部署在Tomcat服务器的\webapps\ROOT根目录中,访问该页面的URL地址为http://127.0.0.1:8080/load.htm
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){ //绑定click事件
$('#test').load('/demo.text');
})
})
</script>
</head>
<body>
<h3 id="test">请单击下面的按钮,通过jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部文件的内容</button>
</body>
</html
(2)$.get()方法:
实现原理:通过HTTP GET请求从服务器上请求数据。与load()方法不同之处在于load方法允许规定要插入的远程文档的某个部分,可以通过url参数的特殊语法实现。
基本语法:$(selector).get(url,data,success(response,status,xhr),dataType)
实例:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("button").click(function(){ //绑定click事件
$.get("/demo.txt",function(data,status){//载入服务器端文本文件
alert("数据:" + data + "\n状态:" + status);//获取返回结果并显示
});
});
});
</script>
</head>
<body>
<button>向页面发送 HTTP GET 请求,然后获得返回的结果</button>
</body>
</html
(3)$.post()方法:
实现原理:通过HTTP POST请求从服务器载入数据。
基本语法:$(selector).post(url,data,success(data,textStatus,jqXHR),dataType)。
实例:
$("button").click(function(){
$.post("demo_post.asp",
{
name:"liming",
city:"zhangjiakou"
},
function(data,status){
alert("Data:" + data + "\nStatus:" + status);
});
});
3 第三层方法$.getScript()方法和$.getJSON()方法:
(1)$.getScript()方法:
实现原理:通过HTTP GET请求载入并执行 JavaScript文件
基本语法:$(selector).getScript(url,success(response,status)
实例:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type ="text/javascript">
$(document).ready(function(){
$("button").click(function(){ //绑定click事件
$.getScript("demo_script.js"); //载入服务器端JavaScript文件
});
});
</script>
</head>
<body>
<button>使用 Ajax 来获得并运行一个JavaScript文件</button>
</body>
</html>
(2)$.getJSON()方法:
实现原理:可以通过HTTP GET请求载入JSON数据。
基本语法:$(selector).getJSON(url,data,success(data,status,xhr))
实例:略。
三 jQuery中的Ajax事件:
1 全局事件:
ajaxStart :开始新的Ajax请求,并且此时没有其他Ajax请求正在进行;
ajaxSend :请求开始前触发的全局事件;
ajaxSuccess :全局的请求成功;
ajaxError :全局的发生错误时触发;
ajaxComplete :全局的请求完成触发;
ajaxStop:当没有Ajax正在进行中的时候触发;
基本语法:
$(document).ajaxStart(onStart)
.ajaxComplete(onComplete)
.ajaxSuccess(onSuccess);
function onStart(event){
//开始Ajax请求事件的处理程序
}
function onComplete(event, xhr ,settings){
//全局请求完成事件的处理程序
}
function onSuccess (event , xhr , settings){
//全局请求成功事件的处理程序
}
不产生全局事件设置:可以通过设置$.ajax()方法的global选项为false,来将全局事件禁用。
$.ajax({
url:"test.html",
global:false, //禁用全局Ajax事件
//....
});<strong><span style="font-size:18px;"> </span></strong>
2 局部事件:
beforeSend:当一个Ajax请求开始时触发。如果需要,可以在这里设置XHR对象;
success:请求成功时触发,即服务器没有返回错误,返回的数据也没有错误;
error:仅当发生错误时触发。无法同时执行success和error俩个回调函数;
ajaxComplete : 全局的请求完成时触发。
基本语法:
$.ajax({
beforeSend : function(){
//beforeSend 事件处理程序
},
complete : function(){
//complete事件处理程序
}
// ...
})
总结:
Ajax的出现,迅速提高了网页数据传输的效率,同时也得到了广大Web开发人员的认可和关注。目前使用的都是Ajax的基本方法$.ajax(),以后还需要扩展更多Ajax技术知识。