AJAX 简介

什么是 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" onclick="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" onchange="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时候的相关笔记和相关代码。

 

posted @ 2013-07-23 11:05  代号 11  阅读(318)  评论(1)  编辑  收藏  举报