快速学习AJAX之一 Ajax基础

       大家好，这是一套AJAX的基础教程，首先声明一下我是从事ASP.NET开发

       但是我这回讲解的AJAX不是ASP.NET其中的哪些控件的操作。虽然ASP.NET自带的AJAX控件给我们使用AJAX带来了极大的方便

但是我决定我还是要一篇篇的更新  “原生态的AJAX”

     呵呵，我也不知道这套教程大概有多少讲，但是有一点我一定将我知道的AJAX完全以一种简单通俗的方式告诉大家。

     AJAX是什么呢？英文的全称你可以“有道一下”  说白了就是异步JavaScript+XML

大家可以去Google上面搜索一下AJAX的来历什么的，我这里一些从简。 弱弱的记得 希腊英雄里面有一个名字挺像 “AJAX”的，哈哈......

     其实大家简单的理解AJAX就是 一种“无刷新的技术”当然这是泛泛而谈，毕竟

AJAX技术没有这么简单。

     我们接触比较多的AJAX技术就是 在线地图服务了，Google地图就是率先将AJAX技术应用到切合实际的技术当中去的。

     AJAX技术中用到的四个比较重要的技术点  Javascrip  Css Dom(文档对象模型)   XMLHttpRequest对象   这个我们会在后面慢慢的接触到

当你了解了以上的前三项技术，那么你就可以接下来学习AJAX应用了。

好了，开始我们的AJAX之路

    首先我们需要创建XmlHttpRequest对象 。当然由于一些原因，浏览器兼容性问题，创建方式不同

    我们首先创建一个支持多浏览器的 XMLHttpRequest 对象 

    <script type="text/javascript">
        var xmlHttp = false;  //这个声明成什么都无所谓啦
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e1) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                xmlHttp = false;
            }
        }
        if (!xmlHttp && typeof XMLHttpRequest!='undefined') {
            xmlHttp = new XMLHttpRequest();

        }
    </script>

 

     然后我们写好了这个，大家可以自己把他写到一个 function中去

    下面我们继续  写完成  我们的第一个例子    Ajax  你好   呵呵 够俗了吧

     为了完成这个 我们需要创建一个一般处理程序

     2

然后我们在一般处理程序当中写上如下的简单代码

 

public void ProcessRequest(HttpContext context)
      {
          context.Response.ContentType = "text/html";
          context.Response.Write(DateTime.Now.ToString());
      }
好了下面开始我们的主要任务 
<head>
    <title></title>
    <script type="text/javascript">
        var xmlHttp = false;  //这个声明成什么都无所谓啦
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e1) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                xmlHttp = false;
            }
        }
        if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
            xmlHttp = new XMLHttpRequest();
        }
        function getAjax() {
            xmlHttp.open("GET", "Ajax.ashx");
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status ==200) {
                    alert(xmlHttp.responseText);
                }
            }
            xmlHttp.send();
        }
    </script>
</head>
<body>
  <input type="button" value="单击我显示时间" onclick="getAjax();" />
</body>
</html>

上面的代码就是特别简单的一个例子了 

我给大家简单的说明一下

xmlHttp.open("GET", "Ajax.ashx");    这句话中  包含的几个要点  第一 “GET” 这个是得到数据的一种方式  ，当然常见的也有 “POST”

其实还有几种，我记得好像是有7种 （HEAD,PUT,DELETE,OPTION,TRACE）这些方法大家可以自己去查找资料都是干神马的，我就不详细说明了。

后面是请求的路径，当然你可以请求一个URL的地址。

其实后面还有第三个参数，是设定异步操作还是同步操作的，这个我们以后再说。

onreadystatechange：

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

简单点说就是

每当 readyState 改变时，就会触发 onreadystatechange 事件。

还有 onreadystatechange 只是一个属性名称，而不是函数名称，这里其实是创建了一个匿名函数

readyState：

表示的是当前的对象状态【他有五个值】

0: uninitialized,  【请求未初始化】

1: loading,          【服务器连接已建立】

2: loaded,           【请求已接收】

3: interactive,     【请求处理中】

4: complete。    【请求已完成，且响应已就绪】

status：

HTTP响应状态码  具体的可以去Google上面找

我简单的举几个例子

403 Forbidden，

404 Not Found，【你懂的】

200正常返回 

所以我们需要满足这两个条件。

 

好了，剩下的就交给

xmlHttp.responseText 去读取吧。

 

哦了，第一节课就到这里了，讲解的不好，还望大家海涵，我会继续写下去的，谢谢！

 

对了，大家可以试一下 页面上面嵌入一个 视频，然后再调用 Alert（）时间 ，看看那个视频会中断吗？(*^__^*) 嘻嘻……  传说中的无刷新

posted @ 2011-07-28 18:05  KingDZ  阅读(5850)  评论(15)  编辑  收藏  举报