Ajax和JSON

Ajax

什么是Ajax

  全称 Asynchronous Javascript And XML”（异步 JavaScript 和XML）
  ，是指一种创建交互式网页应用的网页开发技术。

  Ajax技术是一组原有技术的综合运用，涉及技术如下：
          以XMLHttpRequest为核心发送请求和接收响应
          以JavaScript语言为基础使用XMLHttpRequest
          以XML或JSON作为数据交互格式
          以HTML和CSS作为数据展现(渲染)

Ajax异步交互和传统同步交互的区别

  1. 请求的发送和接收
            传统：浏览器直接发送HTTP请求，然后由浏览器直接接收服务器返回结果，直接呈现到浏览器页面上
  
            Ajax：浏览器利用js调用XMLHttpRequest对象发送HTTP请求，
                  然后再利用XMLHttpRequest接收服务器返回结果，然后还需
                  要利用js将结果显示到浏览器页面上

  2. 如何区分Ajax请求和传统请求
             请求的Header格式不同，Ajax请求会在请求Header部分多一组参数值
              x-requested-with:XMLHttpRequest

            如果存储该参数就可以认为是ajax;不存在就可以认为是传统表单或超链接。


  3. 服务器响应结果不同
            传统：服务器一般都会去调用Servlet或JSP生成一个HTML界面给浏览器，然后浏览器显示
            Ajax：服务器一般都会去调用Servlet处理，
                 然后生成一个JSON或者XML字符串结果给XMLHttpRequest。


  4. 页面刷新不同
            传统： 整个页面刷新。
            Ajax：局部刷新。

  5. 同步和异步不同
          传统：同步交互模式
                      请求1--->响应1---->请求2---->响应2

          Ajax：异步交互模式
                      请求1--->请求2--->响应1--->响应2

Ajax作用和优点

1. Ajax技术使用场景
        页面局部刷新处理
        页面不改变，异步请求和响应


2. Ajax技术的优点
        使用户操作更连续，提升用户体验感
        Ajax交互传输数据量较小，提升程序性能
        异步处理，可以进行异步加载和请求处理
        减少整个页面刷新频率

Ajax使用流程

    1. 创建一个XMLHttpRequest对象，发送请求
          属于客户端js编程

    function sendRequest(){
        //1.创建一个XMLHttpRequest对象
        var xhr =null;

        if(window.XMLHttpRequest){
            //支持chrom,IE7 8 9
            xhr =  new XMLHttpRequest();
        }else{//IE 5,6
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //创建一个HTTP请求
        xhr.open("get","hello.do",true);

        //发送ajax请求
        xhr.send(null);
    }

2. 服务器端处理(Servlet/JSP)
         属于服务端Java编程

public class HelloServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) 
    throws ServletException, IOException {

        System.out.println("ajax请求处理");

        //输出一个消息
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        Random random = new Random();
        out.print("Hello World :"+random.nextInt(100));
        out.close();
    }

}

3. 解析服务器返回数据结果，显示到页面
       属于客户端js编程

    //创建一个HTTP请求
    xhr.open("get","hello.do",true);

    //设置回调处理函数
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            var msg = xhr.responseText;//获取服务器返回的字符串信息
            document.getElementById("msg").innerHTML = msg;
            document.getElementById("msg").style.color="red";
        }

    }

    //发送ajax请求
    xhr.send(null);

JSON

JSON概念

JavaScript Object Nitation 是JavaScript对象格式，属于JavaScript语言数据类型。
{"key":value,"key":value}

  key是字符串，value可以是任意类型

  访问value 可以使用变量.key获取。

JSON字符串如何转换为JSON对象

1. 使用JSON.parse(字符串)
var obj_data = JSON.parse(data);

2. 使用eval("("+字符串+")");
 var obj_data = eval("("+data+")");

3. 使用第三方js库，利用json.js 或者jquery.js

如何将Java对象转为JSON字符串

使用gson.jar工具包

Gson gson = new Gson();
String data = gson.toJson(obj);


使用json-lib.jar 工具包

//单个Java对象
    JSONObject json = JSONObject.fromObject(city);
    String string = json.toString();

//Java集合
    JSONArray fromObject = JSONArray.fromObject(list);
    String str = fromObject.toString();