Jquery系列（六） jQuery与Ajax

来源：互联网发布：关于地球的软件编辑：程序博客网时间：2024/05/21 06:34

引言：

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技术知识。

0 0