AJAX，是Asynchronous Javascript And XML的简写，即异步JavaScript和XML，它是一种用于创建快速动态网页的开发技术。随便打开一个网页，在搜索框中输入要查询内容的关键字，搜索框下方会自动给出搜索建议列表，其实这就是AJAX的应用实例。
AJAX 独立于 Web 服务器，它不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。传统的网页如果需要更新内容，必须重载整个网页面。而AJAX的应用， 可以通过在后台与服务器进行少量数据交换使网页实现异步更新，这也就意味着可以在不重新加载整个网页的情况下，对网页部分进行更新。实现这种异步机制的基础是XmlHttpRequest 。
XmlHttpRequest 是AJAX的核心，是一种支持异步请求的技术，XmlHttpRequest 可以使JavaScript 向服务器提出请求并处理响应，而不阻塞用户。在使用XMLHttpRequest发送请求和处理响应之前，必须先用JavaScript 创建一个XMLHttpRequest对象。由于浏览器的兼容性，各个浏览器的实现有所不同。IE6及其以前的版本是以ActiveX控件的方式来创建XMLHttpRequest对象的，而IE7及更高版本、FireFox、Opera等其他浏览器则可以直接创建。
<script type="text/javascript">
//声明XMLHttpRequest全局变量
var xmlhttp;
//1.创建XMLHttpRequest对象
function submit() {
//初始化xmlhttp
xmlhttp=null;
//创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
//IE7，IE8，FireFox,Mozilla,Opera...
xmlhttp = new XMLHttpRequest();
//alert(xmlhttp);
}
else if (window.ActiveXObject)
{
//IE6,IE5...
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//alert(xmlhttp);
}
if(xmlhttp == undefined || xmlhttp==null)
{
alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
}
</script>
XMLHttpRequest使用遵循五步法
1、建立XMLHttpRequest对象
2、注册回调函数
3、使用OPEN方法设置和服务器端交互的基本信息
4、设置发送的数据，开始和服务器交互
5、回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器端返回的数据，更新页面内容。
下面是关于XMLHttpRequest应用的一个小demo,关于XMLHttpRequest的一些常用属性在实例应用中都有详细介绍，如有不合理的地方，欢迎留言交流。
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
//声明XMLHttpRequest全局变量
var xmlhttp;
//1.创建XMLHttpRequest对象
function submit() {
//初始化xmlhttp
xmlhttp=null;
//创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
//IE7，IE8，FireFox,IE5...
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//alert(xmlhttp);
}
if(xmlhttp == undefined || xmlhttp==null)
{
alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
}
//2.注册回调方法
//onreadystatechange请求状态改变的事件触发器
//注意：应该将回调函数的名字注册给onreadystatechange
//callback()表示把回调函数的返回值注册给了onreadystatechange
xmlhttp.onreadystatechange = callback;
//获取文本框中的内容
var userName = document.getElementById("name").value;
//******************GET交互方式***************//
//请求数据位于url链接中，send方法参数值为null即可
//********************************************//
//3.设置和服务器端进行交互的参数
xmlhttp.open("GET","AJAX?name=" + userName,true);
//4. 设置向服务器发送的数据，启动和服务端的交互
xmlhttp.send(null);
//******************POST交互方式***************//
//先调用setRequestHeader方法设置Content-Type的值
//然后调用send方法，请求数据位于send方法中
//********************************************//
//3.设置和服务器端进行交互的参数
xmlhttp.open("POST","AJAX",true);
//POST方式交互需要添加的代码
xmlhttp.setRequestHeader("Content-Type","application/x-www.form-urlencoded");
//4. 设置向服务器发送的数据，启动和服务端的交互
xmlhttp.send("name=" + userName);
}
//设定回调函数
function callback() {
//5.判断和服务器的交互是否完成，还要判断服务器是否正确返回了数据
if (xmlhttp.readyState == 4)
{ //readyState=0，未初始化。对象以创建，未调用OPEN
//readyState=1,open方法成功调用，未调用send方法
//readyState=2，send方法成功调用，未开始接收数据
//readyState=3，正在接收数据，http响应头信息已接收，响应数据尚未接收完成
//readyState=4，响应数据接收完成。
if (xmlhttp.status == 200)
{ //status=200，成功返回数据
//status=404，未找到
//status=500，服务器内部错误
//纯文本数据的接受方法
var message = xmlhttp.responseText;
//向div中填充文本内容
var testdiv = document.getElementById("test");
testdiv.innerHTML = message;
}
}
}
</script>
</head>
<body>
<!--<input type="button" onclick="submit()" value="兼容性测试" />-->
<div></div>
<input type="text" id="name"/>
<input type="button" onclick="submit()" value="校验用户名" />
<br />
<div id="test"></div>
</body>
</html>
关于XMLHttpRequest的知识点掌握还在继续积累中，也会在博文中继续进行总结。
原文链接：https://www.f2er.com/ajax/163755.html