十分钟了解ajax

ajax其实是实现异步刷新，他的用处是在不重新载入页面的情况下，与与服务器交换数据并更新网页。
看下面的例子,不着急看懂，后面我会详细解释

输入账号
  

第一步：ajax请求的示意图如下，大概了解是怎么走的：

第二步：创建XMLHttpRequest（XHR）
XHR是一个javascript对象，他是在幕后通过一个小线程与服务器进行数据交互的，从而实现无刷新效果。

结果：

[object XMLHttpRequest]

第三步：设置响应函数
XHR对象的作用是和服务器进行交互，所以不仅发送消息给服务器，也接受服务器返回的响应。当从服务器返回响应时我们想做点什么该怎么办？
通过xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。

第四步：设置并发出请求
通过open函数设置幕后的小线程，将要访问的url。在本例中就是 /study/checkName.jsp

xmlhttp.open('GET',url,true);//规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）

通过send函数进行实际的访问

xmlhttp.send(null);//send(string),将请求发送到服务器。

第五步：处理响应信息
在checkResult 函数中处理响应

function checkResult(){
  if(xmlhttp.readyStats==4 && xmlhttp.status ==200)
   document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
}

xmlhttp.readyState 4 表示请求已完成
xmlhttp.status 200 表示响应成功
xmlhttp.responseText; 用于获取服务端传回来的文本
document.getElementById('checkResult').innerHTML 设置span的内容为服务端传递回来的文本

再返回来看第一段代码，是不是就理解了呢