Asp.Net Ajax (1)---入门篇

我会带着你远行 2022-09-18 10:56 133阅读 0赞

在深入学习Ajax前，有必要了解一些基础，对我们整体认识Ajax很有帮助。

文章将从以下几点介绍Ajax：

# Ajax是什么 #

Ajax是以一种新方法来整合现存的多种网页技术。该技术使用异步HTTP请求，在浏览器和Web服务器间传递XML数据，只更新部分网页内容。而传统的网页刷新使用的是同步的HTTP请求。具体过程如下图所示：

![SouthEast][]

详细解说：![Image 1][]

同步过程：首先浏览器接受网址，将HTTP请求送至Web服务器，服务器处理数据，再将HTTP数据送往浏览器页面显示。整个流程完成后，才能进行下一次的操作。**同步过程是和HTTP请求同步**。

异步过程：当HTTP请求发送后，通过Ajax技术使用的XMLHttpRequest对象来发送，此时不需等待服务器响应处理，返回数据等操作，用户可直接在浏览器界面进行下一步操作。异步过程是Ajax的HTTP请求和用户输入数据等操作是异步的。

# Ajax的实现原理 #

用简单实例说明，获取txt文件中的内容，并显示在界面上。 Ajax方法实现代码如下：

<head runat="server">
        <title>ajaxText</title>
        <script type="text/javascript">
            function TextAjax() {
    
                var xmlHttp; //声明XMLHttRequest对象变量
    
                ///
                /// HTTPRequest对象的创建
                try {
                    //创建对象
                    xmlHttp = new XMLHttpRequest(); //创建对象这条语句针对 Firefox、Opera 以及 Safari 浏览器
                } catch (e) {
                    //如果不成功，则尝试创建针对 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")
                     try {
                         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                     } catch (e) {
                         //如果还没有成功，则创建针对 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
                         try {
                              xmlHttp = new ActiveXObject("Xicrosoft.XMLHTTP");
                          } catch (e) {
                               //错误提示，浏览器过时，不支持Ajax
                               alert("您的浏览器不支持Ajax");
                               return false;
                           }
    
                     }
                } /// 对象创建完毕
    
                   //设置回调函数
                   xmlHttp.onreadystatechange = function () {
                    
                    //4==请求已完成，可以访问
                       if (xmlHttp.readyState == 4) {
                        //从服务器的response获取数据
                           document.getElementById("getTXT").innerHTML = xmlHttp.responseText; //responsetext,属性获取服务器返回的数据
                    }
                }
                xmlHttp.open("GET", "time.txt", "true");
                xmlHttp.send();
    
            }
        </script>
    </head>
    <body>
       
         <div id="getTXT"></div>
        <input type="button" value="clickme" οnclick="TextAjax();" />
       
    </body>

运行结果为：txt文件中的内容。

代码解析及Aja与服务器交互的流程：

1.   点击clickme，浏览器接收命令；
2.   调用JavaScript事件处理函数，初始化XMLHttpRequest对象，同时指定一个回掉函数；
3.   服务器接收XMLHttpRequest对象请求，处理数据，并返回；
4.   执行JavaScript回调函数，解析返回信息；
5.   将信息显示在界面

# Ajax缺陷 #

Ajax的主要功能就是解决异步刷新界面问题。由于Ajax的技术需要使用JavaScript实现所以要求开发人员对JavaScript掌握熟练；现在也还没有非常成熟的用来开发调试JavaScript的IDE；并且每种浏览器提供的DOM模型有差异，所以在编写跨浏览器的时候有点困难。

[SouthEast]: /images/20220828/494e69362a704326bf098578b828a41c.png
[Image 1]: