代码

<head>

    <title>An Ajax demo</title>

    <script src="../js/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        //XMLHttpRequest对象:初始化为false;

        var XMLHttpRequestObject = false;

        //Netscape Navigator(7.0版及更高版本),Apple Safari(1.2及更高版本)和Firefox

        if (window.XMLHttpRequest) {

            XMLHttpRequestObject = new XMLHttpRequest();

        }

        //在Internet Explorer(5.0及更高版本)

        else if (window.ActiveXObject) {

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

        }

        function getData(dataSource, divID) {

            //如果创建的XMLHttpRequest对象无效，则退出

            if (XMLHttpRequestObject) {

                var obj = document.getElementById(divID);

                //打开XMLHttpRequest对象并配置好以便和服务器通信

                XMLHttpRequestObject.open("GET", dataSource);

                //处理数据下载

                XMLHttpRequestObject.onreadystatechange = function () {

                    if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {

                        //获取数据

                        obj.innerHTML = XMLHttpRequestObject.responseText;

                    }

                }

                //真正执行下载的代码使用post方法时send("data="+data)

                XMLHttpRequestObject.send(null);

            }

            else {

                var obj = document.getElementById("targetDiv");

                obj.innerHTML = "Sorry,your browser can't do Ajax.";

            }

        }

    </script>

</head>

<body>

    <h1>

        An Ajax demo</h1>

    <form>

    <!--data.txt文件和index.htm必须确保位于服务器的同一目录中,如果不在同一目录，必须加上上几级目录,例:data/data.txt-->

    <input type="button" value="Fetch the message" onclick="getData('data.txt','targetDiv')" /></form>

    <div id="targetDiv">

        <p>

            The fetched message will appear here</p>

    </div>

</body>

</html>

运行结果：

代码说明：

创建XMLHttpRequest对象

//在Netscape Navigator(7.0版及更高版本),Apple Safari(1.2及更高版本)和Firefox中，可以用下列代码创建XMLHttpRequest对象
//window.XMLHttpRequest:判断window.XMLHttpRequest对象是否存在(存在则浏览器可以用下面的方法创建XMLHttpRequest对象)
if (window.XMLHttpRequest) {
　　XMLHttpRequestObject = new XMLHttpRequest();
}
//在Internet Explorer(5.0及更高版本)中可以用下列代码创建XMLHttpRequest对象
//假如用户使用的是Microsoft Internet Explorer则应判断window.ActiveXObject对象是否存在(存在则浏览器可以用下面的方法创建XMLHttpRequest对象)
else if (window.ActiveXObject) {
　　XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

打开XMLHttpRequest对象

//open("Method","URL"[,asyncFlag[,"userName"[,"password"]]])方括号[]中的内容是可选的

//各个参数含义如下:

//Method:用于打开HTTP的方法,如GET,POST,PUT,HEAD或PROPFIND

//URL:请求的URL

//asyncFlag:表示是否为异步调用的布尔值,默认为true

//userName:用户名

//password:密码

XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequest.readyState和XMLHttpRequest.status

//readyState

//0:未初始化

//1:正在加载

//2:已加载

//3:交互式

//4:完成,表示数据已下载完毕

//status

//200:正常,表示下载正常

//404:未找到

if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {

    //下载的数据是简单文本对象,可从XMLHttpRequest对象的responseText属性读取这些数据

    //下载的数据是XML格式,可从XMLHttpRequest对象的responseXml属性读取这些数据

    obj.innerHTML = XMLHttpRequestObject.responseText;

}

//真正执行下载的代码

XMLHttpRequestObject.send(null);

总结：

创建Ajax的一般步骤:

(1)、创建一个XMLHttpRequest对象

(2)、使用XMLHttpRequest对象的open方法对其进行配置

(3)、将一个处理下载的JavaScript匿名函数通XMLHttpRequest对象的onreadystatechange属性关联起来

(4)、使用GET HTTP方法来获取数据，发送一个null值给服务器，这样将开始下载数据

注：在IE浏览器上按F12调试，只有在版本为10以上时才得到正确结果，在360上没任何问题

Ajax学习笔记1之第一个Ajax应用程序的更多相关文章

  1. Android:日常学习笔记(2)——分析第一个Android应用程序

    Android:日常学习笔记(2)——分析第一个Android应用程序 Android项目结构 整体目录结构分析 说明: 除了APP目录外,其他目录都是自动生成的.APP目录的下的内容才是我们的工作重 ...

  2. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  3. Android（java）学习笔记219：开发一个多界面的应用程序之两种意图

    1.两种意图: (1)显式意图: 在代码里面用intent设置要开启Activity的字节码.class文件: (2)隐式意图: Android(java)学习笔记218:开发一个多界面的应用程序之人 ...

  4. Docker学习笔记之一，搭建一个JAVA Tomcat运行环境

    Docker学习笔记之一,搭建一个JAVA Tomcat运行环境 前言 Docker旨在提供一种应用程序的自动化部署解决方案,在 Linux 系统上迅速创建一个容器(轻量级虚拟机)并部署和运行应用程序 ...

  5. Android（java）学习笔记162：开发一个多界面的应用程序之两种意图

    1.两种意图: (1)显式意图: 在代码里面用intent设置要开启Activity的字节码.class文件: (2)隐式意图: Android(java)学习笔记218:开发一个多界面的应用程序之人 ...

  6. node学习笔记（二）（ajax方式向node后台提交数据）

    通过ajax向node后台提交数据过程(附手写前后台代码),并总结post与get的区别 POST 前台代码 //CSS简单给点样式 <style> form{ width: 200px; ...

  7. Ajax学习笔记demo

    AJAX学习 AJAX简介: 全称:Asynchronous JavaScript and XML (JavaScript执行异步网络请求(JS和XML)),通过AJAX可以在浏览器向服务器发送异步请 ...

  8. AJAX学习笔记

    AJAX不是一种编程语言,AJAX是一种实现网页异步加载的技术,即不刷新网页也能部分的更新网页的内容.如:提交表单信息,通过ajax可以不刷新页面来使得人们明白如何正确的填写信息,判断填写信息的错误或 ...

  9. Ajax学习笔记(二)

    二.prototype库具体解释 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" ...

随机推荐

  1. cxf restful

    Restful 服务端 1 创建好pojo.dao.service, dao进行数据库操作,service提供服务 @Path("/roomservice") @Produces( ...

  2. memcache和redis区别

    memcache官方定义 Free & open source, high-performance, distributed memory object caching system, gen ...

  3. paip.python错误解决24

    paip.python错误解决 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net/attilax ...

  4. JS的脚本语言

    js的脚本语言全程javascript在网页里面使用的脚本语言:分类:1.嵌入网页里面2.在外部脚本标签可以写在网页的任何地方,但一般都写在网页的底部:<script type="te ...

  5. fir.im Weekly - 做一款 App 需要考虑什么

    开发 App 是一个痛并快乐的旅程.工具越来越多,成本也越来越低,那么在开发之前需要考虑些什么?limboy 总结了一些经验和反思--做一个 App 前需要考虑的几件事,参考一下为你的 App 多留点 ...

  6. Jquery判断数组中是否包含某个元素$.inArray()的用法

    判断数组里面是否包含某个元素可以使用 $.inArray("元素(字符串)",数组名称) 进行判断 ,当存在该元素(字符串)时,返回该元素在数组的下标,不存在时返回 -1 示例代码 ...

  7. SVN更改登录用户

    如果装了TortoiseSVN: Settings -> Saved Data -> Authentication Data -> clear.即可清除保存的上个用户登录信息:当再次 ...

  8. hdu4751Divide Groups（dfs枚举完全图集合或者bfs染色）

    /************************************************************************* > File Name: j.cpp > ...

  9. poj2513Colored Sticks（无向图的欧拉回路）

    /* 题意:将两端涂有颜色的木棒连在一起,并且连接处的颜色相同! 思路:将每一个单词看成一个节点,建立节点之间的无向图!判断是否是欧拉回路或者是欧拉路 并查集判通 + 奇度节点个数等于2或者0 */ ...

  10. MemCache分布式缓存的一个bug

    Memcached分布式缓存策略不是由服务器端至支持的,多台服务器之间并不知道彼此的存在.分布式的实现是由客户端代码(Memcached.ClientLibrary)通过缓存key-server映射来 ...