Ajax

1.什么是ajax?   (asynchronous javascript and xml)
    是一种用来改善用户体验的技术,其实质是利用浏览器提供的一个特殊对象(XMLHttpRequest)异步地向服务器发送请求,
    服务器返回部分数据,浏览器利用这些数据对当前页面做局部更新,整个过程,页面无刷新,不打断用户的操作。
    注:
        异步: 当ajax对象(XMLHttpRequest)向服务器发送请求的时候,浏览器不会销毁当前页面,用户仍然可以对当前页面做其它操作
使用BS结构时:

old-web

使用AJAX工作原理:

ajax-web

2.ajax对象
    (1)如何获得该对象?
         function getXhr(){
              var xhr = null;
              if(window.XMLHttpRequest){
                  xhr = new XMLHttpRequest();
              }else{
                  xhr = new ActiveXObject('microsoft.XMLHttp');
              }
              return xhr;
          }
    (2)几个重要属性
        1)onreadystatechange:绑订事件处理函数,用来处理readystatechange事件。
            注:
                当ajax对象的readystate属性值发生了改变,比如从0变成了1,就会产生该事件。
        2)readyState:有五个值,分别是0,1,2,3,4,表示ajax对象通信的状态,其中,4表示ajax对象已经获得了服务器返回的所有的数据。
        3)responseText:获得服务器返回文本数据。
        4)responseXML:获得服务器返回的xml文档。
        5)status:获得状态码。     
3.编程步骤
    step1,获得ajax对象
    比如: var xhr = getXhr();
    step2,发送请求
      1)get请求
        xhr.open('get','check_uname.do?username=Tom',true);
        xhr.onreadystatechange=f1;   
        xhr.send(null);
       注
           true:异步地(当ajax对象(XMLHttpRequest)向服务器发送请求的时候,浏览器不会销毁当前页面,用户仍然可以对当前页面做其它操作)。
           false:同步地(当ajax对象(XMLHttpRequest)向服务器发送请求的时候,浏览器不会销毁当前页面,浏览器会锁定当前页面,用户不
                   能够对当前页面做其它操作)。   

       2)post请求       
            xhr.open('post','check_uname.do',true);
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            xhr.onreadystatechange=f1;
            xhr.send('username=Tom');
            注:
                ajax对象在发送post请求时,默认不会添加"content-type"消息头,所以,需要调用setRequestHeader方法来手动添加。

    step3,编写服务器端的处理程序。一般来说,服务器端不需要返回完整的页面,只需要返回部分的数据。
    step4,事件处理函数   
            function f1(){
                //获得服务器返回的部分数据
                if(xhr.readyState == 4 && xhr.status == 200){
                    var txt = xhr.responseText;
                    //更新页面
                    ...
                }
            }

4.缓存问题
    (1)什么是缓存问题?
        ie浏览器在发送get请求时,会比较请求地址是否访问过,如果访问过,则不再发送新的请求,而是显示之前的访问的结果。
    (2)解决方式
        在请求地址后面添加上一个随机数。

       xhr.open('get','shownumber.do?'+Math.random(),true);

5.编码问题
   (1)get请求
        1)为什么会产生乱码?
         对于中文参数值,ie浏览器会使用"gbk"来编码,其它浏览器会使用"utf-8"来编码。服务器端默认会使用"iso-8859-1"来解码。
        2)如何解决?
            step1,服务器端统一使用"utf-8"来解码。
                修改tomcat的server.xml文件<Connector URIEncoding="utf-8"/>
                注:只针对get请求有效。
            step2,使用encodeURI函数对请求参数进行编码。
                注:encodeURI是一个内置的函数,会使用utf-8来编码。 

                var uri = 'check.do?username='+$F('username');
                xhr.open('get',encodeURI(uri),true);

      
   (2)post请求
        1)为什么会产生乱码?
            浏览器会使用"utf-8"来编码。而服务器默认使用"iso-8859-1"来解码。
        2)如何解决?
            request.setCharacterEncoding("utf-8");

6.json(javascript object notation)
        www.json.org
    (1)json是什么?
       轻量级的数据交换格式
       1)数据交换
           将要交换的数据转换成一种与平台无关的数据格式(比如xml),然后交给接收方来处理。
       2)轻量级
           相对于xml,json文档要更小,解析速度要更快。
     (2)基本语法
          1)表示一个对象
              {属性名:属性值,属性名:属性值...}

              var obj = {"name":"明楼","age":33};
              注:
                  a.属性名必须使用双引号括起来。
                  b.属性值可以是string,number,true/false,null,object。
                  c.属性值如果是string,必须使用双引号括起来。
          2)表示由多个对象组成的数组
              [{},{},{}....]   

              var arr = [{"name":"明楼","age":23},{"name":"明台","age":33}];
    (3)如何使用json?
        1)将java对象(或者java对象组成的数组或者集合)转换成json字符串的形式。
            使用json提供的jar包JSONObject,JSONArray

            java对象:

    JSONObject obj =  JSONObject.fromObject(s);

     String jsonStr = obj.toString();

    java对象组成的数组或集合:

     JSONArray obj = JSONArray.fromObject(stocks);

     String jsonStr = obj.toString();

   2)将json字符串转换成javascript对象(或者javascript对象组成的数组)。

            prototype.js提供的evalJSON()函数。
            $(id): 依据id查找节点。
            $F(id): 依据id查找节点,返回value。
            strip():除掉字符串两端的空格。
            evalJSON():将json字符串转换成javascript对象或者javascript对象组成的数组。

            json字符串转换成javascript对象:

            var str = '{"code":"600015","name":"山东高速","price":10}';

            var obj = str.evalJSON();

            java字符串转换成javascript对象组成的数组:

           var str = '[{"name":"明楼","age":23},{"name":"明台","age":33}]';

            var arr = str.evalJSON();

原文地址:https://www.cnblogs.com/gaochaojin/p/4822678.html