WebPascal脚本模型教程 - AJAX介绍

什么是AJAX？AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

比如，我们制作一个登录页面，当用户输入错误的密码时，在当前页面就要进行提醒，而不是整个页面切换后再提示再返回原来的登录页面，这样的用户体验是完全不同的。

AJAX基本用法，可以查看一下Bin\Script\AJAX案例目录下的AJAX.api和getip.api两个文件，AJAX.api负责调用getip.api并返回数据，在当前页。咱们来分析一下它的代码：

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getIP.api",true);
xmlhttp.send();
}
</script>
</head>
<body>

<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>

代码中<div id="myDiv">是表示这个div用来显示返回值，上面js函数loadXMLDoc()中的document.getElementById("myDiv").innerHTML就是找到这个div并设置其内容的处理；而xmlhttp.open("GET","getIP.api",true)则是进行http get操作，访问getIP.api，这样是不是大致能看明白了？

这个是AJAX的基本用法，但我们可以使用jquery来更加简单的使用它，在jquery中封装了几个方法，分别是$.get $.post 和 $.ajax，比如$.get，这样用：

$.get("网址?参数名=参数值&参数名2=参数值2",
    function(result){
      alert(result);
    }
  );

是不是很简单？但要注意，ajax是有跨域访问的限制的，如果你想访问非本域的地址，就需要在被访问者那里定义一些属性，当然也可以使用脚本中的HTTP函数，那就没这个限制了。