代码

<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. Linux xargs将输出数据流转换成命令参数

    200 ? "200px" : this.width)!important;} --> 介绍 我们可以利用管道将一个命令的“标准输出”作为另一个命令的“标准输入”:但是这里的 ...

  2. Unity3d热更新全书-加载(二)如何在不用AssetBundle的前提下动态加载预设

    Unity3D的主要构成大家都知道,首先是场景图,场景图上的节点构成一颗树. 每个节点对应一个GameObject对象 然后每个GameObject有若干个组件 有一些组件会与资源产生关系,比如Mes ...

  3. Java框架介绍-13个不容错过的框架项目

    本文转自互联网,个人收藏所用. 下面,我们将一同分享各有趣且颇为实用的Java库,大家请任取所需.不用客气~ 1.极致精简的Java Bootique是一项用于构建无容器可运行Java应用的极简技术. ...

  4. 大叔也说Xamarin~Android篇~ListView里的Click事件并获取本行的其它元素

    回到目录 我原创,我贡献,我是仓储大叔 本篇大叔原创,本着对技术的热爱去研究它,把成果分享给国人!大叔始终相信一句话:你只有选择一个感兴趣的工作,你才能更好的发挥你的潜力,而这一切都建立在你不断研究, ...

  5. Java线程：线程栈模型与线程的变量

    Java线程:线程栈模型与线程的变量   要理解线程调度的原理,以及线程执行过程,必须理解线程栈模型. 线程栈是指某时刻时内存中线程调度的栈信息,当前调用的方法总是位于栈顶.线程栈的内容是随着程序的运 ...

  6. Java正则表达式应用详解

    如果你曾经用过Perl或任何其他内建正则表达式支持的语言,你一定知道用正则表达式处理文本和匹配模式是多么简单.如果你不熟悉这个术语,那么“正则表达式”(Regular Expression)就是一个字 ...

  7. iOS 8.1.3 “各路助手挺尸”、“封杀一切助手

    图片来自 http://www.redmondpie.com 最近苹果发布了8.1.3系统更新.从更新日志看,没有多少变化(错误修复,提高稳定性和性能),但是苹果修复了一个"漏洞" ...

  8. python学习 操作mysql 环境搭建

    MySqlDB官网只支持Python3.4,这里Python3.5使用第三方库PyMysql连接Mysql数据库. 环境: window7.python3.5 下载PyMysql库:https://p ...

  9. vuejs学习网站推荐

    vuejs学习网站推荐 https://coligo.io/

  10. KnockoutJS 3.X API 第一章 简介

    本文纯正翻译自官网API文档.其中包含一下个人理解. 官网API地址:http://knockoutjs.com/documentation/introduction.html 简介 Knockout ...