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