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

最新推荐文章于 2018-01-10 13:46:06 发布

原创最新推荐文章于 2018-01-10 13:46:06 发布 · 359 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

jquery

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

一、谈谈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请求成功时执行函数