Ajax的傍晚

最新推荐文章于 2024-10-15 09:57:04 发布

diehuwen5636

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量75

点赞数

文章标签： javascript java xhtml ViewUI

原文链接：http://www.cnblogs.com/yslbb/p/7516028.html

版权

今天我简单了解了一下Ajax 一些不是很清楚的地方我记了下来以后还会补充。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

AJAX 应用

运用XHTML+CSS来表达资讯；
运用JavaScript操作DOM（Document Object Model）来执行动态效果；
运用XML和XSLT操作资料;
运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换；
注意：AJAX与Flash、Silverlight和Java Applet等RIA技术是有区分的。

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

AJAX 工作原理

AJAX

AJAX - 创建 XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

实例：

<!DOCTYPE html>
           <html>
           <head>
           <meta charset="utf-8">
           <script>
            function loadXMLDoc()
           {
               var xmlhttp;
   if (window.XMLHttpRequest)
{
     // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
      xmlhttp=new XMLHttpRequest();
}
      else
         {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
          xmlhttp.onreadystatechange=function()
       {
       if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
           document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
       }
   }
   xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
   xmlhttp.send();
      }
     </script>
        </head>
     <body>
            <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
            <button type="button" οnclick="loadXMLDoc()">修改内容</button>
     </body>
</html>