浅谈AJAX入门技术

1 Ajax是什么？

Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。（异步请求，局部刷新）

2 Ajax技术的应用场景

Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体验,这种技术现在在很多项目中都有很好的应用：
例如：商品系统，评价系统，地图系统....

3 Ajax技术时序模型分析

客户端可以向服务器端发送异步请求，客户端无需等待服务端的响应结果，可以 不断向服务器端发送请求。

4 Ajax请求响应过程分析

4.1 服务端代码设计

@Controller
@RequestMapping("/")
public class AjaxController {
        
        @RequestMapping("doAjaxGet")
        @ResponseBody //告诉spring mvc 此方法的返回值不是viewname,可以将其看成是普通串
        public String doAjaxGet() throws Exception {
            return "Ajax Get Request Result ";
        }
}

4.2 客户端代码设计
第一步：基于dom事件创建XHR对象(XMLHttpRequest对象)

    var xhr = new XMLHttpRequest();

第二步：注册XHR对象状态监听，通过回调函数处理状态信息

    xhr.onreadystatechange=function(){
      if(xhr.readyState==4&&xhr.status==200){
    //readyState==4 表示服务器端的响应结果在客户端已经接收完了
    
    //status==200 表示服务处理请求的过程中没有出现任何异常 （响应的都是正常数据）                 document.getElementById("resultId").innerHTML=xhr.responseText;
   }
};

第三步：创建 与服务端的连接

xhr.open("GET","http://localhost/doAjaxGet",true);

第四步：发送请求

xhr.send();