代码

<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. js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  2. Java枚举类型getClass和getDeclaringClass区别(未完待续)

    Java中的枚举类型有getClass()和getDeclaringClass()两个方法,在通常情况下这两个方法返回的类型一样,在某些场景下会有不同的表现 参照 http://stackoverfl ...

  3. 哪些JavaScript IDE最好用？

    阅读本文之前,分享大家一张图片,看图会发现JavaScript开发需求最高,占比达到42.84%,因此掌握JavaScript语言好工作就不愁啦,工欲善其事必先利其器,那么选择IDE来开发是至关重要的 ...

  4. atitit 点播系统 概览 v2 qb1.docx

    atitit 点播系统 概览 v2 qb1.docx 1.1. 多界面(可以挂载多个不同的界面主题)1 1.2. 独立的选片模块(跨设备,跨平台)2 1.3. 跨设备平台(android安卓盒子,pc ...

  5. Atitit.eclipse 4.3 4.4  4.5 4.6新特性

    Atitit intellij idea的使用总结attilax 1. ideaIC-2016.2.4.exe1 1.1. Ij vs eclipse市场份额1 1.2. Ij的优点(方便的支持gro ...

  6. contentEditable属性设置是否可编辑元素的内容

    在HTML5中在标签新添加了一个属性contentEditable可以设置标签内的内容是否可以编辑: 设置contenteditable="true"标签内的元素(内容)可以编辑 ...

  7. ASP.NET MVC3 模板页的使用

    占位符的使用: 下面是一个模板页 _Layout.cshtml <!DOCTYPE html> <html> <head> @RenderSection(" ...

  8. ngResource提交json数据如何带参数

    ngResource提交json数据如何带参数 直接使用ngResource和REST服务接口交互可以让程序显得简洁,前提是配置好跨域和OPTIONS请求的支持,与此同时,如果需要带些额外的参数,有两 ...

  9. 使用jasperreports-5.6.0.jar导致的问题

    使用jasperreports-5.6.0.jar导致的问题 Struts2+jasperReport5.6如下设置: <!-- 社员档案 --> <package name=&qu ...

  10. jS事件之网站常用效果汇总

    下拉菜单 <!--简单的设置了样式,方便起见,将style和script写到同一个文档,着重练习事件基础--> <!DOCTYPE html> <html> < ...