Ajax 是什么？
Ajax不允许直接跨域访问（需要注解CrossOrigin支持跨域访问）
Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。
Ajax 技术应用场景？
Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体验,这种技术现在在很多项目中都有很好的应用,例如:
- 商品系统。
- 评价系统。
- 地图系统。
- …..
AJAX可以仅向服务器发送并取回必要的数据，并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少，服务器响应的速度就更快了。但Ajax技术也有劣势，最大劣势是不能直接进行跨域访问。
Ajax 请求响应过程分析
所有的Ajax 请求都会基于DOM(HTML元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通讯局部更新，如图-4所示：
图-4
基于图-4的分析,Ajax应用的编程步骤如下:
第一步：基于dom事件创建XHR对象(XMLHttpRequest对象)
第二步：注册XHR对象状态监听，通过回调函数(callback)处理状态信息。
第三步：创建与服务端的连接
第四步：发送异步请求实现与服务端的通讯
Ajax入门代码简易实现
业务描述,设计如下页面,在页面上点击Get Request按钮时,向服务端发送异步请求获取服务端数据,然后将响应结果更新到页面上.
第一步:服务端代码设计
创建AjaxController类,用于处理客户端请求
package com.cy.ajax.controller;@Controller
@RequestMapping("/")
public class AjaxController {
@RequestMapping("doAjax01UI")
public String doAjax01UI() {
return "ajax-01";
}
//处理ajax请求的服务端设计
@RequestMapping("doAjaxGet")
@ResponseBody //将方法返回值以字符串形式进行输出
public String doAjaxGet() throws Exception{
System.out.println("==doGet()==");
//Thread.sleep(3000);
//模拟耗时操作 return "Ajax Get request result";
}
}第二步:客户端代码设计
客户端页面关键dom元素设计:
客户端页面中关键Ajax代码设计与实现
//Ajax方式的请求
function doAjaxGet(){
//错误调试:debugger,console.log(),排除法
//1.创建XHR对象 var xhr=new XMLHttpRequest();
//2.设置状态监听(将服务端响应的结果更新到ajaxResultId位置)
xhr.onreadystatechange=function(){ //console.log(xhr.readState);
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText);
document.getElementById("ajaxResultId").innerHTML=xhr.responseText;
}
};
//3.建立连接
xhr.open("GET","http://localhost/doGet",true);
//true表示异步(底层会启动线程与服务端通讯)
//4.发送请求 xhr.send();
}Ajax 基本业务实现
基本业务描述
构建ajax-02页面,首先,在文本框中注册焦点事件,基于焦点事件判断输入内容是否存在.其次点击save按钮时,将用户内容异步提交到服务器端.
服务端关键代码实现
在服务端AjaxConotroller中添加如下代码,处理客户端请求:
private List names=new ArrayList();
//假设这是存储数据的表
@RequestMapping("doAjax02UI")
public String doAjax02UI() {
return "ajax-02";
}
/**通过此方法校验名字是否存在*/
@RequestMapping("doCheck")
@ResponseBody
public String doCheck(String name) {
if(names.contains(name))
return "名字"+name+"已经存在,请选择其它名字";
return "名字"+name+"不存在,可以注册";
}
/**将客户端请求数据写入到names对应的集合*/
@RequestMapping("doSave")
@ResponseBody
public String doSave(String name) {
System.out.println("name="+name);
names.add(name);
return "save ok";
} 客户端关键代码实现
构建ajax-02页面,然后添加关键元素.
第一步:html关键表单元素设计
The Ajax 02 Page
第二步:添加JS关键业务代码
客户端关键代码实现
构建ajax-02页面,然后添加关键元素.
第一步:html关键表单元素设计
The Ajax 02 Page
第二步:添加JS关键业务代码