`

Ajax 和 XML: 五种 Ajax 反模式

 
阅读更多
通过理解错误的编码方式，可以更好地了解如何正确地进行编码。当然，编写 Asynchronous JavaScript™ + XML（Ajax）有正确的方法，也有错误的方法。本文将讨论一些需要避免的常见编码实践。

如果人们在第一次就能够将所有事情全部做对，那么这个世界将变得完全不同。Ajax 也是如此。我做了大量的工作以支持 Ajax 开发人员（包括我自己），包括编码、撰写文章和演讲。通过这些工作，我学到了很多关于正确和错误编写 Ajax 的知识。在我的上一篇文章 “五种常见 Ajax 模式：可立即使用这些非常有用的 Ajax 设计模式 ” 中，我介绍了五种用于正确编写 Ajax 应用程序的模式。在这篇文章中，我将介绍 Ajax 代码中常见的五种反模式。

您可能会问，什么是反模式（anti-pattern） ？反模式 就是频繁出现的应用程序设计缺陷，已经成为所有人都应该注意的问题。我在这里将从较高的层次进行讨论，而不涉及语法错误和链接问题。

大多数开发人员听说过关于反模式的一个很好的例子：结构化查询语言（Structured Query Language，SQL）的错误使用导致 Web 站点受到 SQL 注入攻击。这种反模式使得公司损失惨重，并暴露了客户记录，而且不幸的是没有一种编程语言可以幸免。因此，我们有必要了解这种模式发生的原理和原因，以及如何避免。

Ajax 反模式也是如此。我并不是说它们将造成公司损失数十亿的收入，但是它们可以搞垮服务器或者提供糟糕的用户体验，这种代价不仅昂贵，而且令人沮丧。

如果理解了发生错误的内容，您将学到很多知识。很多时候，人们仅仅把 Ajax 看作是一种在加载页面后从服务器取回 XML 的方式。这种观点非常狭隘，并且如果被错误使用，将引发应用程序的性能问题。在本文中，我将解释这种观点之所以错误的原因，以及如何修复这种错误。

在没有必要的时候轮询计时器

我见到的很多 Ajax 问题都和滥用 JavaScript 语言内置的计时器功能有关。其中的关键方法是 window.setInterval() 。只要看到这种方法，就需要稍微提高警惕；为什么要使用一个计时器呢？当然，计时器有其用途 —— 比如，动画。

window.setInterval() 方法告诉页面以特定的时间间隔回调某个函数（比如每秒）。大多数浏览器对使用这些计时器总是说得多，做得少，主要是因为 JavaScript 语言是单线程的语言。如果您要求的时间间隔为 1 秒，那么获得的回调时间间隔可能是 1 秒、1.2 秒、9 秒或任何其他时间。

绝对不需要使用计时器的一种情况就是等待 Ajax 请求的完成。以 清单 1 为例。


清单 1. Antipat1a_polling.html 

<html><script>
var req = null;

function loadUrl( url ) {
  if(window.XMLHttpRequest) {
    try { req = new XMLHttpRequest();
    } catch(e) { req = false; }
  } else if(window.ActiveXObject) {
    try { req = new ActiveXObject('Msxml2.XMLHTTP');
    } catch(e) {
    try { req = new ActiveXObject('Microsoft.XMLHTTP');
    } catch(e) { req = false; }
  } }
  if(req) {
    req.open('GET', url, true);
    req.send('');
  }
}

window.setInterval( function watchReq() {
    if ( req != null && req.readyState == 4 && req.status == 200 ) {
      var dobj = document.getElementById( 'htmlDiv' );
      dobj.innerHTML = req.responseText;
      req = null;
   }
 }, 1000 );

var url = window.location.toString();
url = url.replace( /antipat1a_polling.html/, 'antipat1_content.html' );
loadUrl( url );
</script><body>
Dynamic content is shown between here:<br/>
<div id="htmlDiv" style="border:1px solid black;padding:10px;">
</div>And here.</body></html>

 

在进行 setInterval 调用之前，所有一切看上去都工作得不错。这个调用将设置监视请求状态的计时器，然后使用下载的资源设置页面内容。

我将展示一个更好的解决方案，用来计算出什么时候请求能够完成。同时，清单 2 展示了页面正在请求的文件。


清单 2. Antipat1_content.html 

<b>Hello there</b>

 

同时 图 1 显示了在我的浏览器中看到的页面。


图 1. 放置在 HTML 文档中的内容
放置在 HTML 文档中的内容

所以，您可能会问自己，“它现在可以工作，不是吗？如果没有出现故障的话，为什么要修复呢？” 实际上已经出现故障了，因为程序运行得非常慢。计时器将时间间隔设置为 1 秒，随着时间的流逝，请求完全超过了时间间隔。所以，您将看到页面首先出现一个空的框，然后再等待一秒钟，忽然出现大量的内容。多么糟糕！

如何解决呢？Ajax 天生就是异步的。难道不需要进行轮询循环就能查看何时完成请求吗？

结果证明，并非如此。正如我在 清单 3 中展示的一样，XMLHTTPRequest 对象所提供的全部内容是一个名为 onreadystatechange 的回调机制。（多么好听的名字，让人想起了 VAX PDP/11s）。


清单 3. Antipat1a_fixed.html 

<html><script>
var req = null;
function processReqChange() {
  if (req.readyState == 4 && req.status == 200 ) {
    var dobj = document.getElementById( 'htmlDiv' );
    dobj.innerHTML = req.responseText;
  }
}

function loadUrl( url ) {
  ...
  if(req) {
    req.onreadystatechange = processReqChange;
    req.open('GET', url, true);
    req.send('');
  }
}

var url = window.location.toString();
url = url.replace( /antipat1a_fixed.html/, 'antipat1_content.html' );
loadUrl( url );
</script>
...

 

这个新代码只是查看请求对象是否发生改变，以响应 onreadystatechange 回调。然后，在完成后更新页面。

最后的结果是一个加载神速的页面。页面出现后，新的内容几乎是立即填充了页面框。为什么呢？因为请求完成后就立即调用了代码，然后填充页面。没有必要将时间浪费在无聊的计时器上。

轮询反模式的另一个变体是：页面反复向服务器发送请求，即使请求没有发生变化。请看 清单 4 所示的搜索页面。


清单 4. Antipat1b_polling.html 

<html><script>
var req = null;
function processReqChange() {
  if (req.readyState == 4 && req.status == 200 ) {
    var dobj = document.getElementById( 'htmlDiv' );
    dobj.innerHTML = req.responseText;
  }
}

function loadUrl( url ) {
  ...
}

window.setInterval( function watchSearch() {
  var url = window.location.toString();
  var searchUrl = 'antipat1_content.html?s='+searchText.value;
  url = url.replace( /antipat1b_polling.html/, searchUrl );
  loadUrl( url );
 }, 1000 );

</script><body><form>
Search <input id="searchText" type="text">:<br/>
<div id="htmlDiv" style="border:1px solid black;padding:10px;">
</div></form></body></html>

 

您可以看到浏览器中的页面能够发挥作用，如 图 2 所示。


图 2. 具有动态响应区域的搜索区域
具有动态响应区域的搜索区域

多么美妙。这样看来，页面非常合理。当我改变搜索文本时，显示结果的区域也将根据新的搜索条件改变（也许并不完全如此，但是如果为请求安装一个真正的搜索引擎，它就会这样做）。

问题是 JavaScript 代码使用 window.setInterval 来不断地生成请求，即使搜索字段没有发生更改。这将消耗网络带宽，并消耗服务器时间。对于一个流行的站点来说，这可是一个致命的组合。

解决方法就是对搜索框使用事件回调，如 清单 5 所示。


清单 5. Antipat1b_fixed.html 

<html><script>
var req = null;
function processReqChange() { ... }
function loadUrl( url ) { ...  }

var seachTimer = null;
function runSearch()
{
  if ( seachTimer != null )
    window.clearTimeout( seachTimer );
  seachTimer = window.setTimeout( function watchSearch() {
    var url = window.location.toString();
    var searchUrl = 'antipat1_content.html?s='+searchText.value;
    url = url.replace( /antipat1b_fixed.html/, searchUrl );
    loadUrl( url );
    seachTimer = null;
   }, 1000 );
}
</script><body><form>
Search <input id="searchText" type="text" onkeyup="runSearch()">:<br/>
<div id="htmlDiv" style="border:1px solid black;padding:10px;">
</div></form></body></html>

 

这里，我将 runSearch() 函数与搜索框的 onkeyup() 方法关联起来。通过这样做，当用户在搜索框中输入内容时，我将得到回调。

runSearch() 函数执行得非常漂亮。它为调用服务器并实际运行搜索的另一个方法设置了一个超时。如果在设置之前还没有超时，那么将清除该超时。为什么？因为这将允许用户输入大量的文本；然后，当用户按下最后一个键时，第二种方法将运行搜索。通过这种方法，用户将不再被不断闪烁的显示打扰。

 

 

没有检查回调返回的结果

许多 Ajax 反模式源于对 XMLHTTPRequest 对象机制的误解。我经常看到的一种情况就是，用户没有在回调中检查对象的 readyState 或 status 字段。请查看 清单 6 以理解我所说的含义。


清单 6. Antipat2_nocheck.html 

<html><script>
var req = null;
function processReqChange() {
  var dobj = document.getElementById( 'htmlDiv' );
  dobj.innerHTML = req.responseText;
}
...
</code>
<p>Everything looks okay. And on small requests, and on some browsers, it's 
    probably fine. But many requests are large enough to call several calls 
    to the <code type="inline">onreadystatechange</code> handler before they 
    finish. So, your callback might be working with incomplete data.</p>
<p>The right way to do it is shown in <a href="#list7">Listing 7</a>.</p>
<code type="section">
<heading refname="list7" type="code">Listing 7. Antipat2_fixed.html</heading>
<html><script>
var req = null;
function processReqChange() {
  if (req.readyState == 4 && req.status == 200 ) {
    var dobj = document.getElementById( 'htmlDiv' );
    dobj.innerHTML = req.responseText;
  }
}
...

 

没有太多的代码，并且它可以在所有浏览器上工作。

我注意到，和其他浏览器相比，这个问题在 Windows® Internet Explorer® 7 上尤为突出。Internet Explorer 7 对 onreadystatechange 进行多次回调 —— 我的意思是说即使对小的请求也多次 进行回调。因此，需要正确编写处理程序。

 

 

在使用 HTML 更合适的时候却传送复杂的 XML

在我工作的一家公司中，所有的谈论都是关于 “在网络的边缘实现智能化”。关于这个简单思想的另一个比较有趣的说法就是：通过在桌面上实现浏览器的智能化工作来替代服务器中的全面处理。

但是在页面中实现智能化意味着在其中使用大量的 JavaScript 代码。这样做有一个很大的弊端：浏览器兼容性。确实需要在每个流行的浏览器上测试 JavaScript 代码中每个关键行 —— 或者至少，对客户最可能使用的浏览器进行测试。所有这些都意味着大量的工作。以 清单 8 所示的复杂 Ajax 代码为例。


清单 8. Antipat3_complex.html 

<html><head><script>
var req = null;
function processReqChange() {
  if (req.readyState == 4 && req.status == 200 && req.responseXML ) {
    var dtable = document.getElementById( 'dataBody' );
    var nl = req.responseXML.getElementsByTagName( 'movie' );
    for( var i = 0; i < nl.length; i++ ) {
      var nli = nl.item( i );
      var elYear = nli.getElementsByTagName( 'year' );
      var year = elYear.item(0).firstChild.nodeValue;
      var elTitle = nli.getElementsByTagName( 'title' );
      var title = elTitle.item(0).firstChild.nodeValue;

      var elTr = dtable.insertRow( -1 );

      var elYearTd = elTr.insertCell( -1 );
      elYearTd.innerHTML = year;

      var elTitleTd = elTr.insertCell( -1 );
      elTitleTd.innerHTML = title;
} } }

function loadXMLDoc( url ) {
  if(window.XMLHttpRequest) {
    try { req = new XMLHttpRequest();
    } catch(e) { req = false; }
  } else if(window.ActiveXObject) {
    try { req = new ActiveXObject('Msxml2.XMLHTTP');
    } catch(e) {
    try { req = new ActiveXObject('Microsoft.XMLHTTP');
    } catch(e) { req = false; }
  } }
  if(req) {
    req.onreadystatechange = processReqChange;
    req.open('GET', url, true);
    req.send('');
  }
}

var url = window.location.toString();
url = url.replace( /antipat3_complex.html/, 'antipat3_data.xml' );
loadXMLDoc( url );
</script></head><body>
<table cellspacing="0" cellpadding="3" width="100%"><tbody id="dataBody">
<tr>
  <th width="20%">Year</th>
  <th width="80%">Title</th>
</tr>
</tbody></table></body></html>

 

这段代码从 清单 9 所示的 XML 文件中读取数据，然后将它变为表格格式。


清单 9. Antipat3_data.xml 

<movies>
  <movie>
    <year>1993</year>
    <title>Jurassic Park</title>
  </movie>
  <movie>
    <year>1997</year>
    <title>The Lost World: Jurassic Park</title>
  </movie>
  <movie>
    <year>2001</year>
    <title>Jurassic Park III</title>
  </movie>
</movies>

 

可以看到如 图 3 所示的结果。


图 3. 复杂的电影清单页面
复杂的电影清单页面

这其实不是糟糕的代码。只不过是用大量的代码执行一个实际上相当简单的任务。产生的页面一点儿都不复杂。它不能在客户端对页面进行排序和搜索。事实上，几乎没有理由对 XML 和 HTML 进行复杂的转换。

难道不能像 清单 10 那样让服务器返回 HTML 而不是 XML，从而变得更简单点儿吗？


清单 10. Antipat3_fixed.html 

<html><script>
var req = null;
function processReqChange() {
  if (req.readyState == 4 && req.status == 200 ) {
    var dobj = document.getElementById( 'tableDiv' );
    dobj.innerHTML = req.responseText;
  }
}

function loadUrl( url ) { ... }

var url = window.location.toString();
url = url.replace( /antipat3_fixed.html/, 'antipat3_content.html' );
loadUrl( url );
</script><body><div id="tableDiv"></div></body></html>

 

事实上，这样更加简单。所有创建复杂表行和单元格的代码被替换为页面中 <div> 标记的一组简单的 innerHTML 。 Voilà!

从服务器返回的 HTML 如 清单 11 所示。


清单 11. Antipat3_content.html 

<table cellspacing="0" cellpadding="3" width="100%">
<tbody id="dataBody">
<tr>
  <th width="20%">Year</th>
  <th width="80%">Title</th>
</tr>
<tr>
  <td>1993</td>
  <td>Jurassic Park</td>
</tr>
<tr>
  <td>1997</td>
  <td>The Lost World: Jurassic Park</td>
</tr>
<tr>
  <td>2001</td>
  <td>Jurassic Park III</td>
</tr>
</tbody>
</table>

 

对于所有任务，选择是在服务器上处理，还是在客户机上处理取决于任务的需求。本文的例子相当简单：提供电影表。如果任务更复杂的话 —— 可能会进行分类、搜索、添加、删除或动态交互（单击电影名将出现更多信息）—— 那么可以在客户端使用更加复杂的代码。事实上，在本文的结尾我将演示在客户机上进行排序，从而反面论证在服务器上施加大量负载的情形。

也许所有示例中最好的一个就是 Google Maps。Google Maps 执行了很好的任务 —— 将富客户端的代码与服务器端的智能映射引擎结合了起来。我将使用这个服务作为例子，说明如何确定在哪里执行什么样的处理。

 

 

在应该传送 JavaScript 代码的时候却传送 XML

所有关于使 Web 浏览器读取 XML 数据源并动态呈现它们的夸大其辞，可能让您觉得这是惟一可用的方法。然而，这种想法是错误的，因为非常聪明的工程师已经使用过 Ajax 传送技术来发送 JavaScript 代码而不是 XML。请看 清单 12 所示的电影表示例。


清单 12. Antipat4_fixed.html 

<html><head><script>
var req = null;
function processReqChange() {
  if (req.readyState == 4 && req.status == 200 ) {
    var dtable = document.getElementById( 'dataBody' );
    var movies = eval( req.responseText );
    for( var i = 0; i < movies.length; i++ ) {
      var elTr = dtable.insertRow( -1 );
      var elYearTd = elTr.insertCell( -1 );
      elYearTd.innerHTML = movies[i].year;
      var elTitleTd = elTr.insertCell( -1 );
      elTitleTd.innerHTML = movies[i].name;
} } }

function loadXMLDoc( url ) { ... }

var url = window.location.toString();
url = url.replace( /antipat4_fixed.html/, 'antipat4_data.js' );
loadXMLDoc( url );
</script></head><body>
<table cellspacing="0" cellpadding="3" width="100%">
<tbody id="dataBody"><tr>
  <th width="20%">Year</th>
  <th width="80%">Title</th>
</tr></tbody></table></body></html>

 

这个示例没有从服务器读取 XML，它读取的是 JavaScript 代码。然后使用 JavaScript 代码中的 eval() 函数获取数据，然后再使用这些数据快速构建表。

清单 13 展示了 JavaScript 代码。


清单 13. Antipat4_data.js 

[ { year: 1993, name: 'Jurassic Park' },
  { year: 1997, name: 'The Lost World: Jurassic Park' },
  { year: 2001, name: 'Jurassic Park III' } ]

 

这个功能要求服务器使用 JavaScript 语言进行通信。不过这通常不是什么大问题。大多数流行的 Web 语言已经支持 JavaScript Object Notation（JSON）输出。

优势是明显的。在这个示例当中，通过使用 JavaScript 语言，下载到客户机的数据减少了 52%。同样，性能也得到了提升。读取 JavaScript 代码的速度快了 9%。9% 可能看上去不是很大，但是要记住这是个非常基础的示例。更大的数据块或者更复杂的结构需要更多 XML 解析代码，而所需的 JavaScript 代码数量不会变。

 

 

服务器负载过重

在服务器上执行很少的任务的反面论证是在其上执行大量的操作。正如我在前面提到的，这是一个需要权衡的问题。但是，我想说明的是如何在客户机上对电影表执行排序，从而为服务器减轻负载。

清单 14 显示了可排序的电影表。


清单 14. Antipat5_sort.html 

<html><head><script>
var req = null;
var movies = null;
function processReqChange() {
  if (req.readyState == 4 && req.status == 200 ) {
    movies = eval( req.responseText );
    runSort( 'year' );
} }

function runSort( key )
{
  if ( key == 'name' )
    movies.sort( function( a, b ) {
      if ( a.name < b.name ) return -1;
      if ( a.name > b.name ) return 1;
      return 0;
    } );
  else
    movies.sort( function( a, b ) {
      if ( a.year < b.year ) return -1;
      if ( a.year > b.year ) return 1;
      return 0;
    } );
  var dtable = document.getElementById( 'dataBody' );
  while( dtable.rows.length > 1 ) dtable.deleteRow( 1 );
  for( var i = 0; i < movies.length; i++ ) {
    var elTr = dtable.insertRow( -1 );
    var elYearTd = elTr.insertCell( -1 );
    elYearTd.innerHTML = movies[i].year;
    var elTitleTd = elTr.insertCell( -1 );
    elTitleTd.innerHTML = movies[i].name;
  }
}

function loadXMLDoc( url ) { ... }

var url = window.location.toString();
url = url.replace( /antipat5_sort.html/, 'antipat4_data.js' );
loadXMLDoc( url );
</script></head><body>
<table cellspacing="0" cellpadding="3" width="100%">
<tbody id="dataBody"><tr>
  <th width="20%"><a href="javascript: void runSort('year')">Year</a></th>
  <th width="80%"><a href="javascript: void runSort('name')">Title</a></th>
</tr></tbody></table></body></html>

 

这是一个相当简单的示例。它无法处理那些很可能需要好几页显示的特别长的列表。但是它确实说明了创建一个能够快速排序的表非常简单，并且无需刷新页面，也不需要服务器来执行麻烦无聊的排序工作。

分享到：
| Eclipse插件资源链接
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    通过DOM和Ajax使用XML_从菜鸟到专家2006

    《通过DOM和Ajax使用XML_从菜鸟到专家2006》是一本旨在帮助初学者深入理解并掌握XML、DOM以及Ajax技术的书籍。XML（eXtensible Markup Language）是一种用于标记数据的语言，广泛应用于数据交换、配置文件、文档存储...

    掌握Ajax系列7：在请求和响应中使用XML（上）

    在Ajax的请求和响应中，XML只是一种可选的数据格式，而不是核心。 XML是一种结构化数据的通用格式，广泛用于数据交换，尤其是在不同的系统和平台之间。它的优点包括数据独立性、可读性和可扩展性。然而，Ajax并不...

    JQuery+AJAX处理XML数据

    **jQuery + AJAX 处理 XML 数据** 在网页开发中，jQuery 和 AJAX 技术的结合是获取和操作服务器端数据的常见方式。本篇将详细探讨如何使用 jQuery 的 AJAX 功能来处理 XML（可扩展标记语言）数据。 **1. jQuery 和...

    ajax_xml下载效果

    - XML是一种标记语言，用于存储和传输结构化数据。 - 其结构严谨，有严格的语法规则，便于机器解析和人阅读。 - 在Ajax中，XML可以作为数据传输的载体，用于从服务器获取或发送数据。 3. **Ajax与XML的结合**： ...

    解析xml，ajax

    Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，通过在后台与服务器进行少量数据交换，可以在不重新加载整个网页的情况下更新部分网页内容。Ajax的核心是JavaScript对象XMLHttpRequest，它允许...

    Ajax 和 XML 将 Ajax 用于聊天

    **Ajax（Asynchronous JavaScript and XML）技术是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这种技术的核心在于JavaScript，XML则...

    Ajax 解析XML+json总结

    Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。然而，实际应用中，XML已经不再是Ajax数据交互的...

    ajax调用xml ajax调用html

    ajax调用xml ajax调用htmlajax调用xml ajax调用htmlajax调用xml ajax调用htmlajax调用xml ajax调用htmlajax调用xml ajax调用htmlajax调用xml ajax调用htmlajax调用xml ajax调用htmlajax调用xml ajax调用htmlajax调用...

    Ajax\掌握 Ajax第 7 部分-在请求和响应中使用 XML

    2. **跨平台和跨语言兼容性**：XML是一种开放标准，几乎所有的编程语言都有解析XML的库，这使得它在不同系统间交换数据时具有很高的兼容性。 3. **文档的标准化需求**：如果数据需要遵循特定的标准格式，XML提供了...

    基于xml的Ajax

    **Ajax（Asynchronous JavaScript and XML）技术是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。在本案例中，我们专注于如何利用XML...

    ajax的xml格式传输.rar

    在IT行业中，Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下更新部分网页内容的技术。Ajax的核心在于创建XMLHttpRequest对象，通过这个对象与服务器进行异步数据交换，从而实现页面的...

    ajax发送xml请求小示例

    在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。XML（Extensible Markup Language）则是一种用于...

    ajax以及xml@xsl两种分页

    本篇将详细介绍两种无刷新分页技术：AJAX分页和XML结合XSL的分页。 **一、AJAX分页** AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在分页场景中，...

    ajax+xml实现省市区无刷新联动代码

    这种技术主要依赖于Ajax（异步JavaScript和XML）和XML数据格式来实现。以下是关于这个主题的详细解释： 1. **Ajax（异步JavaScript和XML）**： Ajax是一种在不重新加载整个网页的情况下，能够更新部分网页的技术。...

    ajax in action ：ajax 实战 源码

    Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。这本书《Ajax in Action》是Ajax领域的经典之作，它详细介绍了如何利用Ajax技术来构建更加高效、交互性更强的...

    Ajax_xml数据格式

    Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术使得用户可以与网页进行更流畅、更快捷的交互，提高了用户体验。Ajax的核心是JavaScript异步通信...

Magicbox
Global site tag (gtag.js) - Google Analytics