第六章 jQuery与Ajax的应用
6.1 Ajax的优势和不足
6.1.1 Ajax的优势
1. 不需要插件支持
Ajax不需要任何浏览器插件,就可以被绝大多数主流浏览器所支持,用户只需要允许JavaScript在浏览器上执行即可。
2. 优秀的用户体验
Ajax能在不刷新整个页面的前提下更新数据,这使得Web应用程序能更为迅速地回应用户的操作。
3. 提高Web程序的性能
与传统模式相比,Ajax模式在性能上的最大区别就在于传输数据的方式,在传统模式中,数据提交是通过表单来实现的,而数据获取是靠页面刷新来重新获取整页的内容。而Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的数据,即按需发送。
4. 减轻服务器的带宽的负担
Ajax的工作原理相当于在用户和服务器之间加了一个中间层,使用户操作与服务器 响应异步化。它在客户端创建Ajax引擎,把传统方式下的一些服务器负担的工作转移到客户端,便于客户端资源来处理,减轻服务器和带宽的负担。
6.1.2 Ajax的不足
1. 浏览器对XMLHttpRequest对象的支持度不足
Ajax的不足之一首先来自于浏览器。程序员必须花费大量的精力编码以兼顾各个浏览器之间的差别,来让Ajax应用能够很好地兼容各个浏览器。
2. 破坏浏览器前进、后退按钮的正常功能
在Ajax中前进和后退按钮的功能都会失效。
3. 对搜索引擎的支持的不足
对于搜索引擎的支持也是Ajax的一项缺憾。搜索相关的爬虫程序现在还不能理解那些奇怪的JavaScript代码和因此引起的页面内容的变化。
4. 开发和调试工具的缺乏
JavaScript是Ajax的重要组成部分,在目前,缺少很好的JavaScript开发和调试工具。
6.2 Ajax的XMLHttpRequest对象
Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。
XMLHttpRequest对象提供了一个相对精简易用的API。
6.4 编写第1个Ajax例子
IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest对象的,而其他浏览器的XMLHttpRequest对象是window的子对象。
使用open()方法初始化XMLHttpRequest对象,指定HTTP方法和要使用的服务器URL。open(method,url,async) 规定请求的类型、URL以及是否异步处理请求。
参数说明:
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
默认情况下,使用XMLHttpRequest对象发送的HTTP请求是异步进行的,但是可以显式地把async参数设置为true。
因为要做一个异步调用,所以需要注册一个XMLHttpRequest对象将调用的回调事件处理器当它的readyState值改变时调用。当readyState值被改变时,会激发一个readystatechange事件,可以使用onreadystatechange属性来注册该回调事件处理器。
使用send()方法发送该请求,因为这个请求使用的是HTTP的GET方式,所以可以在不指定参数或使用null参数的情况下调用send()方法。
当请求状态改变时,XMLHttpRequest对象调用onreadystatechange属性注册的事件处理器。因此,在处理该响应之前,事件处理器应该首先检查readyState的值和HTTP状态。当请求完成加载(readyState值为4)并且响应已经成功(HTTP状态值为200)时,就可以调用一个JavaScript函数来处理该响应内容。
步骤:
1. 创建XMLHttpRequest对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
例:
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2. 向服务器发送XMLHttpRequest请求
方法
描述
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string)
将请求发送到服务器。
string:仅用于 POST 请求
例:
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
3. XMLHttpRequest响应
onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
方法
描述
onreadystatechange
存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status
200: "OK"
404: 未找到页面
例:
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
4. 服务器响应
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
方法
描述
responseText
获得字符串形式的响应数据。
responseXML
获得 XML 形式的响应数据。
例:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
6.5 jQuery中Ajax
jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法。第2层的方法使用频率最高。
6.5.1 load()方法
1. 载入HTML文档
load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中。它的结构为:
load(url[,data][,callback])
2. 筛选载入的HTML文档
load()方法的URL参数的语法结构为:"url selector"。注意,URL和选择器之间有一个空格。
例如:
$("#msg").load("ajax.html .para");
3. 传递方式
load()方法的传递方式根据参数data来自动指定。如果没有参数传递,则采用GET方式传递;反之,则会自动转换为POST方式。
4. 回调函数
对于必须在加载完成后才能继续的操作,load()方法提供了回调函数,该函数有3个参数,分别代表请求返回的内容、请求状态和XMLHttpRequest对象。
请求状态包括:success、error、notmodified和timeout4种
在load()方法中,无论Ajax请求是否成功,只要当请求完成后,回调函数就被触发。
6.5.2 $.get()方法和$.post()方法
$.get()方法使用GET方式来进行异步请求。它的结构为:
$.get(url[,data][,callback][,type])
$.get()方法的回调函数只有两个参数:返回内容data和请求状态status。
返回内容data的格式有:
1)HTML片段
2)XML文档
由于期待服务器返回的数据格式是XML文档,因此需要在服务端设置Content-Type类型,代码如下:
header("content-type:text/xml;charset=utf-8"); //PHP
3)JSON文件
2. $.post()方法
1)GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器。
2)GET方式对传输的数据有大小限制(通常不能大于2KB),而使用POST方式传递的数据量要比GET方式大得多。
3)GET方式请求的数据会被浏览器缓存起来,这会带来严重的安全性问题,而POST则不会。
6.5.3 $.getScript()方法和$.getJson()方法
1. $.getScript()
有时,在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。可以在需要哪个JavaScript文件时,动态创建<script>标签。jQuery代码如下:
$(document.createElement("script")).attr("src","test.js").appendTo("head");
或者
$("<script type='text/javascript' src='test.js'></script>").appendTo("head");
2. $.getJSON()
$.getJSON()方法用于加载JSON文件,与$.getScript()方法的用法相同。
jQuery提供了一个通用的遍历方法$.each(),可以用于遍历对象和数组。$.each()函数不同于jQuery对象的each()方法,它是一个全局函数,不操作jQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员数组的索引,第2个为对应变量或内容。
6.5.4 $.ajax()方法
它是jQuery最底层的Ajax实现。它的结构为:
$.ajax(options)
该方法只有1个参数,但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息,参数以key/value的形式存在,所有参数都是可选的。
前面用到的$.load()、$.get()、$.post()、$.getScript()和$.getJSON()这些方法,都是基于$.ajax()方法构建的,$.ajax()方法是jQuery最底层的Ajax实现,因此可以用它来代替前面的所有方法。
例如,采用如下代码代替$.getScript()方法:
$(function()
{
$("#send").click(function()
{
$.ajax
({
type:"GET",
url:"test.js",
dataType: "script"
});
});
})
6.6 序列化元素
1. serialize()方法
与jQuery中其他方法一样,serialize()方法也是作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求。
例如:
$("#send").click(function()
{
$.get("get1.php", $("#form1").serialize(), function(data, status)
{
$("#msg").html(data);
});
});
因为serialize()方法作用于jQuery对象,所以不光只有表单能使用它,其他选择器的元素也都能使用它。
2. serializeArray()方法
该方法不是返回字符串,而是将DOM元素序列化后,返回JSON格式的数据。
3. $.param()方法
它是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化。
例如:
var obj = {a:1,b:2,c:3};
var k = $.param(obj);
alert(k); //输出a=1&b=2&c=3
6.7 jQuery中的Ajax全局事件
通过jQuery提供了一些自定义全局函数,能够为各种上与Ajax相关的事件注册回调函数。例如当Ajax请求开始时,会触发ajaxStart()方法的回调函数;当Ajax请求结束时,会触发ajaxStop()方法的回调函数。
例如:某个网站图片过多,在Ajax请求过程中,只要图片还未加载完毕,就会一直显示“加载中...”的提示信息。可以极大地改善用户的体验。
<div id="loading">加载中...</div>
$("#loading").ajaxStart(function()
{
$(this).show();
});
$("#loading").ajaxStop(function()
{
$(this).hide();
});
如果想使某个Ajax请求不受全局方法的影响,那么可以在使用$.ajax(options)方法时,将参数中的global设置为false,jQuery代码如下:
$.ajax()
{
url: "test.html",
global: false //不触发全局Ajax事件
}
- 大小: 36.9 KB
- 大小: 23.6 KB
- 大小: 737.5 KB
- 大小: 32.1 KB
分享到:
相关推荐
新人一枚,网上搜了很多关于ajax增删改查的例子,都不是自己要的效果,自己写的,虽然花了点时间,并且很基础,但是增删改查还是全的。希望可以帮到您哦。这个是我自己没有休整过的,注释较白话,大神什么的勿喷。
c# 随记.docx
NULL 博文链接:https://lobin.iteye.com/blog/2365756
使用AJAX可以提供无页面刷新便可以从后台更新页面数据,因此可以做出类似桌面应用的效果,但是每用一次AJAX便会用到大量的Javascript语句,今天我把整理了一下,使它变得结构化一些。
java随记
网络原理随记.pdf
互联网公司实习日记随记参考.pdf互联网公司实习日记随记参考.pdf互联网公司实习日记随记参考.pdf互联网公司实习日记随记参考.pdf互联网公司实习日记随记参考.pdf互联网公司实习日记随记参考.pdf
linux net 管理随记,留着个人备忘
学习c++过程中的一些知识点随记,我感觉重要的就稍微记了一下,比较简略,但是快速的阅读的话可以提醒自己想起那一部分的知识点。在复习c++知识点的时候,有些帮助。
Unity 随记1
git随记 git
JSP PDF打印 随记 复杂模板设计
面试随记???随时更新
第一章随机事件与概率 1第二章随机变量及概率分布 2第三章随机变量的数字特征 4第四章大数定律与中心极限定理 5第五章数理统计的基本概念 6第六章参数估计 8第
毕业设计级项目,一个将微博与博客整合的项目,包含客户端和服务端 GitHub:https://github.com/xxhhxhh/myandroid/tree/master/titan
重点小学生寒假记随记大全.doc
会计事务所毕业实习日记随记.docx
公司法务实习日记随记三篇.pdf
会计专业毕业实习日记随记篇.pdf