代码

<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. DDD领域驱动设计实践篇之如何提取模型

    需求说明: 省级用户可以登记国家指标 省级用户和市级用户可以登记指标分解 登记国家指标时,需要录入以下数据:指标批次.文号.面积,这里省略其他数据,下同 登记指标分解时,需要录入以下数据:指标批次.文 ...

  2. 自动备份文件到GITHUB的方法

    由于一个制作着玩的项目需要制作上传文件的功能,自己又不是搞网站的,也不想去维护一个服务器. 于是开发了一个上传服务器,可以自动把我上传到服务器的数据同步到Github服务器 而github服务器又提供 ...

  3. C#开源磁盘/内存缓存引擎

    前言 昨天写了个 <基于STSdb和fastJson的磁盘/内存缓存>,大家可以先看看.下午用到业务系统时候,觉得可以改进一下,昨晚想了一个晚上,刚才重新实现一下. 更新 1. 增加了对批 ...

  4. 虚拟化平台cloudstack(8)——从UI开始

    UI ucloudstack采用的是前后端分离的架构,就是说前端可以选择使用web.swing甚至其它的界面,都可以. 我们来看cloudstack的UI信息吧,所有的cloudstack的UI都在{ ...

  5. 去除NSString里面的空格

    NSString *password = @"12  34"; [password stringByTrimmingCharactersInSet:[NSCharacterSet ...

  6. SQL中group by的用法

    group by即按照给定字段对结果集进行分组,从字面意义上理解就是根据"by"指定的规则对数据进行分组,所谓的分组就是将一个"数据集"划分成若干个" ...

  7. lua跨平台文件夹遍历匹配查找

    require"lfs" --[[Desc:在B路径D文件中下 搜寻A路径下的没用到的C类文件: 并且将没用到的B类文件名称打印出来: 设置好路径拖到lua自带编辑器中即可运行之; ...

  8. Atitit.gui api自动化调用技术原理与实践

    Atitit.gui api自动化调用技术原理与实践 gui接口实现分类(h5,win gui, paint opengl,,swing,,.net winform,)1 Solu cate1 Sol ...

  9. 深入分析Java Web技术内幕(修订版)

    阿里巴巴集团技术丛书 深入分析Java Web技术内幕(修订版)(阿里巴巴集团技术丛书.技术大牛范禹.玉伯.毕玄联合力荐!大型互联网公司开发应用实践!) 许令波 著   ISBN 978-7-121- ...

  10. VisualSVN-Server 安装以及使用教程

    VisualSVN Server是免费的(代码管理工具),VisualSvn Server是SVN的服务器端 官网下载地址 安装VisualSVN-Server示例: 下载完安装包后,以安装Visua ...