Ajax是Asynchronous JavaScript and XML,其核心是通过XMLHttpRequest对象以一种异步的方式向服务器发送请求,并通过该对象接收请求返回的数据,从而完成人
机交互的数据操作(呵呵、、、说的有点吓人!)。其实最简单的可以理解为:JavaScript + XMLHttpRequest + CSS +服务器端的集合,其本质上是一种浏览器端的技术。好了,
简单的描述了一下,现在直接上代码吧!
(1).功能描述:
新建两个html页面分别为1.html和2.html,在不刷新的情况下点击1.html页面上的“获取数据”按钮后,将2.html页中的内容显示在1.html页面的<div>标记中。
(2).实现代码:
1.html实现代码:
1 <head> 2 <title>传统的javascript方法实现Ajax功能</title> 3 4 <script type="text/javascript"> 5 6 //声明一个空的objXmlHttp对象 7 var objXmlHttp = null; 8 9 //根据浏览器的不同,返回改变了的实体对象 10 function CreateXMLHTTP() { 11 if (window.ActiveXObject) { 12 objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 13 } else { 14 if (window.XMLHttpRequest) { 15 objXmlHttp = new XMLHttpRequest(); 16 } else { 17 alert("初始化XMLHTTP错误!"); 18 } 19 } 20 } 21 22 function GetSendData() { 23 document.getElementById("divMsg").innerHTML = "正在加载中......"; //初始化内容 24 //设置发送地址变量并赋初始值 25 var strSendUrl = "2.html?date=" + Date();//为了能即时获取2.html变了的数据,在发送 26 //URL时设置参数,功能是清空缓存中已加载的变量信息,重新获取新的即时数据 27 //实例化XMLHttpRequest对象 28 CreateXMLHTTP(); 29//open方法初始化XMLHttpRequest 30 objXmlHttp.open("GET", strSendUrl, true); 31 //设置异步请求的事件处理程序 32 objXmlHttp.onreadystatechange = function () { //回调事件函数 33 if (objXmlHttp.readyState == 4) { //如果请求完成加载 34 if (objXmlHttp.status == 200) { //如果响应已成功 35 //获取数据 36 document.getElementById("divMsg").innerHTML = objXmlHttp.responseText; 37 } 38 } 39 } 40 objXmlHttp.send(null); 41 } 42 </script> 43 </head> 44 <body> 45 <input type="button" id="btn" value="获取数据" οnclick="GetSendData()" /> 46 <div id="divMsg"> 47 </div> 48 </body> 49 </html> 50 51
2.html实现的代码:
1 <head> 2 <title></title> 3 </head> 4 <body> 5 姓名:小菜<br /> 6 性别:男<br /> 7 邮箱:cj1161059871@163.com 8 </body> 9 </html>
呵呵、、、这部分就这么多了,简单吧!