代码

<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. [php入门] 1、从安装开发环境环境到（庄B）做个炫酷的登陆应用

    1.前言 本文适合想了解下web开发入门的小白~ 最近在根据一个网上课程学习php,课程内说道: php环境自己搭比较麻烦,可以用wamp集成开发环境,一键安装即可. 2.安装集成开发环境 下面是wa ...

  2. 了解了这些才能开始发挥jQuery的威力

    由于当前jQuery如此的如雷贯耳,相信不用介绍什么是jQuery了,公司代码中广泛应用了jQuery,但我在看一些小朋友的代码时发现一个问题,小朋友们使用的仅仅是jQuery的皮毛,只是使用id选择 ...

  3. XMPie部署与创建过程 - 快速指南

    XMPie部署与创建过程 1PhotoShop.Indesign.VS2013关系.作用.使用 .1.1目的与过程 1. Photoshop负责导出cpkg文件. 1.1 动态性 如果你想要生成动态的 ...

  4. CocoaPods 深入使用

    在 CocoaPods 使用中介绍了基本的使用 写项目的时候想用到 SQLite.swift第三方库,但是问题来了 pod search SQLite.swift  //执行这条语句,搜索不到结果 但 ...

  5. MVVM架构~mvc,mvp,mvvm大话开篇

    返回目录 百度百科的定义: MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理,Model提供数据,View负 责显示.作为一种新 ...

  6. WPF仿Win7便笺

    最近用WPF写了个仿WIN7下面的便笺小工具,还算是比较华丽的,相似度99%以上吧,在集成了便笺原有的功能以外,当然也做了略微的修改,比如加了关于作者版本信息和修改了原有删除便笺的系统弹出框.软件开机 ...

  7. java webservice 总结（学会读别人的webservice并且通过代理模式访问）

    公司做的系统之间的交互用到了webservice做交互,现在对webservice做一个总结. 1.配置已有的webservice webservice主要包括 xml/json:作为传输数据的格式 ...

  8. SQL Pass北京举行2014年第一次线下活动

    地点:北京微软(中国)有限公司[望京利星行],三层308室 时间:2014年 3 月15日 13:30-16:30 SQL PASS 北京QQ群号:2435349 报名地址:http://1drv.m ...

  9. 【WP开发】认清“不透明度”与“可见性”的区别

    这两种情况,许多朋友平时都没有注意到: 1.设置Opacity属性的值为0: 2.将Visibility属性设置为Collapsed. 不少人会简单地认为这两种情况是一样的,都是让UI元素看不见. 我 ...

  10. poj 3321 Apple Trie

    /* poj 3321 Apple Trie 这道题的关键是如何将一个树建成一个一维数组利用树状数组来解题! 可以利用dfs()来搞定,我们在对一个节点深搜后,所经过的节点的数目就是该节点的子树的数目 ...