浅谈AJAX入门技术

随风

1 Ajax是什么?

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

2 Ajax技术的应用场景

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

3 Ajax技术时序模型分析

image

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

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();
阅读 610

任重而道远

13 声望
1 粉丝
0 条评论

任重而道远

13 声望
1 粉丝
文章目录
宣传栏