《jquery权威指南》读书笔记之第六章--Ajax在jquery中的应用

本文详细介绍了Ajax技术及其在网页开发中的应用,并深入探讨了如何使用jQuery简化Ajax操作,包括数据加载、处理及异步请求等多种场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、谈谈Ajax,Asynchronous JavaScript and XML的缩写,其核心是通过XMLHttpRequest对象以一种异步的方式,想服务器发送数据请求,并通过该对象接受请求返回的数据,从而完成人机交互的数据操作。这种利用Ajax技术进行的数据交互并不局限与web动态页面,在普通的静态HTML页面中同样可以实现,因此,在这样的背景下,Ajax技术在页面开发中得以广泛使用。
<html>
     <head>
           <meta charset="UTF-8">
           <style>
                body{background-color: gray;}
                div {background-color: pink;margin-top: 3px;}
           </style>
     </head>
     <body>
           <div class="divTitle">
                <input id="Button1" type="button" value="获取数据" onclick = "GetSendData()"/>
           </div>     
           <div class="divContent">
                <div id="divTip"></div>
           </div>
           <script>
                var objXmlHttp = null;   //先定义一个空变量
                function CreatXmlHttp(){
                      if(window.ActiveXObject){       //根据浏览器类型设定不同的值
                           objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                      }
                      else{
                          if(window.XMLHttpRequest){
                                objXmlHttp = new XMLHttpRequest();
                          }
                          else{
                                alert("初始化XMLHTTP错误");
                          }
                      }
                }
                function GetSendData(){
                     document.getElementById("divTip").innerHTML = "<img alt='' title='正在加载中....' src='../img/banner0.jpg' width='20%'/>";
                     var strSendUrl = "b1.html?data="+Date();
                     CreatXmlHttp();
                     objXmlHttp.open("GET",strSendUrl,true);
                     objXmlHttp.onreadystatechange = function(){
                           if(objXmlHttp.readyState == 4){
                                if(objXmlHttp.status == 200){
                                     document.getElementById("divTip").innerHTML = objXmlHttp.responseText;
                                }
                           }
                     }
                     objXmlHttp.send(null);
                }
           </script>
     </body>    
</html>
在javascript中,使用XMLHttpRequest对象异步加载数据;而在jquery中,使用load()方法可以轻松实现异步获取数据的功能。调用的语法格式是:
load(url,[data],[callback])
            url:被加载的页面地址
            data:表示发送到服务器的数据,其格式为key/value。
            callback:表示加载成功后,返回至加载页的回调函数
<div class="divTitle">
                <input id="Button1" type="button" value="获取数据" />
           </div>     
           <div class="divContent">
                <div id="divTip"></div>
           </div>
           <script>
                $(function(){
                     $("#Button1").click(function(){
                           $("#divTip").load("b1.html");
                     })
                });
           </script>


在load()方法中,参数url还可以用于过滤页面中的某类别的元素,如代码$("#divTip").load("b.html .divContent"),则表示获取页面b.html中类别名为“divContent”的全部元素

jquery中的全局函数getJSON()
    虽然使用load()方法可以很快的加载数据到页面中,但有时需要对获取的数据进行处理,如果将用load()方法获取的内容进行遍历,也可以进行数据的处理,但这样获取到内容必须先插入页面中,然后才能进行,因此,执行的效率不高
    $.getJSON(url, [data] [callback])
     <body>
           <div class="divTitle">
                <input id="Button1" type="button" value="获取数据" />
           </div>     
           <div class="divContent">
                <div id="divTip"></div>
           </div>
           <script>
                $(function(){
                     $("#Button1").click(function(){
                          $.getJSON("../data.json",function(data){
                                $("#divTip").empty();
                                var strHTML = "";
                                $.each(data,function(infoIndex,info){
                                     strHTML +="姓名:"+info["name"]+"<br />";
                                     strHTML +="年龄:"+info["age"]+"<br />";
                                     strHTML +="性别:"+info["sex"]+"<hr />"
                                })
                                $("#divTip").html(strHTML);
                           })
                })
                });
           </script>
     </body>    

jquery中的全局函数getScript()

在jquery中,除通过全局函数getJSON获取.json格式的文件内容外,还可以通过另外一个全局函数getScript()获取.js文件的内容。通过全局函数getScript()加载.js文件后,不仅可以向加载页面片段一样轻松的注入脚本,而且所注入的脚本自动执行,达到提高了页面的执行效率。
$.getScript(url, [callback])

<body>
           <div class="divTitle">
                <input id="Button1" type="button" value="获取数据" />
           </div>     
           <div class="divContent">
                <div id="divTip"></div>
           </div>
           <script>
                $(function(){
                     $("#Button1").click(function(){
                           $.getScript("../data.js")
                           })
                });
           </script>
     </body>    

//data.js
var data = [
{"name":"谭青","age":20,"sex":"女"},
{"name":"啊哈","age":10,"sex":"男"},
{"name":"成栋","age": 30,"sex":"男"}
]
var strHTML = "";
$.each(data,function(){
     strHTML +="姓名:"+this["name"]+"<br />";
     strHTML +="年龄:"+this["age"]+"<br />";
     strHTML +="性别:"+this["sex"]+"<hr />"
})
$("#divTip").html(strHTML);


$(function(){
                     $("#Button1").click(function(){
                          $.getScript("../data.js",function(){alert("返回数据成功!!")})         //执行回调函数
                           })
                });

jquery中的全局函数get()

    前面介绍的都是异步加载html、json、js,如果想要异步加载xml文件时可以使用全局函数`$.get(url,[data],[callback],[type]        type:表示返回数据的格式,如html、xml、js、json、text等
-------------请求服务器数据-------------
$.get()
<body>
<div class="divTitle">
<input id="content1" type="text" value="" />
<input id="Button1" type="button" value="获取数据" />
</div>
<div class="divContent">
<div id="divTip"></div>
</div>
<script>
$("#Button1").click(function(){
$.get("data.aspx",{name:encodeURI($("#content1").val())}, //如果名字是中文,则必须进行编码
function(data){
$("#divTip").empty()
.html(data);
}
)
})
</script>
</body>
/*******************************data.aspx*************************/
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["name"]); /*进行解码*/
string = strHTML = "<div>"
if(strName == "谭青"){
strHTML +="姓名:谭青<br />";
strHTML +="年龄:20";
strHTML +="性别:女"
}else if(strName == "啊哈"){
strHTML +="姓名:啊哈<br />";
strHTML +="年龄:10";
strHTML +="性别:男"
}else if(strName == "aa"){
strHTML +="姓名:aa<br />";
strHTML +="年龄:10";
strHTML +="性别:男"
}
strHTML +="</div>";
Response.Write(strHTML);
%>

$.post()
$.post(url, [data], [callback], [type])

$.post()也是待参数向服务器发出数据请求。全局函数$.post()$.get()在本质上没有太大的区别,所不同的是,GET方式怒视和传递数据量较大的数据,同时,其请求的历史信息会保存在浏览器的缓存中,有一定的安全风险。二姨POST方式向服务器发送数据请求,则不存在着两个方面的不足。

<script>
$("#Button1").click(function(){
$.post("data.aspx",{name:encodeURI($("#content1").val()),sex:encodeURI($("#getSex").val())}, //如果名字是中文,则必须进行编码
function(data){
$("#divTip").empty()
.html(data);
}
)
})
</script>

serialize()
在使用全局函数.get().post()向服务器传递参数时,其中的参数就是通过名称属性逐个搜索输入字段的方式进行传输的,如果表单的输入字段过多,这种方式就比较麻烦,而且不利于扩展。为了解决这个问题,jquery引入serialize()方法,该方法可以简化参数传值的方式

serialize()
功能:将所选择的DOM元素转换成能随AJAX传递的字符串,即序列化所选择的DOM元素

注意:虽然serialize()方法可以很完美的模拟浏览器提交表单的操作,同时解决了中文编码的问题,但他有自身的很多不足,如表单中有多项被选中时,该方法只能传递一项的值,因此,在选择传递参数时,需慎重考虑

$.ajax()该方法不仅可以很方便的实现load()、get()、post()三个全局函数完成的功能,还更多的关注实现过程中的细节。
$.ajax([option])
option为$.ajax()方法 中的请求设置,其格式为key/value

$.ajaxSetup([option])
功能:设置全局性Ajax默认选项,一次设置,全局有效这样大大简化了$.ajax()方法中细节的编写,
<script>             
        $(function(){     $.ajaxSetup({type:"get",url:"data.aspx",dataType:"xml"})  //为ajax设置默认值
        });
        $("#Button1").click(function(){
           $.ajax({success:function(data){alert("执行成功")}});
        })
   </script>

—————Ajax中的全局事件———-
由于在使用$.ajax()方法时,其中的选项参数global的值默认情况下为true,也就意味着,所有在执行的Ajax的数据请求,都绑定了全局事件

ajaxComplete(callback)------Ajax请求完成时 执行函数
ajaxError(callback)---------Ajax请求发生错误时执行函数,其中捕捉到的错误可以作为最后一个参数进行传递
ajaxSend(callback)-------Ajax请求发送前执行函数
ajaxStart(callback)------Ajax请求开始时执行函数
ajaxStop(callback)---------Ajax请求结束时执行函数
ajaxSuccess(callback)----------Ajax请求成功时执行函数

说明:在jquery中,所有的全局事件都是以XMLHttpRequest对象和设置作为参数传递给回调函数,在处理回调函数时,只要分析其传回的参数值即可

由于是全局性的事件,因此,只要有Ajax请求发生,就会触发所设置的全局事件,该事件被绑定在某个元素上,通过一些很人性化的显示或隐藏进行切换,极大的丰富了提交数据时的用户体验,同时,也建立了页面加载反馈系统

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值