奥非域

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函数,那就没这个限制了。