Ajax(Asynchronous JavaScript and XML),其核心是通过XMLHttpRequest对象,以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从而完成人机交互的数据操作。这种利用Ajax技术进行的数据交互并不局限于Web动态页面,在普通的静态HTML页面中同样可以实现。
在页面开发过程中,为了加快整体页面打开的速度,对于某局部的数据采用异步读取(Ajax技术)的方法获取,这一方法的应用,极大地优化了用户的体验,优化了页面的执行。
一、传统的javascript方法实现Ajax功能:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script> var objXmlHttp = null; function createXmlHttp() { if (window.ActiveXObject) { objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { if (window.XMLHttpRequest) { objXmlHttp = new XMLHttpRequest(); } else { alert("initial error"); } } } function getRequestData() { var content = document.getElementById("content"); content.innerHTML = "加载中......"; var url = "request.html?date=" + Date(); //创建XMLHttpRequest对象 createXmlHttp(); //初始化XMLHttpRequest对象 objXmlHttp.open("GET", url, true); //回调函数 objXmlHttp.onreadystatechange = function () { //请求完成加载 if (objXmlHttp.readyState == 4) { //响应成功 if (objXmlHttp.status == 200) { content.innerHTML = objXmlHttp.responseText; } } } //send发送请求 objXmlHttp.send(null); } </script> </head> <body> <div class="wrapper"> <input type="button" name="name" value="请求" onclick="getRequestData()" /> <div id="content"> </div> </div> </body> </html> request.html <h1>Hello World!</h1>
二、jquery load()
其调用的语法格式为:
load(url, [data], [callback])
url:被加载的页面地址;
可选项[data]参数表示发送到服务器的数据,其格式为key/value;
可选项[callback]参数表示加载成功后,返回至加载页的回调函数;
在load()方法中,参数url还可以用于过滤页面中的某类别的元素,如代码$("#content").load("request.html .div"),则表示获取页面request.html中类别名为"div"的全部元素。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="scripts/jquery.min.js"></script> </head> <body> <div class="wrapper"> <input type="button" name="name" value="请求" id="request" /> <div id="content"> </div> </div> </body> <script> $(function () { $("#request").click(function () { $("#content").load("request.html"); }) }) </script> </html> request.html <h1>Hello World!</h1>
三、jquery getJSON()
使用load()方法可以很快地加载数据到页面中,但有时需要对获取的数据进行处理,如果将用load()方法获取的内容进行遍历,也可以进行数据的处理,但这样获取的内容必须先插入页面中,然后才能进行,因此,执行的效率不高。
在jquery中,专门有一个全局函数getJSON(),用于调用JSON格式的数据。
其调用的语法格式为:
$.getJSON(url, [data], [callback])
参数url表示请求的地址;
可选项[data]参数表示发送到服务器的数据,其格式为key/value;
可选项[callback]参数表示加载成功时执行的回调函数;
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="scripts/jquery.min.js"></script> </head> <body> <div class="wrapper"> <input type="button" name="name" value="请求" id="request" /> <div id="content"> </div> </div> </body> <script> $(function () { $("#request").click(function () { $.getJSON("users.js", function (data) { var content = $("#content"); content.empty(); var html = "<ul>"; $.each(data, function (index, item) { html += "<li>" + item.name + "</li>"; }) html += "</ul>"; content.html(html); }) }) }) </script> </html> users.js [ { "name":"wosiwoxing", "age":20 }, { "name":"pengjielee", "age":22 }, { "name":"meetbetterme", "age":24 } ]
四、jquery getScript()
在jquery中,除通过全局函数getJSON获取.json格式的文件内容外,还可以通过另外一个全局函数getScript()获取.js文件的内容。其实,在页面中获取.js文件的内容有很多方法。
$("<script type='text/javascript' src='users.js' />").appendTo("head");
在jquery中,通过全局函数getScript()加载.js文件后,不仅可以像加载页面片段一样轻松地注入脚本,而且所注入的脚本自动执行,大大提高了页面的执行效率。
其调用的语法格式为:
$.getScript(url, [callback])
参数url为等待加载的js文件地址;
可选项[callback]参数表示加载成功时执行的回调函数;
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="scripts/jquery.min.js"></script> </head> <body> <div class="wrapper"> <input type="button" name="name" value="请求" id="request" /> <div id="content"> </div> </div> </body> <script> $(function () { $("#request").click(function () { $.getScript("users.js", function (data) { alert("success"); }) }) }) </script> </html> users.js var data = [ { "name": "wosiwoxing", "age": 20 }, { "name": "pengjielee", "age": 22 }, { "name": "meetbetterme", "age": 24 } ]; var html = "<ul>"; $.each(data, function (index, item) { html += "<li>" + item.name + "</li>"; }) html += "</ul>"; $("#content").empty().html(html);
五、jquery get()
在日常的页面开发中,有时也会遇到使用xml文档保存数据的情况,对于这种格式的数据,jquery中使用全局函数$.get()进行访问。
其调用的语法格式为:
$.get(url, [data], [callback], [type])
参数url表示等待加载的数据地址;
可选项[data]参数表示发送到服务器的数据,其格式为key/value;
可选项[callback]参数表示加载成功时执行的回调函数;
可选项[type]参数表示返回数据的格式,如html、xml、js、json、text等。
在下面代码中,先通过each()方法遍历文档中的User节点,然后在遍历的过程中使用find方法,查询该节点中的name选项,并通过text()方法获取各选项的值。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="scripts/jquery.min.js"></script> </head> <body> <div class="wrapper"> <input type="button" name="name" value="请求" id="request" /> <div id="content"> </div> </div> </body> <script> $(function () { $("#request").click(function () { $.get("users.xml", function (data) { var html = "<ul>"; $(data).find("user").each(function () { var user = $(this); html += "<li>" + user.find("name").text() + "</li>"; }) $("#content").empty().html(html); }) }) }) </script> </html> users.xml <?xml version="1.0" encoding="utf-8" ?> <data> <user> <name>wosiwoxing</name> <age>20</age> </user> <user> <name>pengjielee</name> <age>22</age> </user> <user> <name>meetbetterme</name> <age>24</age> </user> </data>
Ajax技术最终体现在与服务器的动态数据实现人机交互中,即客户端传递带有参数的请求,服务器接收后,分析所传递来的请求,并做出相应的响应,发送对应数据至客户端,客户端接收请求返回的数据,从页实现了数据的双向传递。
六、$.get()请求服务器数据
客户端向服务端传递参数时,使用的格式是{key0:value0,key1:value1,...},"key0"为参数名称,"value0"为参数的值。
如果参数的值是中文格式,必须通过使用encodeURI()进行转码,当然,在客户端接收时,使用decodeURI()进行解码即可。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="scripts/jquery.min.js"></script> </head> <body> <div class="wrapper"> <input type="text" name="name" value=" " id="username" /> <input type="button" name="name" value="请求" id="request" /> <div id="content"> </div> </div> </body> <script> $(function () { $("#request").click(function () { $.get("Process.ashx", { name: encodeURI($("#username").val()) }, function (data) { $("#content").empty().html(data); }) }) }) </script> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Practice { public class Process : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string username = System.Web.HttpUtility.UrlDecode(context.Request["name"]); context.Response.Write(username); } public bool IsReusable { get { return false; } } } }
七、$.post()请求服务器数据
全局函数$.post()与$.get()在本质上没有太大的区别,所不同的是,get方式不适合传递数据量较大的数据,同样,其请求的历史信息会保存在浏览器的缓存中,有一定的安全风险。而post方式向服务器发送数据请求,则不存在这两个方面的不足。
其调用格式为:
$.post(url,[data],[callback],[type])
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="scripts/jquery.min.js"></script> </head> <body> <div class="wrapper"> <input type="text" name="name" value=" " id="username" /> <input type="button" name="name" value="请求" id="request" /> <div id="content"> </div> </div> </body> <script> $(function () { $("#request").click(function () { $.post("Process.ashx", { name: encodeURI($("#username").val()) }, function (data) { $("#content").empty().html(data); }) }) }) </script> </html> Process.ashx如上
八、serialize()序列化表单
在使用全局函数$.get()和$.post()向服务器传递参数时,其中的参数是通过名称属性逐个搜索输入字段的方式进行传输的,如果表单的输入字段过多,这种方式就比较麻烦,而且不利于拓展。
为了解决这个问题,jquery引入serialize()方法,该方法可以简化参数传值的方式。
其调用的语法格式如下:
serialize()
该方法的功能是将所选择的dom元素转换成能随ajax传递的字符串,即序列化所选择的dom元素。
虽然serialize()方法可以很完美地模拟浏览器提交表单的操作,同时自动解决了中文 编码问题,但它自身有很多不足,如表单中有多项被选中时,该方法只能传递一项的值,因此,在选择传递参数时,须慎重考虑。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="scripts/jquery.min.js"></script> </head> <body> <div class="wrapper"> <form id="regForm"> <input type="text" name="name" value="" id="username" placeholder="姓名" /> <input type="text" name="email" value="" id="email" placeholder="邮箱" /> <input type="button" name="name" value="请求" id="request" /> </form> <div id="content"> </div> </div> </body> <script> $(function () { $("#request").click(function () { $.post("Process.ashx", $("#regForm").serialize(), function (data) { var content=$("#content"); var html = content.html(); content.html(html + "<br />" + data); }) }) }) </script> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Practice { public class Process : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string username = System.Web.HttpUtility.UrlDecode(context.Request["name"]); string email = System.Web.HttpUtility.UrlDecode(context.Request["email"]); context.Response.Write(username + " : " + email); } public bool IsReusable { get { return false; } } } }
九、$.ajax()方法
在jquery中,还有一个功能更为强悍的最底层的方法$.ajax(),该方法不仅可以很方便地实现load()、get()、post()三个函数完成的功能,还更多地关注实现细节。
其调用的语法格式为:
$.ajax([options])
可选参数[options]为$.ajax()方法中的请求设置,其格式为key/value,既包含发送请求的参数,也含有服务器响应后回调的数据。
$.ajax()方法中的参数列表:
url:string,
发送请求的地址(默认为当前页面);
type:string,
数据请求方式(post或get),默认为get;
data:string或object,
发送到服务器的数据。如果不是字符串则自动转成字符串格式,如果是get请求方式,那么,该字符串将附在url后面;
dataType:string,
服务器返回的数据类型,如果没有指定,jquery将自动根据HTTP包MINE信息自动判断,服务器返回的数据根据自动判断的结果进行解析,传递给回调函数,其可用类型为:
html,返回纯文本的html信息,包含的script标记会在插入页面时被执行;
script,返回纯文本的javascript代码;
text,返回纯文本字符串;
xml,返回可被jquery处理的xml文档;
json,返回json格式的数据;
beforeSend:function
该函数用于发送请求前修改XMLHttpRequest对象,其中的参数就是XMLHttpRequest对象,由于该函数本身是jquery事件,因此,如果函数返回false,则表示取消本次事件;
complete:function
请求完成后调用的回调函数,该函数无论数据发送成功或失败都会调用,其中有两个参数:
第一个是XMLHttpRequest对象,
第二个是strStatus,用于描述成功请求类型的字符串;
success:function
请求成功后调用的回调函数,该函数有两个函数:
第一个是根据参数dataType处理后服务器返回的数据,
第二个是strStatus,用于描述状态的字符串;
error:function
请求失败后调用的回调函数,该函数有三个参数:
第一个是XMLHttpRequest对象,
第二个是出错信息strError,
第三个是捕捉到的错误对象strObject;
timeout:number
请求超时的时间(毫秒),该设置将覆盖$.ajaxSetup()方法中的同样设置;
global:boolean,
是否响应全局事件,默认是true,表示响应,如果设置成false,表示不响应,那么,全局事件$.ajaxStart等将不响应;
async:boolean,
是否为异步请求,默认是true,表示是异步,如果设置成false,表示是同步请求;
cache:boolean,
是否进行页面缓存,true表示进行缓存,false表示不进行页面缓存;
十、$.ajaxSetup()设置全局ajax
在使用$.ajax()方法时,有时需要调用多个$.ajax()方法,如果每个方法都设置其中的请求细节,将是一件十分麻烦的事。为了简化这种工作 ,jquery可以使用$.ajaxSetup()方法设置全局性的ajax默认选项,一次设置,全局有效,这样大大简化了$.ajax()方法中细节的编写。
其调用格式为:
$.ajaxSetup([options])
可选参数[options]是一个对象,通过该对象可以设置$.ajax()方法中的参数;
十一、Ajax中的全局事件
在jquery中,除了全局性的函数外,还有6个全局性的Ajax事件。由于在使用$.ajax()方法时,其中的选项参数global的值默认情况下为true,这也就意味着,所有在执行的ajax的数据请求,都绑定了全局事件。
jquery中的6个全局性ajax事件:
ajaxComplete(callback),ajax请求完成进执行函数;
ajaxError(callback),ajax请求发生错误时执行函数,其中捕捉到的错误可以作为最后一个参数进行传递;
ajaxSend(callback),ajax请求发送前执行函数;
ajaxStart(callback),ajax请求开始前执行函数;
ajaxStop(callback),ajax请求结束前执行函数;
ajaxSuccess(callback),ajax请求成功时执行函数;
在jquey中,使用ajax获取异步数据时,ajaxStart与ajaxStop这两个全局事件的使用 频率非常高。前者是当请求开始执行时触发,往往用于编写一些准备性的工作;后者是当请求结束时触发,在这一事件中,常常与前者配合,说明请求的最后进展状态。
在事件绑定中,ajax中的全局事件可以绑定在页面的任何一个元素中。