ajax/jsonlib

**ajax的概述**

    1.ajax的概述
        * 异步的js和XML
    
    2.异步和同步
        * 同步：使用表单或者超链接提交数据，采用的都是同步的方式
            * 需要把表单全部提交到Servlet中，页面发生跳转，需要等待服务器端做出现相应，如果服务器端没有做出响应，需要等待，而不能做其他的事情。
        * 异步：使用XMLHttpRequest对象完成异步的操作，和服务器进行数据的交互
            * 不是提交整个页面，而是提交一部分的数据，获取到服务器端响应的数据，做局部刷新。如果服务器也没有响应，进行操作其他的页面内容。
    
    3.异步的应用
        * 百度的输入框
        * 验证用户名是否已经存在    
    
    4.异步的方式：在服务器端可以向客户端响应什么类型的数据呢？    
        * text        -- 字符串（在前台获取到就是字符串）
        * XML        -- XML格式的数据（在前台获取到是Document对象）
        * json        -- 特殊的字符串，有自己格式（获取到是字符串，需要使用eval函数执行一次，执行后返回的json的对象）
        
        * 总结：响应的这些都是比较简单的内容，不是整个HTML的页面    
    

**ajax技术的开发步骤及其入门(固定5步)**

----1.学习ajax掌握XMLHttpRequest对象。

        * 使用异步的技术，需要使用XMLHttpRequest对象。
        * 该对象封装HTTP的协议
            * 也可以采用GET或者POST方式请求服务器
            * 获取服务器端的响应的内容
                * 响应都是字符串或者XML文档

---- 2.ajax技术开发，编写代码的步骤就是固定的。

----3.开发的入门步骤（固定的）     

        * 第一步：需要先获取到XMLHttpRequest对象。

直接获取:  var xhr = new XMLHttpRequest();    -- 支持火狐、谷歌或者IE的高版本的浏览器   

兼容获取:

function createXMLHttpRequest(){
               try {
                   // 如果是你是IE高版本  火狐 谷歌
                   return new XMLHttpRequest();
               } catch (e) {
                   try {
                       // 如果是IE6的版本
                       return new ActiveXObject( "Msxml2.XMLHTTP" );
                   } catch (e) {
                       try {
                           // 如果是IE5.5版本
                           return new ActiveXObject( "Microsoft.XMLHTTP" );
                       } catch (e) {
                           alert( "大哥！您这是什么浏览器呀！！" );
                       }
                   }
               }
}

        * 第二步

            * 如果第一步已经获取到了XMLHttpRequest对象了，下一步，需要连接访问服务器端资源。
            * open("请求方式","请求资源的路径",boolean);
                * 3个方法的含义
                    * 1.代表的请求的方式，常用的有GET或者POST
                    * 2.代表的请求资源的路径，例如：${pageContext.request.contextPath}/xxxservlet
                    * 3.值是bool    ean类型的值，如果是true，说明的异步操作，如果是false，说明是同步操作。一般情况下是true

        * 第三步

            * 发送请求的参数
            * send(请求体的内容);
            * 如果请求方式是POST请求，send方法中正常传递参数了。                                                     xhr.send("username="+haha+"&password="+123)

            * 如果请求方式是GET请求，send方法一般就不传递参数了。
                * 可以使用open方法来传递参数：例如：${pageContext.request.contextPath}/xxxservlet?username=haha
                * 如果GET请求，一般还不传递参数的情况下，send一般传递null    xhr.send(null);

        * 第四步

            * 整体的目的：接收服务器端做出的响应。但是要怎么来接收呢？
            * XMLHttpRequest提供了属性，使用该属性监听XMLHttpRequest对象的状态的改变。该XMLHttpRequest对象由哪些状态
                * 0        -- 刚创建该对象
                * 1        -- 调用open方法，还没有发生请求
                * 2        -- 已经调用了send方法，发送了请求，但是还没有得到响应
                * 3        -- 做出了响应，但是有可能响应没有结束
                * 4        -- 响应结束了
            

            * 代码如下

xhr.onreadystatechange = function (){
     // 做出判断，如果xhr的对象状态已经为4了，说明响应已经结束了
     // 不仅会判断状态是否为4，还会判断状态码是否为200
     if (xhr.readyState == 4 && xhr.status == 200){
     // 在该位置，获取到响应的内容了。

     // 接收响应的代码
     var result = xhr.responseText;
     }
};

        * 第五步

            * 接收响应的内容
                * 如果服务器端响应的是字符串，var result = xhr.responseText;    result就代表的是字符串
                * 如果服务器端响应的XML的内容，var result = xhr.responseXML;    result就代表的是document对象
    

**ajax发送POST请求**

    
    1.向服务器发送的POST请求
        * xhr.open("POST","地址",true)
        * 设置请求的头的信息
            * xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        * xhr.send(参数);
    
    2.编写代码演示POST请求
    
    

**json数据格式的概述**

    
    1.json的概述：js提供一种数据交换的数据的格式。一般的情况下，都是在后台的拼接成json数据，响应的前台。使用js代码就非常方便操作json。
    2.json数据 格式的规范
        * 定义json数据 格式必须使用{}括起来，对外提供的方式就是对象。
            * var person = {};
  
        * 对象包含属性和值，如果是属性，必须是双引号括起来，不能使用单引号。
            * var person = {"name":"张三","age":18};
    
        * 值是类型
            * null        
            * 数字        
            * 字符串    
            * 数组        使用[]括起来
            * boolean     true或者false
    
    3.定义json的格式
        * var person = {"name":"zhangsan","age":18};
        * 包含属性和属性值之间使用 冒号（：）
        * 属性与属性之间是 逗号（,）
        * 获取属性的值 person.name 或者 person.age
    
    4.完成前后台的交互
        * 从后台发送json数据格式的数据。在前台使用js解析数据。
    
    5. 从后台响应的json格式的数据，到前台使用eval函数执行一次。
        * 使用eval函数 全局函数，可以执行js的代码 并且执行的时候拼接小括号
        * 例如： var msg = eval("("+text+")");
        * 必须要使用eval的函数，执行后的结果才是json对象。
    
     **jsonlib工具类的使用**
    1.作用：后台提供的工具类，可以把JavaBean转换成json数据格式。

    2.导入jar包。
        
    3.记住这两个类

         * 都有一个toString()方法，把JSONObject转换字符串的json的数据格式
        * JSONObject---------------------->(用于处理javabean和Map集合)
            * 把该类当成Map集合来记。
            * 提供的一些方法

                * put(key,value)    

                * 静态方法：fromObject(JavaBean)传入进去，返回的JSONObject类

        
         * JSONArray------------------------>(用于处理list和Array数组类数据)
            * 把该类当成List集合来记。

            * add(JavaBean)     -- 返回的类似数组的json格式。

            * toString()        -- 把JSONArray转发字符串json数据格式

注意:如果传入的对象有引用其他对象,可能会引起死循环

解决办法:传入参数的时候,传入一个JsonConfig对象进去,这个对象扩滤掉相关的对象

//=======================解决内置死循环=============================
    JsonConfig jsonConfig = new JsonConfig();
    //设置不去查询的对象
    jsonConfig.setExcludes( new String [] { "crmDepartment" , "crmStaffs" });
    //===================================================================
    String jsonString = JSONArray.fromObject(AllpostByDepId,jsonConfig).toString();
    //解决中文乱码问题
    ServletActionContext.getResponse().setContentType( "text/html;charset=UTF-8" );

    ServletActionContext.getResponse().getWriter().write(jsonString);

      4.总结
        * jsonlib工具类目的，在服务器端把对象转换成json格式的字符串。
        * 提供了两个类
            * JSONObject
                * put(key,value)
                * 静态方法，fromObject(Object)
                * toString()                        
            
            * JSONArray
                * add()
                * toString()
    

    **案例代码:AJAX+JSON**

    1.具体代码如下

    AJAX:

//1.获取连接对象(固定)
    function createXMLHttpRequest(){
          try {
              // 如果是你是IE高版本  火狐 谷歌
              return new XMLHttpRequest();
          } catch (e) {
              try {
                  // 如果是IE6的版本
                  return new ActiveXObject( "Msxml2.XMLHTTP" );
              } catch (e) {
                  try {
                      // 如果是IE5.5版本
                      return new ActiveXObject( "Microsoft.XMLHTTP" );
                  } catch (e) {
                      alert( "大哥！您这是什么浏览器呀！！" );
                  }
              }
          }
      }

    function changePost(aa){
        var depid = aa.value;
        //获取对象
        var res =createXMLHttpRequest();
        //连接服务器访问资源
        res.open( "post" , "${pageContext.request.contextPath}/CrmPostAction_findAllpostByDepId.action" , true );
        // 设置请求头
        res.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );
        //发送连接参数
        res.send( "crmDepartment.depId=" +depid);
        //接受服务器返回的状态码
        res.onreadystatechange = function (){
             // 做出判断，如果xhr的对象状态已经为4了，说明响应已经结束了
             // 不仅会判断状态是否为4，还会判断状态码是否为200
             if (res.readyState == 4 && res.status == 200){
                 var  postSelect =  document.getElementById( "postSelectId" );
                 // 在该位置，获取到响应的内容了。
                 // 接收响应的代码
                 var result = res.responseText;
                 //手动处理json数据
                 var jsonData = eval( "(" +result+ ")" );
                // javascript 遍历json并添加数据
                for ( var i = 0 ; i < jsonData.length ; i ++){
                    var postObj = jsonData[i];
                    postSelect.innerHTML += "<option value='" +postObj.postId+ "'>" +postObj.postName+ "</option>" ;
                }
             }
        };
    }

Web层代码:

function searchName() {
            var c = document.getElementById( "content" );
            c.innerHTML = "" ;

            var xhr = createXMLHttpRequest();
            var productName = document.getElementById( "name" ).value;
            // 判断，如果
            if (productName == null || productName == "" ){
                return ;
            }

            xhr.open( "GET" , "${ pageContext.request.contextPath }/searchName?productName=" +productName);
            xhr.send( null );
            xhr.onreadystatechange = function (){
                if (xhr.readyState == 4 && xhr.status == 200){
                    // 接收值
                    var name = xhr.responseText;
                    var names = name.split( "," );
                    for ( var i=0;i<names.length;i++){
                        var n = names[i];
                        c.innerHTML += "<div onmouseover='overColor(this)' onmouseout='outColor(this)' onclick='setValue(this.innerHTML)' >" +n+ "</div>" ;
                    }
                    // 显示
                    c.style.display = "block" ;
                }
            };
        };

        function overColor(div){
            div.style.backgroundColor = "red" ;
        }

        function outColor(div){
            div.style.backgroundColor = "white" ;
        }

        function setValue(val){
            document.getElementById( "name" ).value = val;
            var c = document.getElementById( "content" );
            c.style.display = "none" ;
        }

来自为知笔记(Wiz)