原生Ajax概述

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML（标准通用标记语言的子集））。
是指一种创建交互式网页应用的网页开发技术。
Ajax通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。
这意味着可以在(不重新加载)整个网页的情况下，对网页的(局部)进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
AJAX基于web标准,
AJAX用WEB进行动态显示与交互,
AJAX用javascript将所有内容绑定在一起
AJAX需要考虑浏览器的兼容性问题
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

二、原生Ajax编程步骤

1.创建 XMLHttpRequest 对象
1)ajax技术的核心是javascript的XMLHttpRequest对象,他是一种支持异步请求的技术;原生ajax依赖于那个对象 XMLHttpRequest,
2)所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：xmlhttp=new XMLHttpRequest();
3)老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
4)为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：:

代码:

var xmlhttp;
	if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
 			 xmlhttp=new XMLHttpRequest();
  	}else{// code for IE6, IE5
  			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    	}

2.设置回调函数
1)onreadystatechange:设置回调函数的方法当请求被发送到服务器时执行,每当 readyState(通讯状态)变时，就会触发onreadystatechange 事件。
2)当 readyState 等于 4 且页面状态(Status)为 200 时，表示响应已就绪：
a)存有 XMLHttpRequest 的readyState。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
b)Status(页面状态)
200: "OK"表示执行成功
404: 未找到页面
3)如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText:获得字符串形式的响应数据。
responseXML:获得 XML 形式的响应数据。
代码

xmlhttp.onreadystatechange=function() {
 		 if (xmlhttp.readyState==4 && xmlhttp.status==200) {
   			 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   		 }
  	 }

3.使用open方法设置参数/设置请求
XMLHttpRequest 对象的 open()方法
open(method,url,async): 作用:设置请求
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：默认true（异步）或 false（同步）
异步或同步
1)通过异步AJAX，JavaScript 无需等待服务器的响应，而是：
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
2)同步执行意味着代码必须顺序执行,
必须等待得到服务器响应并执行后,
再执行其他脚本
代码

xmlhttp.open("GET","/statics/demosource/ajax_info.txt",true);

4.发送请求
注意：如果是post方式发送请求，还需要加上这一行xmlhttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
XMLHttpRequest 对象的send() 方法将请求发送到服务器。
xmlhttp.send();

实例

<script  >
function fun()
{
	var xmlhttp;
	if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
 		 xmlhttp=new XMLHttpRequest();
  	}else{// code for IE6, IE5
  		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   	}
	xmlhttp.onreadystatechange=function() {
 		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
   			 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
   		}
   	}
	xmlhttp.open("/statics/demosource/GET","ajax_info.txt",true);
	xmlhttp.send();
}
</script>
<body>
	<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
	<button type="button" onclick="fun()">修改内容</button>
</body>

猜你喜欢