Ajax

Ajax简介

通过AJAX （Asynchronous JAvaScript and XML） 实现异步刷新

用于用户名校验的页面

• 不使用AJAX，传统的方法需要提交数据刷新页面来获取用户名存在与否。

 
输入账号  

• 使用AJAX 通过无刷新验证账号是否存在

输入账号 :
  
 

分布解析

• AJAX请求和相应图示

  
  
  

  1232.png
• 创建 XHR
  创建XHR对象 XMLHttpRequest
  XHR对象是一个javascript对象，它可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据交互
  AJAX就是通过它做到无刷新效果的

• 设置响应函数
  XHR对象的作用是和服务器进行交互，所以既会发消息给服务器，也能接受服务器返回的响应。
  当服务器响应回来的时候，调用怎么处理呢？
  通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。
  注：onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称，当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码。

  
  
  

  966.png

• 设置并发出请求

xmlhttp.open("GET",url,true);   
xmlhttp.send(null);    //通过send函数进行实际的访问

为什么使用 Async=true ？
我们的实例在 open() 的第三个参数中使用了 "true"。
该参数规定请求是否异步处理。
True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。
onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下，防止代码停止的最安全的方法。
通过把该参数设置为 "false"，可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要，那么可以使用这个参数。

• 设置响应信息
  在checkResult 函数中处理响应