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

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

   

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

      

Ajax是什么

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

   Asp.Net Ajax (1)---入门篇_第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" onclick="TextAjax();" />
   
</body>

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


代码解析及Aja与服务器交互的流程:
  1.  点击clickme,浏览器接收命令;
  2.  调用JavaScript事件处理函数,初始化XMLHttpRequest对象,同时指定一个回掉函数;
  3.  服务器接收XMLHttpRequest对象请求,处理数据,并返回;
  4.  执行JavaScript回调函数,解析返回信息;
  5.  将信息显示在界面
 

Ajax缺陷

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

    

你可能感兴趣的:(Asp.Net Ajax (1)---入门篇)