一、Ajax概述

1．什么是同步，什么是异步

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态（不能进行其他操作）

异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死（可以进行其他操作）

2．Ajax的运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

二、js原生的Ajax技术

js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：

1. 创建异步对象 var aiaxOb=new XMLHTTPRequest();

2. 设置请求的url等参数 open(请求的方式，请求的url，async默认异步)

3. 发送请求 send()

4. 注册事件 onreadystatechange 状态改变触发响应

5. 在注册的事件中获取返回值并在页面中显示(responseText)

Post请求步骤也如上，只不过要修改open()请求方式

详解：

1.XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1．老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var iable=new ActiveXObject("Microsoft.XMLHTTP");
兼容性写法：
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.XMLHttpRequest 对象用于和服务器交换数据。

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

· method：请求的类型；GET 或 POST

· url：文件在服务器上的位置

· async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

· string：仅用于 POST 请求

3.服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

responseText 属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

4.onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 · 0: 请求未初始化 · 1: 服务器连接已建立 · 2: 请求已接收 · 3: 请求处理中 · 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

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

var iable=new ActiveXObject("Microsoft.XMLHTTP");

兼容性写法：
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");
  }

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" >
    <label for="name">姓名：</label><input type="text" name="username" id="name"><span id="reg"></span>
    <br>
    <label for="email">邮箱：</label><input type="email" name="email" id="email">
    <br>
    <input type="submit" value="提交">
</form>
</body>
<script>
    //document.getElementsByName("name属性所对应的值")
   var user = document.getElementsByName("username")[0];
    user.onblur = function () {
//        alert(this.value);//获取当前的输入值
        var url = './04.php?username=' + this.value;
        var reg = document.getElementById("reg");
        //1.创建ajax对象
        var ajaxobg = new XMLHttpRequest();
        //2.打开请求的方式及路径数据
        ajaxobg.open('get',url,true);
        //3.发送数据  get请求为空,send()发送数据只为post发送请求数据
        ajaxobg.send(null);
        //4.响应事件
        ajaxobg.onreadystatechange = function () {
            //5.通过响应的状态来确定是否响应成功
            if(this.readyState==4 && this.status==200){
                if(this.responseText==0){
                    reg.innerHTML = '<span color="green">可用</span>';
                }else {
                    reg.innerHTML = '<span color="green">已被占用</span>';
                }
            }else {
                alert("响应未成功！")
            }
        }
    }
</script>
</html>

若有不足请多多指教！希望给您带来帮助！

js-ajax(js)