快速学习AJAX之一 Ajax基础

最新推荐文章于 2022-11-11 10:55:45 发布

zhanzkw

最新推荐文章于 2022-11-11 10:55:45 发布

阅读量804

点赞数

分类专栏： AJAX 文章标签： ajax xmlhttprequest asp.net silverlight function google

AJAX 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

大家好，这是一套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 你好呵呵够俗了吧

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

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

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="单击我显示时间" οnclick="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（）时间，看看那个视频会中断吗？(*^__^*) 嘻嘻…… 传说中的无刷新

作者：KingDZ
出处：http://www.cnblogs.com/hihell/
关于作者：作者喜欢编程，擅长ASP.NET网站开发，喜欢MVC,SilverLight开发，喜欢交流，喜欢创新
我的QQ：860866679 MSN：wangdezhen@live.com 期待有共同志向者交流进步。
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题可以通过KingDZ's Email 联系我，非常感谢。

zhanzkw

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
快速学习AJAX之一 Ajax基础

大家好，这是一套AJAX的基础教程，首先声明一下我是从事ASP.NET开发但是我这回讲解的AJAX不是ASP.NET其中的哪些控件的操作。虽然ASP.NET自带的AJAX控件给我们使用AJAX带来了极大的方便但是我决定我还是要一篇篇的更新 “原生态的AJAX” 呵呵，我也不知道这套教程大概有多少讲，但是有一点我一定将我知道的AJAX完全以一种简单通俗的方式告诉大
复制链接

扫一扫