ajax的使用场景(ajax是如何实现的)
什么是AJAX?
教程请到原文获取:
AJAX准备知识:JSON
什么是 JSON ?
JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性,更易理解
* JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
啥都别多说了,上图吧!
合格的json对象:
["one", "two", "three"]{ "one": 1, "two": 2, "three": 3 }{"names": ["张三", "李四"] }[ { "name": "张三"}, {"name": "李四"} ]
不合格的json对象:
{ name: "张三", 'age': 32 } ?// 属性名必须使用双引号[32, 64, 128, 0xFFF] // 不能使用十六进制值{ "name": "张三", "age": undefined } ?// 不能使用undefined{ "name": "张三",
?"birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
?"getName": ?function() {return this.name;} ?// 不能使用函数和日期对象}
stringify与parse方法
JavaScript中关于JSON对象和字符串转换的两个方法:
JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象
JSON.parse('{"name":"Q1mi"}'); JSON.parse('{name:"Q1mi"}') ; // 错误 JSON.parse('[18,undefined]') ; // 错误
JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。
JSON.stringify({"name":"Q1mi"})
和XML的比较
JSON 格式于2001年由 Douglas Crockford 提出,目的就是取代繁琐笨重的 XML 格式。
JSON 格式有两个显著的优点:书写简单,一目了然;符合 JavaScript 原生语法,可以由解释引擎直接处理,不用另外添加解析代码。所以,JSON迅速被接受,已经成为各大网站交换数据的标准格式,并被写入ECMAScript 5,成为标准的一部分。
XML和JSON都使用结构化方法来标记数据,下面来做一个简单的比较。
用XML表示中国部分省市数据如下:
?xml version="1.0" encoding="utf-8"?country
? ?name中国/name
? ?province
? ? ? ?name黑龙江/name
? ? ? ?cities
? ? ? ? ? ?city哈尔滨/city
? ? ? ? ? ?city大庆/city
? ? ? ?/cities
? ?/province
? ?province
? ? ? ?name广东/name
? ? ? ?cities
? ? ? ? ? ?city广州/city
? ? ? ? ? ?city深圳/city
? ? ? ? ? ?city珠海/city
? ? ? ?/cities
? ?/province
? ?province
? ? ? ?name台湾/name
? ? ? ?cities
? ? ? ? ? ?city台北/city
? ? ? ? ? ?city高雄/city
? ? ? ?/cities
? ?/province
? ?province
? ? ? ?name新疆/name
? ? ? ?cities
? ? ? ? ? ?city乌鲁木齐/city
? ? ? ?/cities
? ?/province/countryXML格式数据
XML格式数据
用JSON表示如下:
{
? ?"name": "中国",
? ?"province": [{
? ? ? ?"name": "黑龙江",
? ? ? ?"cities": {
? ? ? ? ? ?"city": ["哈尔滨", "大庆"]
? ? ? ?}
? ?}, {
? ? ? ?"name": "广东",
? ? ? ?"cities": {
? ? ? ? ? ?"city": ["广州", "深圳", "珠海"]
? ? ? ?}
? ?}, {
? ? ? ?"name": "台湾",
? ? ? ?"cities": {
? ? ? ? ? ?"city": ["台北", "高雄"]
? ? ? ?}
? ?}, {
? ? ? ?"name": "新疆",
? ? ? ?"cities": {
? ? ? ? ? ?"city": ["乌鲁木齐"]
? ? ? ?}
? ?}]}JSON格式数据
JSON格式数据
由上面的两端代码可以看出,JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读,并且在数据交换方面,由于 JSON 所使用的字符要比 XML 少得多,可以大大得节约传输数据所占用得带宽。
AJAX简介
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
示例
页面输入两个整数,通过AJAX传输到后端计算出结果并返回。
!DOCTYPE htmlhtml lang="en"head
?meta charset="UTF-8"
?meta http-equiv="x-ua-compatible" content="IE=edge"
?meta name="viewport" content="width=device-width, initial-scale=1"
?titleAJAX局部刷新实例/title/headbodyinput type="text" id="i1"+input type="text" id="i2"=input type="text" id="i3"input type="button" value="AJAX提交" id="b1"script src="/static/jquery-3.2.1.min.js"/scriptscript
?$("#b1").on("click", function () {
? ?$.ajax({
? ? ?url:"/ajax_add/",
? ? ?type:"GET",
? ? ?data:{"i1":$("#i1").val(),"i2":$("#i2").val()},
? ? ?success:function (data) {
? ? ? ?$("#i3").val(data);
? ? ?}
? ?})
?})/script/body/htmlHTML部分代码
HTML部分代码
def ajax_demo1(request):
? ?return render(request, "ajax_demo1.html")
def ajax_add(request):
? ?i1 = int(request.GET.get("i1"))
? ?i2 = int(request.GET.get("i2"))
? ?ret = i1 + i2
? ?return JsonResponse(ret, safe=False)
views.py
views.py
rlpatterns = [
? ?...
? ?url(r'^ajax_add/', views.ajax_add),
? ?url(r'^ajax_demo1/', views.ajax_demo1),
? ?... ?
]
urls.py
AJAX常见应用情景
搜索引擎根据用户输入的关键字,自动提示检索关键字。
还有一个很重要的应用场景就是注册时候的用户名的查重。
其实这里就使用了AJAX技术!当文件框发生了输入变化时,使用AJAX技术向服务器发送一个请求,然后服务器会把查询到的结果响应给浏览器,最后再把后端返回的结果展示出来。
整个过程中页面没有刷新,只是刷新页面中的局部位置而已!
当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!
当输入用户名后,把光标移动到其他表单项上时,浏览器会使用AJAX技术向服务器发出请求,服务器会查询名为lemontree7777777的用户是否存在,最终服务器返回true表示名为lemontree7777777的用户已经存在了,浏览器在得到结果后显示“用户名已被注册!”。
整个过程中页面没有刷新,只是局部刷新了;
在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作;
AJAX的优缺点
优点:
AJAX使用JavaScript技术向服务器发送异步请求;
AJAX请求无须刷新整个页面;
因为服务器响应内容不再是整个页面,而是页面中的部分内容,所以AJAX性能高;
jQuery实现的AJAX
最基本的jQuery发送AJAX请求示例:
!DOCTYPE htmlhtml lang="zh-CN"head
?meta charset="UTF-8"
?meta http-equiv="x-ua-compatible" content="IE=edge"
?meta name="viewport" content="width=device-width, initial-scale=1"
?titleajax test/title
?script src=""/script/headbodybutton id="ajaxTest"AJAX 测试/buttonscript
?$("#ajaxTest").click(function () {
? ?$.ajax({ ? ? ?url: "/ajax_test/", ? ? ?type: "POST", ? ? ?data: {username: "Q1mi", password: 123456}, ? ? ?success: function (data) {
? ? ? ?alert(data)
? ? ?}
? ?})
?})/script/body/html
views.py:
def ajax_test(request): user_name = request.POST.get("username") password = request.POST.get("password") print(user_name, password) return HttpResponse("OK")
$.ajax参数
data参数中的键值对,如果值值不为字符串,需要将其转换成字符串类型。
def ajax_test(request):
? ?user_name = request.POST.get("username")
? ?password = request.POST.get("password")
? ?print(user_name, password)
? ?return HttpResponse("OK")
JS实现AJAX
var b2 = document.getElementById("b2");
?b2.onclick = function () {
? ?// 原生JS ? ?var xmlHttp = new XMLHttpRequest();
? ?xmlHttp.open("POST", "/ajax_test/", true);
? ?xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
? ?xmlHttp.send("username=q1mipassword=123456");
? ?xmlHttp.onreadystatechange = function () {
? ? ?if (xmlHttp.readyState === 4 xmlHttp.status === 200) {
? ? ? ?alert(xmlHttp.responseText);
? ? ?}
? ?};
?};
AJAX请求如何设置csrf_token
方式1
通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送。
$.ajax({ ?url: "/cookie_ajax/", ?type: "POST", ?data: {
? ?"username": "Q1mi",
? ?"password": 123456,
? ?"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() ?// 使用jQuery取出csrfmiddlewaretoken的值,拼接到data中 ?}, ?success: function (data) {
? ?console.log(data);
?}})
方式2
通过获取返回的cookie中的字符串 放置在请求头中发送。
注意:需要引入一个jquery.cookie.js插件。
$.ajax({ ?url: "/cookie_ajax/", ?type: "POST", ?headers: {"X-CSRFToken": $.cookie('csrftoken')}, ?// 从Cookie取csrftoken,并设置到请求头中 ?data: {"username": "Q1mi", "password": 123456}, ?success: function (data) {
? ?console.log(data);
?}})
或者用自己写一个getCookie方法:
function getCookie(name) {
? ?var cookieValue = null;
? ?if (document.cookie document.cookie !== '') {
? ? ? ?var cookies = document.cookie.split(';');
? ? ? ?for (var i = 0; i cookies.length; i++) {
? ? ? ? ? ?var cookie = jQuery.trim(cookies[i]);
? ? ? ? ? ?// Does this cookie string begin with the name we want? ? ? ? ? ? ?if (cookie.substring(0, name.length + 1) === (name + '=')) {
? ? ? ? ? ? ? ?cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
? ? ? ? ? ? ? ?break;
? ? ? ? ? ?}
? ? ? ?}
? ?}
? ?return cookieValue;}var csrftoken = getCookie('csrftoken');
每一次都这么写太麻烦了,可以使用$.ajaxSetup()方法为ajax请求统一设置。
function csrfSafeMethod(method) {
?// these HTTP methods do not require CSRF protection ?return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));}$.ajaxSetup({ ?beforeSend: function (xhr, settings) {
? ?if (!csrfSafeMethod(settings.type) !this.crossDomain) {
? ? ?xhr.setRequestHeader("X-CSRFToken", csrftoken);
? ?}
?}});
注意:
如果使用从cookie中取csrftoken的方式,需要确保cookie存在csrftoken值。
如果你的视图渲染的HTML文件中没有包含 {% csrf_token %},Django可能不会设置CSRFtoken的cookie。
这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie。
django.views.decorators.csrf import ensure_csrf_cookie @ensure_csrf_cookie def login(request): pass
更多细节详见:Djagno官方文档中关于CSRF的内容
AJAX上传文件
XMLHttpRequest 是一个浏览器接口,通过它,我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月,XMLHttpRequest Level 2 草案提出来了,相对于上一代,它有一些新的特性,其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。下面就具体
首先看一下formData的基本用法:FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可:
介绍一下如何利用 FormData 来上传文件。
django.views.decorators.csrf import ensure_csrf_cookie@ensure_csrf_cookiedef login(request):
? ?pass
或者使用
var form = document.getElementById("form1"); var fd = new FormData(form);
这样也可以直接通过ajax 的 send() 方法将 fd 发送到后台。
注意:由于 FormData 是 XMLHttpRequest Level 2 新增的接口,现在 低于IE10 的IE浏览器不支持 FormData。
练习(用户名是否已被注册)
功能介绍
在注册表单中,当用户填写了用户名后,把光标移开后,会自动向服务器发送异步请求。服务器返回这个用户名是否已经被注册过。
案例分析
页面中给出注册表单;
在username input标签中绑定onblur事件处理函数。
当input标签失去焦点后获取 username表单字段的值,向服务端发送AJAX请求;
django的视图函数中处理该请求,获取username值,判断该用户在数据库中是否被注册,如果被注册了就返回“该用户已被注册”,否则响应“该用户名可以注册”。
序列化
Django内置的serializers
def books_json(request): book_list = models.Book.objects.all()[0:10] from django.core import serializers ret = serializers.serialize("json", book_list) return HttpResponse(ret)
补充一个SweetAlert插件示例
点击下载Bootstrap-sweetalert项目。
$(".btn-danger").on("click", function () {
?swal({ ? ?title: "你确定要删除吗?", ? ?text: "删除可就找不回来了哦!", ? ?type: "warning", ? ?showCancelButton: true, ? ?confirmButtonClass: "btn-danger", ? ?confirmButtonText: "删除", ? ?cancelButtonText: "取消", ? ?closeOnConfirm: false
? ?},
? ?function () {
? ? ?var deleteId = $(this).parent().parent().attr("data_id");
? ? ?$.ajax({ ? ? ? ?url: "/delete_book/", ? ? ? ?type: "post", ? ? ? ?data: {"id": deleteId}, ? ? ? ?success: function (data) {
? ? ? ? ?if (data.status === 1) {
? ? ? ? ? ?swal("删除成功!", "你可以准备跑路了!", "success");
? ? ? ? ?} else {
? ? ? ? ? ?swal("删除失败", "你可以再尝试一下!", "error")
? ? ? ? ?}
? ? ? ?}
? ? ?})
? ?});})
原文:AJAX -?
作者:Q1mi -?
出自:博客园-
AJAX路线图
AJAX教程
需要教程得可以留言“AJAX”看到后会发给你们
深刻理解ajax中同步和异步的区别和使用场景
你应该知道同步和异步的区别在于线程是否堵塞还有延迟问题,其实我在开发中也遇到过,同步和异步获取返回赋值问题。
如果你是异步返回在赋值变量你会发现是undefined,这时候如果这时候你要看你请求的数量,如果超过5个还是执行异步吧,否则线程堵塞会影响客户体验。
同步的好处是能随时获取返回并赋值。
AJAX到底是干嘛的?
可以在不刷新页面的情况和服务器通信。
举一个应用场景:我们用web版的邮箱写邮件,如果不小心关掉页面,我们所写的内容就会丢失。
但是在使用了AJAX技术的邮箱,它会定时自动保存。当然是保存到服务器上的。而这种通信,显然是不能刷新页面的,这就需要用到了AJAX技术。
什么叫AJAX技术?
什么是Ajax
· 2005-09-08 17:36:55 ·
Ajax的定义
Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术。Ajax包括:
XHTML和CSS
使用文档对象模型(Document Object Model)作动态显示和交互
使用XML和XSLT做数据交互和操作
使用XMLHttpRequest进行异步数据接收
使用JavaScript将它们绑定在一起
传统的web应用模型工作起来就象这样:大部分界面上的用户动作触发一个连接到Web服务器的HTTP请求。服务器完成一些处理---接收数据,处理计算,再访问其它的数据库系统,最后返回一个HTML页面到客户端。这是一个老套的模式,自采用超文本作为web使用以来,一直都这样用, 但看过《The Elements of User Experience》的读者一定知道,是什么限制了Web界面没有桌面软件那么好用。
图1: 传统Web应用模型(左)与Ajax模型的比较(右).
这种旧的途径让我们认识到了许多技术,但它不会产生很好的用户体验。当服务器正在处理自己的事情的时候,用户在做什么?没错,等待。每一个动作,用户都要等待。
很明显,如果我们按桌面程序的思维设计Web应用,我们不愿意让用户总是等待。当界面加载后,为什么还要让用户每次再花一半的时间从服务取数据?实际上,为什么老是让用户看到程序去服务器取数据呢? Ajax如何不同凡响
通过在用户和服务器之间引入一个Ajax引擎,可以消除Web的开始-停止-开始-停止这样的交互过程. 它就像增加了一层机制到程序中,使它响应更灵敏,而它的确做到了这一点。
不像加载一个页面一样,在会话的开始,浏览器加载了一个Ajax引擎---采用JavaScript编写并且通常在一个隐藏frame中。这个引擎负责绘制用户界面以及与服务器端通讯。Ajax引擎允许用异步的方式实现用户与程序的交互--不用等待服务器的通讯。所以用户再不不用打开一个空白窗口,看到等待光标不断的转,等待服务器完成后再响应。
图 2: 传统Web应用的同步交互过程(上)和Ajax应用的异步交互过程的比较(下).
通常要产生一个HTTP请求的用户动作现在通过JavaScript调用Ajax引擎来代替. 任何用户动作的响应不再要求直接传到服务器---例如简单的数据校验,内存中的数据编辑,甚至一些页面导航---引擎自己就可以处理它. 如果引擎需要从服务器取数据来响应用户动作---假设它提交需要处理的数据,载入另外的界面代码,或者接收新的数据---引擎让这些工作异步进行,通常使用XML, 不用再担误用户界面的交互。
ajax是什么东西?
分类: 电脑/网络 程序设计 其他编程语言
问题描述:
如题`
解析:
术语Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前,Web站点强制用户进入提交/等待/重新显示范例,用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力,从而使用户从请求/响应的循环中解脱出来。借助于Ajax,可以在用户单击按钮时,使用JavaScript和DHTML立即更新UI,并向服务器发出异步请求,以执行更新或查询数据库。当请求返回时,就可以使用JavaScript和CSS来相应地更新UI,而不是刷新整个页面。最重要的是,用户甚至不知道浏览器正在与服务器通信:Web站点看起来是即时响应的。
虽然Ajax所需的基础架构已经出现了一段时间,但直到最近异步请求的真正威力才得到利用。能够拥有一个响应极其灵敏的Web站点确实激动人心,因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的(desktop-like)”可用性。
通常,在J2EE中,开发人员过于关注服务和持久性层的开发,以至于用户界面的可用性已经落后。在一个典型的J2EE开发周期中,常常会听到这样的话,“我们没有可投入UI的时间”或“不能用HTML实现”。但是,以下Web站点证明,这些理由再也站不住脚了:
BackPack
Google Suggest
Google Maps
PalmSphere
所有这些Web站点都告诉我们,Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。一切似乎就在瞬间发生。简而言之,在涉及到用户界面的响应灵敏度时,基准设得更高了。
定义Ajax
Adaptive Path公司的Jesse James Garrett这样定义Ajax:
Ajax不是一种技术。实际上,它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含:
基于XHTML和CSS标准的表示;
使用Document Object Model进行动态显示和交互;
使用XMLHttpRequest与服务器进行异步通信;
使用JavaScript绑定一切。
这非常好,但为什么要以Ajax命名呢?其实术语Ajax是由Jesse James Garrett创造的,他说它是“Asynchronous JavaScript + XML的简写”。
Ajax的工作原理
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Inter Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能:
动态更新购物车的物品总数,无需用户单击Update并等待服务器重新发送整个页面。
提升站点的性能,这是通过减少从服务器下载的数据量而实现的。例如,在Amazon的购物车页面,当更新篮子中的一项物品的数量时,会重新载入整个页面,这必须下载32K的数据。如果使用Ajax计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。
消除了每次用户输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击Next,则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于Ajax,当用户单击Edit时,可以将静态表格刷新为内容可编辑的表格。用户单击Done之后,就可以发出一个Ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。
一切皆有可能!但愿它能够激发您开始开发自己的基于Ajax的站点。然而,在开始之前,让我们介绍一个现有的Web站点,它遵循传统的提交/等待/重新显示的范例,我们还将讨论Ajax如何提升用户体验。
Ajax可用于那些场景?——一个例子:MSN Money页面
前几天,在浏览MSN Money页面的时候,有一篇关于房地产投资的文章引起了我的好奇心。我决定使用站点的“Rate this article”(评价本文)功能,鼓励其他的用户花一点时间来阅读这篇文章。在我单击vote按钮并等待了一会儿之后,整个页面被刷新,在原来投票问题所在的地方出现了一个漂亮的感谢画面。
而Ajax能够使用户的体验更加愉快,它可以提供响应更加灵敏的UI,并消除页面刷新所带来的闪烁。目前,由于要刷新整个页面,需要传送大量的数据,因为必须重新发送整个页面。如果使用Ajax,服务器可以返回一个包含了感谢信息的500字节的消息,而不是发送26,813字节的消息来刷新整个页面。即使使用的是高速Inter,传送26K和1/2K的差别也非常大。同样重要的是,只需要刷新与投票相关的一小节,而不是刷新整个屏幕。
让我们利用Ajax实现自己的基本投票系统。
原始的Ajax:直接使用XmlHttpRequest
如上所述,Ajax的核心是JavaScript对象XmlHttpRequest。下面的示例文章评价系统将带您熟悉Ajax的底层基本知识:tearesolutions/ajax-demo/raw-ajax。注:如果您已经在本地WebLogic容器中安装了ajax-demo.war,可以导航到localhost:7001/ajax-demo/raw-ajax,
浏览应用程序,参与投票,并亲眼看它如何运转。熟悉了该应用程序之后,继续阅读,进一步了解其工作原理细节。
首先,您拥有一些简单的定位点标记,它连接到一个JavaScriptcastVote(rank)函数。 function castVote(rank) {
var url = "/ajax-demo/static-article-ranking";
var callback = processAjaxResponse;
executeXhr(callback, url);
}
该函数为您想要与之通信的服务器资源创建一个URL并调用内部函数executeXhr,提供一个回调JavaScript函数,一旦服务器响应可用,该函数就被执行。由于我希望它运行在一个简单的Apache环境中,“cast vote URL”只是一个简单的HTML页面。在实际情况中,被调用的URL将记录票数并动态地呈现包含投票总数的响应。
下一步是发出一个XmlHttpRequest请求: function executeXhr(callback, url) {
branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = callback;
req.open("GET", url, true);
req.send(null);
} branch for IE/Windows ActiveX version
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = callback;
req.open("GET", url, true);
req.send();
}
}
}
如您所见,执行一个XmlHttpRequest并不简单,但非常直观。和平常一样,在JavaScript领域,大部分的工作量都花在确保浏览器兼容方面。在这种情况下,首先要确定XmlHttpRequest是否可用。如果不能用,很可能要使用Inter Explorer,这样就要使用所提供的ActiveX实现。
executeXhr()方法中最关键的部分是这两行:
req.onreadystatechange = callback;
req.open("GET", url, true);
第一行定义了JavaScript回调函数,您希望一旦响应就绪它就自动执行,而req.open()方法中所指定的“true”标志说明您想要异步执行该请求。
一旦服务器处理完XmlHttpRequest并返回给浏览器,使用req.onreadystatechange指派所设置的回调方法将被自动调用。 function processAjaxResponse() {
only if req shows "loaded"
if (req.readyState == 4) {
only if "OK"
if (req.status == 200) {
502 502'votes').innerHTML = req.responseText;
} else {
alert("There was a problem retrieving the XML data:
" +
req.statusText);
}
}
}
该代码相当简洁,并且使用了几个幻数,这使得难以一下子看出发生了什么。为了弄清楚这一点,下面的表格(引用自developer.apple/inter/webcontent/xmlreq)列举了常用的XmlHttpRequest对象属性。
属性
描述
onreadystatechange
每次状态改变所触发事件的事件处理程序
readyState
对象状态值:
0 = 未初始化(uninitialized)
1 = 正在加载(loading)
2 = 加载完毕(loaded)
3 = 交互(interactive)
4 = 完成(plete)
responseText
从服务器进程返回的数据的字符串形式
responseXML
从服务器进程返回的DOM兼容的文档数据对象
status
从服务器返回的数字代码,比如404(未找到)或200(就绪)
statusText
伴随状态码的字符串信息
现在processVoteResponse()函数开始显示出其意义了。它首先检查XmlHttpRequest的整体状态以保证它已经完成(readyStatus == 4),然后根据服务器的设定询问请求状态。如果一切正常(status == 200),就使用innerHTML属性重写DOM的“votes”节点的内容。
既然您亲眼看到了XmlHttpRequest对象是如何工作的,就让我们利用一个旨在简化JavaScript与Java应用程序之间的异步通信的框架来对具体的细节进行抽象。
Ajax: DWR方式
按照与文章评价系统相同的流程,我们将使用Direct Web Remoting(DWR)框架实现同样的功能。
假定文章和投票结果存储在一个数据库中,使用某种对象/关系映射技术来完成抽取工作。为了部署起来尽可能地简单,我们不会使用数据库进行持久性存储。此外,为使应用程序尽可能通用,也不使用Web框架。相反,应用程序将从一个静态HTML文件开始,可以认为它由服务器动态地呈现。除了这些简化措施,应用程序还应该使用Spring Framework关联一切,以便轻松看出如何在一个“真实的”应用程序中使用DWR。
现在应该下载示例应用程序并熟悉它。该应用程序被压缩为标准的WAR文件,因此您可以把它放置到任何一个Web容器中——无需进行配置。部署完毕之后,就可以导航到localhost:7001/ajax_demo/dwr-ajax来运行程序。
可以查看HTML 源代码,了解它如何工作。给人印象最深的是,代码如此简单——所有与服务器的交互都隐藏在JavaScript对象ajaxSampleSvc的后面。更加令人惊讶的是,ajaxSampleSvc服务不是由手工编写而是完全自动生成的!让我们继续,看看这是如何做到的。
引入DWR
如同在“原始的Ajax”一节所演示的那样,直接使用XmlHttpRequest创建异步请求非常麻烦。不仅JavaScript代码冗长,而且必须考虑服务器端为定位Ajax请求到适当的服务所需做的工作,并将结果封送到浏览器。
设计DWR的目的是要处理将Web页面安装到后端服务上所需的所有信息管道。它是一个Java框架,可以很轻松地将它插入到Web应用程序中,以便JavaScript代码可以调用服务器上的服务。它甚至直接与Spring Framework集成,从而允许用户直接向Web客户机公开bean。
DWR真正的巧妙之处是,在用户配置了要向客户机公开的服务之后,它使用反射来生成JavaScript对象,以便Web页面能够使用这些对象来访问该服务。然后Web页面只需接合到生成的JavaScript对象,就像它们是直接使用服务一样;DWR无缝地处理所有有关Ajax和请求定位的琐碎细节。