ajax,json基础知识

1.js ajax:

	ajax :Asynchronous JavaScript and xml.
	ajax可以使网页实现异步更新(不重新加载网页,局部更新).
	异步是一种新的思想,整合之前的多种技术,用于创建快速
	交互式网页应用的开发技术.
	
	在原生的js中就包含ajax但是用起来比较麻烦
	原生ajax使用步骤:
	1.创建ajax 核心引擎对象
		//不同的浏览器需要使用不同的方法创建
	 var xmlhttp=null;
        if (window.XMLHttpRequest) {// code for Firefox, Opera, IE7, etc.
            xmlhttp=new XMLHttpRequest();
        } else if (window.ActiveXObject) {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
	2.告知对象 让你去请求服务器,请求数据拿到以后做啥
	  xmlhttp.onreadystatechange=function () {
            //请求状态4 代表请求完成 200 代表成功
            if(xmlhttp.readyState==4&&xmlhttp.status==200){
                if ("json"==type){
                    var jsonobj=eval("("+xmlhttp.responseText+")");
                    fn(jsonobj);
                }else (
                    fn(xmlhttp.responseText)
                )
	3.告知对象 请求地址 和请求方式
        xmlhttp.open("get",url+"?"+params);
    4.发送
        xmlhttp.send();		

	jquery中也封装了ajax 使用jquery比较方便
	jquer中有三种方法发送ajax请求
		//使用$.get发送请求 (url地址,参数,回调函数(形参),type(数据类型默认字符串可以使用json))
		1.$.get(url,parmars,function(data),type)
		//使用$.post发送请求和get使用方式一样 (url地址,参数,回调函数(形参),type(可以不写))
		2.$.post(url,parmars,function(data),type)
		//使用$.ajax 发送请求 提供了更多的参数,推荐使用
		3.实例
			  $.ajax({
            //地址
           url:"/hello",
            //参数
           data:"username=xiaoming",
            //请求方式
           type:"get",
            //如果成功的回调函数
           success:function (data) {
               $("#msg").html(data);
           } ,
            //如果报错的函数方法
            error:function () {
                alert("服务器报错了")
            }
        });

2.json数据

	json(JavaScript Object Notation)
	是一种轻量级的数据交互格式 不同的编程语言json数据一致
	1.json格式:
		1.对象形式: (底层用黑魔法函数拼接字符串)
			 var jsonfangbian={
				"username":"小明",
				"id":1,
				"email":"123@123.com"
				};
				alert(jsonfangbian.id);
		2.数组形式:(相当于object类型数组什么都能放)
			 var json2fangbian=[1,"你好",true,'好啊'];
			 alert(json2fangbian[1]);
		3.json可以随意嵌套:(对象中嵌套数组结构)
			 var json3={
				"username":"小明",
				"age":18,
				"hobbies":["吃饭","睡觉","打豆豆"]
			};
			alert(json3.hobbies)
			
		4.(数组中嵌套对象):
			var json4=[
			{
				"username":"小明",
				"age":18,
				"hobbies":["吃饭","睡觉","打豆豆"]
			},
			{
				"username":"小红",
				"age":18,
				"hobbies":["吃饭","睡觉","聊骚"]
			},
			{
				"username":"jack",
				"age":18,
				"hobbies":["吃饭","睡觉","逛街"]
			}
		]
			alert(json4[1].hobbies[2]);
	2.不同的数据类型转json字符串
		1.数组,set,list集合转json
	String s =JSONArray.fromObject(对象名).toString();
		
		2.map和javaBean转json字符串
	String s=JSONObject.fromObject(对象名).toString();
		3.嵌套的数据转json字符串 例如list集合中装javaBean:
	嵌套的格式最外面一层是什么格式就用对应的什么格式去转换

3.今日联想词案例思路:

	前端部分:
	1.页面加载完成
	2.给输入框绑定键盘弹起事件
	3.获取当前输入框的值
	4.进行显示关联词div的初始化 先清空元素 然后隐藏下面的div 这样可以使每次输入前清空元素
	5.判断要不要请求 如果输入框内容为空就不需要提交请求
	6.不为空 发送给后台服务器
	7.判断返回的数据是否为空(回调函数得到数据库返回的数据) 数据长度大于0则不为空\
	8.遍历数据
	9.拼接标签 并且为选择框绑定鼠标移入移出事件,用来改变被选中的元素底色
	10.将拼接好的标签添加到初始化标签后面
	11.将div显示出来
	
	后端部分:
	1.servlet: 获取浏览器传来的数据 传递给service层并调用service层
		返回的数据,处理数据(将返回的list集合转换为json格式)返回给浏览器.
	2.service:调用dao层传递数据库要查询的信息
	3.dao:dao层使用like 模糊查询 limit限制显示个数 返回查询结果