ajax与json的学习总结

最近重温了下ajax与json技术，发现又收获了不少，这里记录下，我是一只接触编程8个月的小白，如有错误，还请指出，后面直接上干货。

首先，为什么要学习ajax与ajax的优势？

  以我自己的理解，其实ajax就是方便数据从前端传递到后端。在java中，主要有两种。第一种就是通过html的form表单，通过submit直接传输到后端，但是这个提交有一个坏处，就是服务器端（servlet端）返回数据的话只能是重新跳转一个页面(requet.getRequest.Dispatcher(url)。forward(request,response)或重定向response.sendRedirect(url))来进行处理，这样会很不方便，如果涉及要用户登录验证什么的话岂不是要重新跳转个页面来判断用户是否输入正确？这里的用户体验就很不好，而ajax则实现了异步请求，完美的解决了这个问题。

前端数据传输到后端的通用特点：

eg:

 $.ajax({

   type:"post",//请求方式

   data:json，//传输的参数，json格式的数据

   success:function(data){//服务器返回的数据

   }

 });

这就是jquery的ajax请求的格式。后面会谈到js的ajax请求，jquery不过是将js的ajax请求封装了下而已，主要是解决了浏览器的兼容问题。

js中的ajax请求：

  直接上最简单的格式，不封装

    var xhr = new XMLHttpRequest();//定义一个XMLHttpRequest对象，这里提一句，ajax与form传输参数都需 要满足http协议，ajax请求的就是一个XMLhttpRequest,传输的是XML的数据，只是XML和json是可以相互转换的。

                   xhr.onchangereadystate = function(){

    };//对返回的数据进行处理，这里包括返回的状态码等 xhr.readyState == 4，表示请求完美通过，还有1,2,3等，例如找不到服务器等错误，服务器关闭等请度娘。

    xhr.send();必须有这一句，表示开始请求了，当然还有满足兼容性等问题，需要用到AxtivexObject对象（ie8以下，ie8以上都是XMLHttpRequest请求），

    不难看出js的请求是多么麻烦，所以建议还是使用jquery的ajax请求方便的多。这里说一句，所谓的请求方式无非是解决数据传输的安全，大小等问题，例如get请求是直接在url栏里可以看到的，而post不能，而且get请求传输的数据太小，post可以传输大的，get一般用于直接页面跳转等，post用于需要传输参数时，并且相对比较安全的。

json数据的解析？

              json是什么？其实就是一种数据传输，java中的map就是一种键值对，js中也经常用到，json的格式就是

             var json = {key:value,key1:value1,key2:value2}就是这样的格式，在js的规范要求中,key是不需要用双引号或单引号的。

       例如传输账号和密码可以定义json：
           var data = {username:uname,password:pwd};
 java后台的数据返回（json）？
       java后台返回数据返回的都是String流，我才开始玩ajax的时候，java返回一个对象的时候后台一直收到的是一个String流
这里就涉及到两点：服务器序列化成json格式,ajax收到的是String流，将其转换成Json对象，
       服务器可以利用一个json的包来序列化对象，而客户端接收到后可以eval一下，这里附上ajax对收到的数据的处理
          $.ajax({
                  type:"post",//请求方式
                  url:"data.jsp",//请求地址
                  data:params,//传输的数据，参数
                  success:function(data){//服务器返回的话（数据）
                   var jdata = data.trim();
                    jdata = eval("("+ jdata +")");
                      
                  }
              });
        data.trim()是去除返回数据的空格，自己尝试可以看到这是一个enter。这样就可以处理该对象了
繁琐的json处理：
     例如一个json：
        var json = {
                    name:uname,
                    address:{北京，成都，绵阳},
                    teacher:{student1:"小明"，student2:"小红",student3:"小可"}

                  }
这个json就比较麻烦，但是如果ajax收到这个json怎样处理呢？利用数组
     var name = json.name//去到uname
     var address = [];
     for(var i; i < json.address.length;i++){
            address[i] = json.address[i];
     }//赋值呗，将address的值取出来
     var student1 = json.teacher.student1;//取到小明

     var student2 = json.teacher.student2;//取到小红

     var student3 = json.teacher.student3;//取到小可
其实无非就是化繁为简。


注：小白一枚，第一次发文章，也是总结了这两天看到的，如有错误还请不吝指出，感激之至。