AJAX编程步骤

1.创建XMLHttpRequest对象
2.设置请求方式
3.调用回调函数
4.发送请求
5.处理返回的结果

属性

readyState:
0:为初始化已经创建好了XMLHttpRequest对象xml 但是还没有初始化
1：已经初始化好了XMLHttpRequest对象xml 准备好要发送了
2：send被调用请求已经发送但是还没有收到服务器的响应
3：浏览器正在接受服务器发送过来的请求但是还没有接受完
4：浏览器已经接受请求完毕
responseText:
服务器返回的响应文本
responseXml：
服务器返回的响应xml
status
服务器的http状态码
statusText
服务器的http状态原因文本

方法：

open("方法",url,是否异步)
send(参数) 参数为向服务器传递的数据如果是get的话参数为null
onreadystatechange=function(){} 当xml的readyState发生改变的时候就会调用，所以在这个过程中onreadystatechange总共会被调用5次

实例:

<!DOCTYPE HTML>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>Ajax实例</title>

<script type="text/javascript">
? ? //初始化一个存储XMLHttpRequest对象的变量
? ? var xhr = null;
? ? //定义一个函数用来创建XMLHttpRequest对象,兼容各个版本
? ? function CreatXHR() {
? ? ? ? //判断浏览器是否支持ActiveX控件，针对IE6及之前版本
? ? ? ? if (window.ActiveXObject) {
? ? ? ? ? ? //将所有可能出现的ActiveXObject版本都放在一个数组中
? ? ? ? ? ? var arrXHR = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
? ? ? ? ? ? //通过循环创建XMLHttpRequest对象
? ? ? ? ? ? var temp = arrXHR.length;
? ? ? ? ? ? for (var i=0;i<temp;i++) {
? ? ? ? ? ? ? ? try {
? ? ? ? ? ? ? ? ? ? //创建XMLHttpRequest对象
? ? ? ? ? ? ? ? ? ? xhr = new ActiveXObject(arrXHR[i]);
? ? ? ? ? ? ? ? ? ? //如果创建XMLHttpRequest对象成功，则跳出循环
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? catch(ex) {
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，Firefox，Opera等浏览器
? ? ? ? else if(window.XMLHttpRequest) {
? ? ? ? ? ? xhr = new XMLHttpRequest();
? ? ? ? }
? ? }
? ? //响应XMLHttpRequest对象状态变化的函数
? ? function httpStateChange() {
? ? ? ? if (xhr.readyState==4) {//异步调用完毕
? ? ? ? ? ? if (xhr.status==200 || xhr.status==0) {//异步调用成功，在本机上调试
? ? ? ? ? ? ? ? //获得服务器返回的数据
? ? ? ? ? ? ? ? var Names = xhr.responseText;

//把获取到的一个字符串分割成字符串数组。
? ? ? ? ? ? ? ? var arrName = Names.split(";");
? ? ? ? ? ? ? ? //定义一个变量，用于判断用户名是否已经存在
? ? ? ? ? ? ? ? var Flag = false;
? ? ? ? ? ? ? ? for(i=0;i<arrName.length;i++) {
? ? ? ? ? ? ? ? ? ? if (arrName[i]== Form.Name.value) {
? ? ? ? ? ? ? ? ? ? ? ? Flag = true;//用户名存在
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //合法性验证提醒
? ? ? ? ? ? ? ? var OWarn = document.getElementById("Warn");
? ? ? ? ? ? ? ? if (Flag) {
? ? ? ? ? ? ? ? ? ? OWarn.innerHTML = "您输入的用户名已存在，请重新输入！";
? ? ? ? ? ? ? ? ? ? Form.Btn.disabled = true;//提交按钮不可用
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else {
? ? ? ? ? ? ? ? ? ? OWarn.innerHTML = "合法用户名";
? ? ? ? ? ? ? ? ? ? Form.Btn.disabled = false;//提交按钮可用
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? //校验用户名是否有效
? ? function check() {
? ? ? ? //创建XMLHttpRequest对象，调用前面定义好的函数
? ? ? ? CreatXHR();
? ? ? ? if (xhr!=null) {
? ? ? ? ? ? //创建响应XMLHttpRequest对象状态变化的函数
? ? ? ? ? ? xhr.onreadystatechange = httpStateChange;
? ? ? ? ? ? //创建http请求
? ? ? ? ? ? xhr.open("get","Readme.txt", true);
? ? ? ? ? ? //发送http请求
? ? ? ? ? ? xhr.send(null);
? ? ? ? }
? ? ? ? else {
? ? ? ? ? ? alert("浏览器不支持XMLHTTP");
? ? ? ? }
? ? }
</script>
</head>
<body>
<div class="abc" style="margin-top: 60px;margin-left:90px;">
? ? <h3>ajax异步访问局部刷新</h3>
? ? <form name="Form">
? ? ? ? 用户名: <input type="text" name="Name" οnblur="check()">
? ? ? ? <br>
? ? ? ? 密　码: <input type="text" name="Password"><br>
? ? ? ? <input type="submit" value=" 提交" name="Btn" >
? ? </form>
</div>
</body>

</html>