代码

  1. <head>
  2.     <title>An Ajax demo</title>
  3.     <script src="../js/jquery-1.4.1.js" type="text/javascript"></script>
  4.     <script type="text/javascript">
  5.         //XMLHttpRequest对象:初始化为false;
  6.         var XMLHttpRequestObject = false;
  7.  
  8.         //Netscape Navigator(7.0版及更高版本),Apple Safari(1.2及更高版本)和Firefox
  9.         if (window.XMLHttpRequest) {
  10.             XMLHttpRequestObject = new XMLHttpRequest();
  11.         }
  12.         //在Internet Explorer(5.0及更高版本)
  13.         else if (window.ActiveXObject) {
  14.             XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  15.         }
  16.  
  17.         function getData(dataSource, divID) {
  18.             //如果创建的XMLHttpRequest对象无效，则退出
  19.             if (XMLHttpRequestObject) {
  20.                 var obj = document.getElementById(divID);
  21.                 //打开XMLHttpRequest对象并配置好以便和服务器通信
  22.                 XMLHttpRequestObject.open("GET", dataSource);
  23.  
  24.                 //处理数据下载
  25.                 XMLHttpRequestObject.onreadystatechange = function () {
  26.                     if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
  27.                         //获取数据
  28.                         obj.innerHTML = XMLHttpRequestObject.responseText;
  29.                     }
  30.                 }
  31.                 //真正执行下载的代码使用post方法时send("data="+data)
  32.                 XMLHttpRequestObject.send(null);
  33.             }
  34.             else {
  35.                 var obj = document.getElementById("targetDiv");
  36.                 obj.innerHTML = "Sorry,your browser can't do Ajax.";
  37.             }
  38.         }
  39.     </script>
  40. </head>
  41. <body>
  42.     <h1>
  43.         An Ajax demo</h1>
  44.     <form>
  45.     <!--data.txt文件和index.htm必须确保位于服务器的同一目录中,如果不在同一目录，必须加上上几级目录,例:data/data.txt-->
  46.     <input type="button" value="Fetch the message" onclick="getData('data.txt','targetDiv')" /></form>
  47.     <div id="targetDiv">
  48.         <p>
  49.             The fetched message will appear here</p>
  50.     </div>
  51. </body>
  52. </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对象

  1. //open("Method","URL"[,asyncFlag[,"userName"[,"password"]]])方括号[]中的内容是可选的
  2. //各个参数含义如下:
  3. //Method:用于打开HTTP的方法,如GET,POST,PUT,HEAD或PROPFIND
  4. //URL:请求的URL
  5. //asyncFlag:表示是否为异步调用的布尔值,默认为true
  6. //userName:用户名
  7. //password:密码
  8. XMLHttpRequestObject.open("GET", dataSource);

XMLHttpRequest.readyState和XMLHttpRequest.status

  1. //readyState
  2. //0:未初始化
  3. //1:正在加载
  4. //2:已加载
  5. //3:交互式
  6. //4:完成,表示数据已下载完毕
  7.  
  8. //status
  9. //200:正常,表示下载正常
  10. //404:未找到
  11. if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
  12.     //下载的数据是简单文本对象,可从XMLHttpRequest对象的responseText属性读取这些数据
  13.     //下载的数据是XML格式,可从XMLHttpRequest对象的responseXml属性读取这些数据
  14.     obj.innerHTML = XMLHttpRequestObject.responseText;
  15. }
  1. //真正执行下载的代码
  2. XMLHttpRequestObject.send(null);

总结：

  1. 创建Ajax的一般步骤:
  2. (1)、创建一个XMLHttpRequest对象
  3. (2)、使用XMLHttpRequest对象的open方法对其进行配置
  4. (3)、将一个处理下载的JavaScript匿名函数通XMLHttpRequest对象的onreadystatechange属性关联起来
  5. (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. 看svn用户组管理功能的产品设计

    我负责公司的svn配置.用了近一年了,今天饶有兴致,分享一下svn的用户组管理功能,这个产品设计值得借鉴,简单易用. svn用户组管理的功能描述:新建用户组,并给组分配成员用户:编辑用户组,包括修改组 ...

  2. 浅谈敏捷组织中PMO的人物

    所谓的"敏捷组织"其实并没有标准的形式,而且PMO(项目办理单位)并没有一个标准的人物界说.有一个十分遍及的误解,公司在挑选"灵敏"或许"瀑布&quo ...

  3. EF架构~为导航属性赋值时ToList()的替换方案

    回到目录 今天在进行EF开发时,遇到一个问题,在进行join查询时,类中的一个集合类型的导航属性,在给它赋值时,将查询出来的结果ToList()后,出错了,linq to entity不支持这种操作, ...

  4. paip.解决access出现 -2147467259 无效的参数量

    paip.解决access出现 -2147467259   无效的参数量 作者Attilax  艾龙,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http: ...

  5. 25．按要求编写一个Java应用程序： （1）编写一个矩形类Rect，包含： 两个属性：矩形的宽width；矩形的高height。 两个构造方法： 1．一个带有两个参数的构造方法，用于将width和height属性初化； 2．一个不带参数的构造方法，将矩形初始化为宽和高都为10。 两个方法： 求矩形面积的方法area() 求矩形周长的方法perimeter() （2）通过继承Rect类编写一个具有

    package zhongqiuzuoye; //自己写的方法 public class Rect { public double width; public double height; Rect( ...

  6. 通过bootstrap来学习less

    很早之前就听说过less了,但是一直拖着没去学习.最近抽空看了less,其实语法很简单,看一遍基本就知道怎么用了.平时自己写页面用less的话,感觉是方便了些,但是难道less的好处就只是这样? 刚好 ...

  7. linux安全检查

    1 ssh后门 检察语句: grep -E "user,pas|user:pas" /usr/bin/* /usr/local/sbin/* /usr/local/bin/* /b ...

  8. chrome开发总结（交互/权限/存储）-爬虫

    chrome开发总结(交互/权限/存储)-爬虫 [TOC] 标签(空格分隔): 杂乱之地 经过一翻折腾.还是选择了chrome来做爬虫.主要是为了解决一些ajax加载的问题以及代理的问题. 1.chr ...

  9. js中关于value的一个小知识点(value既是属性也是变量)

    今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻. [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" v ...

  10. vs xamarin android 读取rest

    private void Btn_Click(object sender, EventArgs e) { var u = FindViewById<EditText>(Resource.I ...