菜鸟蔡之Ajax复习第一篇(后台asp.net)(传统的JavaScript方法实现Ajax功能)

  其实最简单的可以理解为:JavaScript + XMLHttpRequest + CSS +服务器端的集合,其本质上是一种浏览器端的技术。好了,

  简单的描述了一下,现在直接上代码吧!

  (1).功能描述:

  

  新建两个html页面分别为1.html和2.html,在不刷新的情况下点击1.html页面上的“获取数据”按钮后,将2.html页中的内容显示在1.html页面的<div>标记中。

  (2).实现代码:

  1.html实现代码:

  

复制代码 代码如下:

  <head>

  <title>传统的javascript方法实现Ajax功能</title>

  <script type="text/javascript">

  //声明一个空的objXmlHttp对象

  var objXmlHttp = null;

  //根据浏览器的不同,返回改变了的实体对象

  function CreateXMLHTTP() {

  if (window.ActiveXObject) {

  objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

  } else {

  if (window.XMLHttpRequest) {

  objXmlHttp = new XMLHttpRequest();

  } else {

  alert("初始化XMLHTTP错误!");

  }

  }

  }

  function GetSendData() {

  document.getElementById("divMsg").innerHTML = "正在加载中......"; //初始化内容

  //设置发送地址变量并赋初始值

  var strSendUrl = "2.html?date=" + Date();//为了能即时获取2.html变了的数据,在发送

  //URL时设置参数,功能是清空缓存中已加载的变量信息,重新获取新的即时数据

  //实例化XMLHttpRequest对象

  CreateXMLHTTP();

  //open方法初始化XMLHttpRequest

  objXmlHttp.open("GET", strSendUrl, true);

  //设置异步请求的事件处理程序

  objXmlHttp.onreadystatechange = function () { //回调事件函数

  if (objXmlHttp.readyState == 4) { //如果请求完成加载

  if (objXmlHttp.status == 200) { //如果响应已成功

  //获取数据

  document.getElementById("divMsg").innerHTML = objXmlHttp.responseText;

  }

  }

  }

  objXmlHttp.send(null);

  }

  </script>

  </head>

  <body>

  <input type="button" id="btn" value="获取数据" onclick="GetSendData()" />

  <div id="divMsg">

  </div>

  </body>

  </html>

  2.html实现的代码:

  

复制代码 代码如下:

  <head>

  <title></title>

  </head>

  <body>

  姓名:小菜<br />

  性别:男<br />

  邮箱:[email protected]

  </body>

  </html>

  呵呵、、、这部分就这么多了,简单吧!唉,原来神奇的Ajax也是简单的(想想一开始的人机交互就发抖),赶快试试吧!童鞋......