AJAX与JSON简述

一、概述 

        在前后端分离的项目开发中，AJAX与JSON是重要的前后端交互技术。

二、AJAX        

        AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。（局部刷新网页的技术）。例如在开发中使用手机号注册时，在输入框中对手机号进行输入时，自动与后台交互，对手机号是否已存在进行校验，已达到更加友好的交互效果体验。

        在开发中，往往使用jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。常用编写格式

<script type="text/javascript">
		$(function(){
			$("#saveBtn").click(function(){
				//校验输入的信息是否合法
				var result = $("#form").form("validate");
				//通过ajax进行数据的提交
				if(result){
					$.post(
							"savePerm.do",
							$("#form").serialize(),//提交的表单数据
							function(data){  
								alert(data.msg);
								if(data.success){
									//关掉当前弹出窗口，刷新父页面
									parent.closeTopWindow();
								}
								return;
							},
							"json"
					);
				}
			});
		})

	</script>

$("#assignBtn").click(function(){
		//获取到当前页面分配的角色的选项
		var rows = $("#bg").datagrid("getChecked");
		if(rows.length <= 0){
			$.messager.alert("警告","必须选中一个角色！");
			return;
		}
		var array = new Array();
		//把rows中的数据遍历放到数组中
		$.each(rows,function(index,obj){
			array.push(obj.role_id);
		})
		var ids = array.join(",");
		var user_id = $("#user_id").val();
		//提交到后台数据库
		$.get(
				"save_assignRole.do",
				{"user_id": user_id,"ids":ids},//需要专递的参数
				function(data){
					//判断用户是否已经有了角色，如果有，就将对应角色在表格中选中
					if(data && data.success){
						alert(data.msg);
						parent.closeTopWindow();
					}
				},"json"
		);

	});

二、JSON

        JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

与 XML 相同之处

• JSON 是纯文本
• JSON 具有"自我描述性"（人类可读）
• JSON 具有层级结构（值中存在值）
• JSON 可通过 JavaScript 进行解析
• JSON 数据可使用 AJAX 进行传输

与 XML 不同之处

• 没有结束标签
• 更短
• 读写的速度更快
• 能够使用内建的 JavaScript eval() 方法进行解析
• 使用数组
• 不使用保留字

往往xml用于配置，JSON用于与前端进行数据交互

JSON格式（在后台Java代码中可以使用JSON对象、JSON数组、集合组合可以构造以下的数据返回给前端）

常用的后台构造JSON数据的代码形式（JSON的掌握主要还是编码练习）

 @RequestMapping("/save_assignRole.do")
    public void save_assignRole(HttpServletRequest request,HttpServletResponse response) throws Exception{
        request.setCharacterEncoding("UTF-8");//编码格式，解决中文乱码
        response.setCharacterEncoding("UTF-8");
        JSONObject json = new JSONObject();//new一个JSON对象，用于够着json格式的数据类型
        String userId = request.getParameter("user_id");//获取前端ajax提交的参数
        String id = request.getParameter("ids");
        String[] ids = id.split(",");
        //进数据库操作
        if(userId != null && !"".equals(userId)){
            //根据userId删除用户角色表中的数据
            userRoleService.deleteByUserId(Integer.parseInt(userId));
            //把新分配的角色保存到数据库表中
            int result = 0;
            if(ids != null && ids.length > 0){
                for(String roleId : ids){
                    UserRole ur = new UserRole();
                    ur.setUser_id(Integer.parseInt(userId));
                    ur.setRole_id(Integer.parseInt(roleId));
                     userRoleService.insertUserRole(ur);
                    result++;
                }
                if(result >= 1){
                    json.put("success",true);
                    json.put("msg", "用户分配角色成功!");
                }else{
                    json.put("success",false);
                    json.put("msg", "用户分配角色失败!");
                }
            }else{
                json.put("success",false);
                json.put("msg", "用户分配角色失败!");
            }
        }else{
            json.put("success",false);
            json.put("msg", "用户Id为空!");
        }

        PrintWriter out = response.getWriter();
        out.print(json.toString());//json格式的数据转成字符串返回给前端
        out.flush();
        out.close();
    }

JSON字符串与js对象之间的转换

JSON.parse(): 将一个 JSON 字符串转换为 JavaScript 对象。

JSON.stringify(): 于将 JavaScript 值转换为 JSON 字符串。

<script type="text/javascript">  	
$.ajax({ 
            type:"get", 
            url:"testjson", 
            dataType:"json",             
            success:function(data){ 
            	/* 
            	JSON 通常用于与服务端交换数据。
             在向服务器发送数据时一般是字符串。
      我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
            	*/
            	var myJSON = JSON.stringify(data);//把后端传递的数据传化成字符串输出
                var mess=JSON.parse(myJSON);//把字符串解析成JSON对象
                 document.getElementById("demo").innerHTML = myJSON;
            } 
         });
</script>