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

最新推荐文章于 2020-11-27 11:24:27 发布

lishuangzhe7047

最新推荐文章于 2020-11-27 11:24:27 发布

阅读量8.8k

点赞数 13

分类专栏： Web前端 Ajax学习

本文链接：https://blog.csdn.net/lishuangzhe7047/article/details/16810039

版权

Web前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

Ajax学习

5 篇文章 0 订阅

订阅专栏

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

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

Ajax是什么

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

详细解说：

同步过程：首先浏览器接受网址，将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与服务器交互的流程：

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

Ajax缺陷

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

lishuangzhe7047

关注

13
点赞
踩
10

收藏

觉得还不错? 一键收藏
42
评论
Asp.Net Ajax (1)---入门篇

在深入学习Ajax前，有必要了解一些基础，对我们整体认识Ajax很有帮助。文章将从一下几点介绍Ajax： Ajax是什么；能解决什么问题；使用什么原理；技术核心； Ajax是什么： Ajax是以一种新方法来整合现存的多种网页技术。该技术使用异步HTTP请求，在浏览器和Web服务器间传递XML数
复制链接

扫一扫