代码

<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. node访问iis使用keep-alive设置不当

    iis默认的连接超时时间为2分钟 ,因此node程序使用keep-alive访问时,keep-alive的时间不应该超过2分钟,否则在请求完成后,node端继续保持连接,2分钟后iis断开连接,会导致 ...

  2. GAMIT 10.50在Ubuntu 12.04系统下的安装

    转载于:http://www.itxuexiwang.com/a/liunxjishu/2016/0225/162.html?1456480908 摘要:GAMIT/GLOBK是一套安装于Unix/L ...

  3. Oracle增删改DML脚本记录

    --insert into添加数据 ','王军','男'); --提交事物 commit; --回滚事物 --rollback; insert into teacher1 select * from ...

  4. 大叔也说Xamarin~Android篇~日志的记录

    回到目录 无论哪个平台,开始哪种应用程序,日志总是少不了的,大家在Lind.DDD里也可以看到大叔的日志组件,而在xamarin进行移动开发时,为了更好的调试,记录运行的情况,日志也是必须的,这讲主要 ...

  5. Android笔记——Android框架

    本篇将站在顶级的高度--架构,来看android.我开篇就说了,这个系列适合0基础的人且我也是从0开始按照这个步骤来 学的,谈架构是不是有点螳臂挡车,自不量力呢?我觉得其实不然,如果一开始就对整个an ...

  6. jQuery_04之第三方、自定义

    1.第三方插件: ①日期:layDate:不依赖于jquery  使用:html:<input class="laydate-icon">   css:引入laydat ...

  7. CAS原子锁 高效自旋无锁的正确用法

    "atomic_lock.h" #pragma once #ifndef _atomic_lock_h_include_ #define _atomic_lock_h_includ ...

  8. MongoDB修改器总结

    1"$set":用来制定一个字段值,若不存在,则创建:    一般用于点加一个字段   db.users.update({name:"joe"},{" ...

  9. python单线程爬虫code

    广度优先算法: # -*- coding: utf-8 -*- import urllib import urllib.request from bs4 import BeautifulSoup im ...

  10. XML序列化的时候如何支持Namespace

    我曾经不止一次(当然不仅仅是我意识到这个问题)说到过,XML标准中的Namespace的设计其实是一个较为失败的设计,它有它的优点,但缺点更多. http://zzk.cnblogs.com/s?w= ...