什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
AJAX 实例解释
上面的 AJAX 应用程序包含一个 div 和一个按钮。
div 部分用于显示来自服务器的信息。当按钮被点击时，它负责调用名为 loadXMLDoc() 的函数：
<html>
<body><div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button type="button" οnclick="loadXMLDoc()">Change Content</button></body>
</html>
接下来，在页面的 head 部分添加一个 <script> 标签。该标签中包含了这个 loadXMLDoc() 函数：
<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>
下面的是我在开发农业信息平台项目时候所使用的一些 AJAX 的工作原理代码。
1 <script language="javascript" type="text/javascript"> 2 3 function chg() { 4 if ($("#sel").val() == "FPhone") { 5 // $("#FPhone").focus(function () { 6 // $("#FPhone").val(""); 7 // }); 8 // $("#FPhone").blur(function () { 9 // $("#FPhone").val("请输入手机号码"); 10 // }); 11 12 $("#FPhone").show(); 13 $("#FMail").hide(); // var o = document.form1.sel; 14 // $("#FMail").val() = ""; 15 $("#FSafeQuestion").hide(); 16 // $("#FSafeQuestion").val() = ""; 17 $("#key").hide(); 18 // $("#key").val() = ""; 19 } 20 else if ($("#sel").val() == "FMail") { 21 22 // $("#FMail").focus(function () { 23 // $("#FMail").val(""); 24 // }); 25 // $("#FMail").blur(function () { 26 // $("#FMail").val("请输入电子邮箱"); //请输入电子邮箱 27 // }); 28 $("#FMail").show(); 29 $("#FPhone").hide(); 30 // $("#FPhone").val() = null; 31 $("#FSafeQuestion").hide(); 32 // $("#FSafeQuestion").val() = null; 33 $("#key").hide(); 34 // $("#key").val() = null; 35 } 36 else { 37 $("#FSafeQuestion").show(); 38 $("#key").show(); 39 $("#FPhone").hide(); 40 // $("#FPhone").val() = null; 41 $("#FMail").hide(); 42 // $("#FMail").val() = null; 43 } 44 } 45 // $(function () { 46 // $("#submit").click(function () { 47 // if ("@ViewBag.ErrorMsg1" != "") { 48 // $('#trErrorMsg').hide(); 49 // alert("'@ViewBag.ErrorMsg1'"); 50 // } //错误提示放哪儿？ 阻挡不住验证的效果！ 51 // else if ("@ViewBag.ErrorMsg2" != "") { 52 // alert("'@ViewBag.ErrorMsg2'"); 53 // } 54 // else { 55 // // alert("该手机号码已存在！"); 56 // return alert("该手机号码已存在！"); 57 // 58 // } 59 // // return true; 60 // }); 61 // }); 62 // function check() { 63 // 64 // 65 // alert("'@ViewBag.ErrorMsg'"); 66 // } 67 </script>
这里的ajax是用于对输入框的显示和隐藏操作：
<!--找回密码的方式--><tr><td height="22" align="right" class="grey_font_style2"><select class="wd" id="sel" οnchange="chg()" size="1" style="font-family: Verdana,Arial;font-size: 10pt;"><option value="FPhone">电话号码</option><option value="FMail">电子邮箱</option><option value="FSafeQuestion">安全问题</option></select><td height="22" align="right" class="grey_font_style2" id="change"><input type="text" value="" name="FPhone" id="FPhone" size="1" style="font-family: Verdana,Arial;font-size: 10pt font-color: #CCC" class="wd2" /><input type="text" value="" name="FMail" id="FMail" style="display: none; font-family: Verdana,Arial;font-size: 10pt;" class="wd2" /><select name="FSafeQuestion" id="FSafeQuestion" size="1" style="display: none; font-family: Verdana,Arial;font-size: 10pt;" class="wd2"><option value="" selected="selected">请选择</option><option value="我的小学名字">我的小学名字？</option><option value="我妈妈的名字">我妈妈的名字？</option><option value="我最难忘的日子">我最难忘的日子？</option><option value="我的学号或（工号）是">我的学号或（工号）是？</option><option value="我配偶的姓名是">我配偶的姓名是？</option><option value="我最喜欢的休闲运动是">我最喜欢的休闲运动是？</option><option value="我最喜欢的歌曲">我最喜欢的歌曲？</option><option value="我最喜爱的电影">我最喜爱的电影？</option><option value="自己编写问题">自己编写问题？</option></select></td></td></tr>
下面是对回答问题的输入框操作：（这些操作都是在前台页面上进行）
<tr id="key" style="display: none;"><td align="right"><span class="register_mid_font_red"></span>你的答案是：</td><td><input type="text" value="" name="FSafeAnswer" id="FSafeAnswer" style="font-family: Verdana,Arial;font-size: 10pt;" class="wd2" /></td></tr>
以上就是我第一次使用ajax时候的相关笔记和相关代码。
