《jquery权威指南》读书笔记之第六章--Ajax在jquery中的应用
2018-01-05 17:11
357 查看
一、谈谈Ajax,Asynchronous JavaScript and XML的缩写,其核心是通过XMLHttpRequest对象以一种异步的方式,想服务器发送数据请求,并通过该对象接受请求返回的数据,从而完成人机交互的数据操作。这种利用Ajax技术进行的数据交互并不局限与web动态页面,在普通的静态HTML页面中同样可以实现,因此,在这样的背景下,Ajax技术在页面开发中得以广泛使用。
jquery中的全局函数getScript()
在jquery中,除通过全局函数getJSON获取.json格式的文件内容外,还可以通过另外一个全局函数getScript()获取.js文件的内容。通过全局函数getScript()加载.js文件后,不仅可以向加载页面片段一样轻松的注入脚本,而且所注入的脚本自动执行,达到提高了页面的执行效率。
$.getScript(url, [callback])
jquery中的全局函数get()
serialize()
在使用全局函数.get()和.post()向服务器传递参数时,其中的参数就是通过名称属性逐个搜索输入字段的方式进行传输的,如果表单的输入字段过多,这种方式就比较麻烦,而且不利于扩展。为了解决这个问题,jquery引入serialize()方法,该方法可以简化参数传值的方式
serialize()
功能:将所选择的DOM元素转换成能随AJAX传递的字符串,即序列化所选择的DOM元素
注意:虽然serialize()方法可以很完美的模拟浏览器提交表单的操作,同时解决了中文编码的问题,但他有自身的很多不足,如表单中有多项被选中时,该方法只能传递一项的值,因此,在选择传递参数时,需慎重考虑
—————Ajax中的全局事件———-
由于在使用$.ajax()方法时,其中的选项参数global的值默认情况下为true,也就意味着,所有在执行的Ajax的数据请求,都绑定了全局事件
说明:在jquery中,所有的全局事件都是以XMLHttpRequest对象和设置作为参数传递给回调函数,在处理回调函数时,只要分析其传回的参数值即可
由于是全局性的事件,因此,只要有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> 4000 <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请求发生,就会触发所设置的全局事件,该事件被绑定在某个元素上,通过一些很人性化的显示或隐藏进行切换,极大的丰富了提交数据时的用户体验,同时,也建立了页面加载反馈系统
相关文章推荐
- 《锋利的jQuery》第六章、 jQuery与Ajax应用
- 【读书笔记】【jQuery基础教程】【第六章--AJAX】
- 锋利的jQuery 第六章 jQuery于Ajax的应用
- 《锋利的jQuery》读书笔记 第6章 jQuery与Ajax的应用
- JQuery权威指南 第六章 Ajax应用
- PHP+jQuery实现Ajax分页效果:jPaginate插件的应用
- JQuery、JSON、Ajax在Servlet中的应用
- 应用HttpHandler, Json, JQuery, ASP.Net UserControl等技术处理 Ajax 的解决方案
- jquery与ajax的应用
- jQuery中的Ajax应用
- JQuery中Ajax应用
- jquery与ajax的应用2
- jQuery 实战读书笔记之第六章:事件本质
- Ajax在JQuery中的应用(Get方法练习2)
- Ajax(Asynchronous JavaScript and XML)在JQuery中的应用
- 传智播客AJAX第三天课——jQuery应用
- jquery与php交互的ajax应用第一课:检测用户注册时用户名是否存在
- jQuery 中 ajax 请求数据应用的一个小demo
- 简单的ajax、json、jquery应用
- jquery与ajax的应用