Ajax学习笔记1之第一个Ajax应用程序
代码
<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应用程序的更多相关文章
- Android:日常学习笔记(2)——分析第一个Android应用程序
Android:日常学习笔记(2)——分析第一个Android应用程序 Android项目结构 整体目录结构分析 说明: 除了APP目录外,其他目录都是自动生成的.APP目录的下的内容才是我们的工作重 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- Android（java）学习笔记219：开发一个多界面的应用程序之两种意图
1.两种意图: (1)显式意图: 在代码里面用intent设置要开启Activity的字节码.class文件: (2)隐式意图: Android(java)学习笔记218:开发一个多界面的应用程序之人 ...
- Docker学习笔记之一，搭建一个JAVA Tomcat运行环境
Docker学习笔记之一,搭建一个JAVA Tomcat运行环境 前言 Docker旨在提供一种应用程序的自动化部署解决方案,在 Linux 系统上迅速创建一个容器(轻量级虚拟机)并部署和运行应用程序 ...
- Android（java）学习笔记162：开发一个多界面的应用程序之两种意图
1.两种意图: (1)显式意图: 在代码里面用intent设置要开启Activity的字节码.class文件: (2)隐式意图: Android(java)学习笔记218:开发一个多界面的应用程序之人 ...
- node学习笔记（二）（ajax方式向node后台提交数据）
通过ajax向node后台提交数据过程(附手写前后台代码),并总结post与get的区别 POST 前台代码 //CSS简单给点样式 <style> form{ width: 200px; ...
- Ajax学习笔记demo
AJAX学习 AJAX简介: 全称:Asynchronous JavaScript and XML (JavaScript执行异步网络请求(JS和XML)),通过AJAX可以在浏览器向服务器发送异步请 ...
- AJAX学习笔记
AJAX不是一种编程语言,AJAX是一种实现网页异步加载的技术,即不刷新网页也能部分的更新网页的内容.如:提交表单信息,通过ajax可以不刷新页面来使得人们明白如何正确的填写信息,判断填写信息的错误或 ...
- Ajax学习笔记(二)
二.prototype库具体解释 1.prototype库的使用 //导入下载好的prototype.js文件 <script type="text/javascript" ...
随机推荐
- 安装金山WPS2013造成的HTML5 file.type值异常
处理代码的兼容性是前端攻城师们的家常便饭了,一般是对各种浏览器进行兼容性处理.但是有时候我们也会遭遇到浏览器以外的影响因素,这个是经常会被忽视掉的内容.比如前几天就听说客户端安装迅雷.暴风影音等软件会 ...
- 用curl向指定地址POST一个JSON格式的数据
昨天的一个任务,用POST 方式向一个指定的URL推送数据.以前都用的数组来完成这个工作. 现在要求用json格式.感觉应该是一样的.开写. <?php $post_url = "ht ...
- as3 同屏1000+动画，不掉帧。解决方案。
原理就是在一个enterframe里面,把1000个对象画到一个bitmapdata,然后交给舞台显示.
- SWF READER 破解日志。
网上传闻swf reader是破解最厉害的神器,可以内存抓取+doSWF反编译.所以去官网下了一个: SWF_Reader_2.3 不出所料,demo版本没有反编译的功能.网上搜到一个哥们尝试了下: ...
- 开发人员应该对IIS理论层的知识了解的多一些~第四讲 HttpModule中的几大事件
返回目录 本文主要介绍HttpModule,它在一个网页请求过程中是一个怎样的过程是我们要知道的,在网页加载过程中HttpModule在何时被执行也是我们要知道的,以及,HttpModule在网页请求 ...
- Java程序员的日常—— 基于类的策略模式、List<?>与List、泛型编译警告、同比和环比
早晨起得太早,昨晚睡得太晚,一天都迷迷糊糊的.中午虽然睡了半个小时,可是依然没有缓过来.整个下午都在混沌中....不过今天下载了一款手游--<剑侠情缘>,感觉不错,喜欢这种类型的游戏. 今 ...
- 带你走近AngularJS - 体验指令实例
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- [全文检索]Lucene基础入门.
本打算直接来学习Solr, 现在先把Lucene的只是捋一遍. 本文内容: 1. 搜索引擎的发展史 2. Lucene入门 3. Lucene的API详解 4. 索引调优 5. Lucene搜索结果排 ...
- fir.im Weekly - 不能错过的 GitHub Top 100 开源库
好的工具&资源,会带来更多的灵感.本期 fir.im Weekly 精选了一些实用的 iOS,Android 的使用工具和源码分享,还有前端.UI方面的干货.一起来看下:) Swift 开源项 ...
- fir.im Weekly - 1000 个 Android 开源项目集合
冬天到了,适宜囤点代码暖暖身.本期 fir.im Weekly 收集了最近一些不错的 GitHub 源码.开发工具和技术实践教程类文章分享给大家. codeKK - 集合近 1000 Android ...