商业源码 ajax怎么获取返回的json数据
首先要明白ajax的基本格式，参考下面的内容，可以发现，success是请求成功后服务器返回的数据，接收只需要把回调函数的值处理就可以了，如：
response:即为服务器返回的数据，例如：{"uid":123,"name":"jghdream"},
如下输出即可：
success: function(response){
consolelog(responseuid);
consolelog(responsename);
}
以下是ajax的一些参数：
$ajax({type:'post',
url:'/testajaxphp',
dataType:'json',
data:{uid:uid,rands:Mathrandom()},
success: function(){
alert('ajax return success');
}});
url，类型：String，默认值: 当前页地址。发送请求的地址
data， 类型：String，发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'
dataType，类型：String，预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 14 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurlcallback=" jQuery 将自动替换 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串
success，当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
这次给大家带来ajax向服务器发送数据需要哪些步骤，ajax向服务器发送数据的注意事项有哪些，下面就是实战案例，一起来看一下。
1 准备向服务器发送数据
Ajax 最常见的一大用途是向服务器发送数据。最典型的情况是从 客户端发送表单数据，即用户在form元素所含的各个 input 元素里输入的值。下面代码展示了一张简单的表单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本表单</title>
<style>
table{display: table;}
row{display: table-row;}
cell{display: table-cell;padding: 5px;}
lable{text-align: right;}
</style>
</head>
<body>
<form id="fruitform" method="post" action="http://127001:8080/form">
<p class="lable">
<p class="row">
<p class="cell lable">Apples:</p>
<p class="cell"><input name="apples" value="5" /></p>
</p>
<p class="row">
<p class="cell lable">Bananas:</p>
<p class="cell"><input name="bananas" value="2" /></p>
</p>
<p class="row">
<p class="cell lable">Cherries:</p>
<p class="cell"><input name="cherries" value="20" /></p>
</p>
<p class="row">
<p class="cell lable">Total:</p>
<p id="results" class="cell">0 items</p>
</p>
</p>
<button id="submit" type="submit">Submit Form</button>
</form>
</body>
</html>这个例子中的表单包含三个input元素和一个提交button 。这些input元素让用户可以指定三种不同的说过各自要订购多少，button则会将表单提交给服务器。
11 定义服务器
显而易见，这里需要为这些示例创建处理请求的服务器。这里再一次使用Nodejs，原因主要是它很简单，而且用的是Javascript。新建 fruitcalcjs脚本文件如下：
var http = require('http');
var querystring = require('querystring');
function writeResponse(res,data){
var total = 0;
for(fruit in data){
total += Number(data[fruit]);
}
reswriteHead(200,"OK",{
"Content-Type":"text/html",
"Access-Control-Allow-Origin":"http://localhost:63342"
});
reswrite('<html><head><title>Fruit Total</title></head><body>');
reswrite('<p>'+total+' item ordered</p></body></html>');
resend();
}
httpcreateServer(function(req,res){
consolelog("[200] "+reqmethod+" to "+requrl);
if(reqmethod == "OPTIONS"){
reswriteHead(200,"OK",{
"Access-Control-Allow-Header":"Content-Type",
"Access-Control-Allow-Methods":"",
"Access-Control-Allow-Origin":""
});
resend();
}else if(requrl == '/form'&& reqmethod == 'POST'){
var dataObj = new Object();
var contentType = reqheaders["content-type"];
var fullBody = '';
if(contentType){
if(contentTypeindexOf("application/x-www-form-urlencode") > -1){
reqon('data',function(chunk){
fullBody += chunktoString();
});
reqon('end',function(){
var dBody = querystringparse(fullBody);
dataObjapples = dBody["apples"];
dataObjbananas = dBody["bananas"];
dataObjcherries = dBody["cherries"];
writeResponse(res,dataObj);
});
}else if(contentTypeindexOf("application/json") > -1){
reqon('data',function(chunk){
fullBody += chunktoString();
});
reqon('end',function(){
dataObj = JSONparse(fullBody);
writeResponse(res,dataObj);
});
}
}
}
})listen(8080);脚本中高亮部分：writeResponse函数。这个函数会在提取请求的表单值之后调用，它负责生产对浏览器的响应。当前，这个函数会创建简单的HTML文档，效果如下：
这个响应很简单，实现效果是让服务器计算出了用户通过form中各个input元素所订购的水果总数。服务器得端脚本的其余部分负责解码客户端用Ajax发送的各种可能数据格式。
12 理解问题所在
上面的清楚的描述了想要用Ajax解决的问题。
当提交表单后，浏览器会在新的页面显示结果。这意味着两点：
用户必须等待服务器处理数据并生成响应；
所有文档上下文信息都丢失了，因为结果是作为新文档进行显示的。
这就是应用Ajax的理想情形了。可以异步生成请求，这样用户就能在表单被处理时继续与文档进行交互。
2 发送表单
向服务器发送数据的最基本方式是自己收集并格式化它。下面代码展示了添加到前面的HTML文档 examplehtml 的一段脚本。用的就是这种方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手动收集和发送数据</title>
<style>
table{display: table;}
row{display: table-row;}
cell{display: table-cell;padding: 5px;}
lable{text-align: right;}
</style>
</head>
<body>
<form id="fruitform" method="post" action="http://127001:8080/form">
<p class="lable">
<p class="row">
<p class="cell lable">Apples:</p>
<p class="cell"><input name="apples" value="5" /></p>
</p>
<p class="row">
<p class="cell lable">Bananas:</p>
<p class="cell"><input name="bananas" value="2" /></p>
</p>
<p class="row">
<p class="cell lable">Cherries:</p>
<p class="cell"><input name="cherries" value="20" /></p>
</p>
<p class="row">
<p class="cell lable">Total:</p>
<p id="results" class="cell">0 items</p>
</p>
</p>
<button id="submit" type="submit">Submit Form</button>
</form>
<script>
documentgetElementById("submit")onclick = handleButtonPress;
var httpRequest;
function handleButtonPress(e){
//对表单里的button元素而言，其默认行为是用常规的非Ajax方式提交表单。这里不想让他发生，所以调用了preventDefault方法
epreventDefault();
var form = documentgetElementById("fruitform");
//收集并格式化各个input的值
var formData ="";
var inputElements = documentgetElementsByTagName("input");
for (var i = 0; i < inputElementslength; i++){
formData += inputElements[i]name + "=" + inputElements[i]value +"&";
}
httpRequest = new XMLHttpRequest();
httpRequestonreadystatechange = handleResponse;
//数据必须通过POST方法发送给服务器，并读取了HTMLFormElement的action属性获得了请求需要发送的URL
httpRequestopen("POST",formaction);
//添加标头来告诉服务器准备接受的数据格式
httpRequestsetRequestHeader('Content-Type','application/x-www-form-urlencoded');
//把想要发送给服务器的字符串作为参数传递给send方法
httpRequestsend(formData);
}
function handleResponse(){
if(httpRequestreadyState == 4 && httpRequeststatus == 200){
documentgetElementById("results")innerHTML = httpRequestresponseText;
}
}
</script>
</body>
</html>效果图如下：
服务器响应表单提交后返回的HTML文档会显示在同一页，而且该请求是异步执行的。
3 发送JSON数据
Ajax不止用来发送表单数据，几乎可以发送任何数据，包括JavaScript对象表示法(JavaScript Object Notation,JSON)数据，而它几乎已经成为一种流行的数据格式了。Ajax扎根于XML，但这一格式很繁琐。当运行的Web应用程序必须传输大量XML文档时，繁琐就意味着带宽和系统容量方面的实际成本。
JSON经常被称为XML的“脱脂”替代品。JSON易于阅读和编写，比XML更紧凑，而且已经获得了广泛支持。JSON发源于JavaScript，但它的发展已经超越了 JavaScript，被无数的程序包和系统理解并使用。
以下是一个简单的JavaScript对象用JSON表达的例子：
{"bananas":"2","apples":"5","cherries":"20"}这个对象有三个属性：bananas、apples和cherries。这些属性的值分别是2、5和20。
JSON的功能不如XML丰富，但对许多应用程序来说，那些功能是用不到的。JSON简单、轻量和富有表现力。下面例子演示了发送JSON数据到服务器有多简单，修改前例的JavaScript部分如下：
<script>
documentgetElementById("submit")onclick = handleButtonPress;
var httpRequest;
function handleButtonPress(e){
epreventDefault();
var form = documentgetElementById("fruitform");
var formData = new Object();
var inputElements = documentgetElementsByTagName("input");
for(var i=0;i<inputElementslength;i++){
formData[inputElements[i]name] = inputElements[i]value;
}
httpRequest = new XMLHttpRequest();
httpRequestonreadystatechange = handleResponse;
httpRequestopen("POST",formaction);
httpRequestsetRequestHeader("Content-Type","application/json");
httpRequestsend(JSONstringify(formData));
}
function handleResponse(){
if(httpRequestreadyState == 4 && httpRequeststatus == 200){
documentgetElementById("results")innerHTML = httpRequestresponseText;
}
}
</script>这段脚本，创建了一个新的Object，并定义了一些属性来对应表单内各个input元素的name属性值。可以使用任何数据，但 input元素很方便，而且能和之前的例子保持一致。
为了告诉服务器正在发送JSON数据，把请求的Content-Type标头设为 application/json，就像这样：
httpRequestsetRequestHeader("Content-Type","application/json");
用JSON对象和JSON格式进行相互的转换。（大多数浏览器能直接支持这个对象，但也可以用下面的网址里的脚本来给旧版的浏览器添加同样的功能：https://githubcom/douglascrockford/JSON-js/blob/master/json2js ）JSON对象提供了两个方法：
在上面的例子中，使用了stringify方法，然后把结果传递给XMLHttpRequest 对象的send方法。此例中只有数据的编码方式发生了变化。提交表单的效果还是一样。
4 使用FormData对象发送表单数据
另一种更简洁的表单收集方式是使用一个FormData对象，它是在XMLHttpRequest的第二级规范中定义的。
由于原来的Nodejs代码有点问题，此处用C#新建文件 fruitcalcaspx作为处理请求的服务器。其cs代码如下：
using System;
namespace Web4LukaWebajaxhtml5
{
public partial class fruitcalc : SystemWebUIPage
{
protected void Page_Load(object sender, EventArgs e)
{
int total = 0;
if (RequestHttpMethod == "POST")
{
if (RequestContentTypeIndexOf("multipart/form-data") > -1)
{
for (int i = 0; i < RequestFormCount; i++)
{
total += Int32Parse(RequestForm[i]);
}
}
writeResponse(Response, total);
}
}
private void writeResponse(SystemWebHttpResponse Response, int total)
{
string strHtml;
ResponseAddHeader("Access-Control-Allow-Origin", "http:/
AJAX全称为Asynchronous JavaScript And XML直译就是异步的JavaScript和XML（这里我们主要介绍下JavaScript中AJAX的应用）
通常当JavaScript向服务器发送请求获取数据时，服务器会返回数据。在传统没有使用AJAX的网页中，需要刷新页面使其重新加载。而AJAX可以使网页在不重新加载页面的情况下对网页的局部进行更新。(比如，当你要放大地图的时候，你会不断的向服务器请求地图当前位置的详细信息，服务器返回数据给你，这里我们并不需要重新加载整个页面，不然用户体验就太差了。而是局部更新页面。)
由于我不可能在这写一个地图这样复杂的例子，而为了演示AJAX的使用，我借用了秒秒学的一个简单示例：
// 简单的AJAX举例。
// 1: 创建请求变量
var myRequest;
// 浏览器的特征检查。
if (windowXMLHttpRequest) { //若支持，则是火狐、谷歌等浏览器。
myRequest = new XMLHttpRequest();
} else if (windowActiveXObject) { // 若不支持, 则是IE浏览器。
myRequest = new ActiveXObject("MicrosoftXMLHTTP");
}
// 2: 为请求添加事件处理代码。
myRequestonreadystatechange = function(){
consolelog("匿名函数被调用！");
consolelog(myRequestreadyState);
if (myRequestreadyState === 4) {
var p = documentcreateElement("p");
var t = documentcreateTextNode(myRequestresponseText);
pappendChild(t);
documentgetElementById("mainContent")appendChild(p);
}
};
// 3: 配置发送请求
myRequestopen('GET', 'simpletxt', true);
myRequestsend(null);
//
使用AJAX主要分三部分，如示例中的
1、 创建请求的变量。
在script文件中，首先声明XMLHttpRequest对象,这也是题主说的Ajax的核心。浏览器页面能通过XMLHttpRequest对象和服务器进行通讯。因为这个对象的创建因浏览器的不同而有区别。所以我们要用if语句判断XMLHttpRequest是否存在。
2、 为请求添加事件处理代码
创建好XMLHttpRequest对象后，就可以向服务器发送请求了，不过我们首先处理服务器响应的事件。当服务器响应后会触发myRequest对象的onreadystatechange事件。
在onreadystatechange事件中我们看到myRequest调用了readyState属性，readyState有4个值表示目前响应所在的阶段，各数值表示如下：
l 1：请求已经建立，但是还没有发送（还没有调用 send()）。
l 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
l 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
l 4：响应已完成；您可以获取并使用服务器的响应了。
我们一般只关心readyState的值为4的情况，表示响应已完成。
3、 配置发送请求
使用open方法配置请求。它有三个参数：
1、第一个参数表示用GET获取服务器中的数据。
2、第二个参数是一个服务器地址，这里我们用本地的simpletxt代替，省去创建服务器的麻烦。
3、第三个参数true表示请求是异步的，即当请求发送后，JavaScript不会为了等待服务器的响应而阻塞，它会继续执行后续代码。
配置好请求后，用send方法发送请求，这里给send传递的参数是null，若有其它参数需要发送，也可以传递给send方法。
分类: 电脑/网络 >> 程序设计 >> 其他编程语言
问题描述:
如题`
解析:
术语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-demowar，可以导航到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 (windowXMLHttpRequest) {
req = new XMLHttpRequest();
reqonreadystatechange = callback;
reqopen("GET", url, true);
reqsend(null);
} branch for IE/Windows ActiveX version
else if (windowActiveXObject) {
req = new ActiveXObject("MicrosoftXMLHTTP");
if (req) {
reqonreadystatechange = callback;
reqopen("GET", url, true);
reqsend();
}
}
}
如您所见，执行一个XmlHttpRequest并不简单，但非常直观。和平常一样，在JavaScript领域，大部分的工作量都花在确保浏览器兼容方面。在这种情况下，首先要确定XmlHttpRequest是否可用。如果不能用，很可能要使用Inter Explorer，这样就要使用所提供的ActiveX实现。
executeXhr()方法中最关键的部分是这两行：
reqonreadystatechange = callback;
reqopen("GET", url, true);
第一行定义了JavaScript回调函数，您希望一旦响应就绪它就自动执行，而reqopen()方法中所指定的“true”标志说明您想要异步执行该请求。
一旦服务器处理完XmlHttpRequest并返回给浏览器，使用reqonreadystatechange指派所设置的回调方法将被自动调用。 function processAjaxResponse() {
only if req shows "loaded"
if (reqreadyState == 4) {
only if "OK"
if (reqstatus == 200) {
502 502'votes')innerHTML = reqresponseText;
} else {
alert("There was a problem retrieving the XML data:
" +
reqstatusText);
}
}
}
该代码相当简洁，并且使用了几个幻数，这使得难以一下子看出发生了什么。为了弄清楚这一点，下面的表格（引用自developerapple/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和请求定位的琐碎细节。
0条评论