ajax前后端交互示例

一、前后端交互方法

1、Ajax前端示例

1.1 特点

Ajax是一种用于创建快速动态网页的网页开发技术。它可以让网页实现异步数据传输，不需要重新加载整个网页的内容。

Ajax的核心技术是XMLHttpRequest，它可以让网页实现异步数据传输，使得网页可以在不重新加载整个网页的情况下更新部分内容。它使用JavaScript和XML技术，可以在后台与服务器进行通信，而不影响用户当前所看到的网页内容。

Ajax的优点是可以提高用户体验，减少网页的加载时间，提高网页的响应速度，减少网络带宽的使用，改善网页的安全性，并且可以支持多种浏览器。

Ajax的缺点是不支持所有的浏览器，特别是旧版的浏览器，而且需要花费更多的时间来学习和使用Ajax技术。

1.2 ajax同域请求示例

$.ajax({
    url:"getData.do",    //请求的url地址
    dataType:"json",   //返回格式为json
    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
    data:{"id":"value"},    //参数值
    type:"GET",   //请求方式
    beforeSend:function(data){
        //请求前的处理
    },
    success:function(req){
        //请求成功时处理
    },
    complete:function(data){
        //请求完成的处理
    },
    error:function(data){
        //请求出错处理
    }
});

1.3 ajax跨域请求示例

$.ajax({
		type : "get",
		dataType:"jsonp",
		jsonp: "jsoncallback",
		async: false,
		url : "http://ip:8082/setProp.do",
		data:{
			//属性文件里的key
			formData:JSON.stringify(formData)
		},
		success : function(data) {
			alert(data['writeOK']);
		},
		error:function(data){
        //请求出错处理
    	}
	});	

2、后端示例

2.1 controller层处理

@RestController
public class TestAjaxController {
	
	@RequestMapping("/getProp")
    public void getProp(HttpServletRequest request,HttpServletResponse response) {
		try {
			// 跨域请求设置
		    response.setHeader("Access-Control-Allow-Origin", "*");
		    String callBackName = request.getParameter("jsoncallback");
		    request.setCharacterEncoding("utf-8");
		    response.setCharacterEncoding("utf-8");
		    //操作业务代码
		    
			//System.out.println("发送前端的数据："+result);
			String resultStr = callBackName + "(" + result.toString() + ")";
			response.getWriter().write(resultStr);
		} catch (IOException e) {
			e.printStackTrace();
		}
    }