Ajax

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

1.什么是Ajax?  (asynchronousjavascript andxml)

    是一种用来改善用户体验的技术,其实质是利用浏览器提供的一个特殊对象(xmlhttpRequest)异步地向服务器发送请求,

    服务器返回部分数据,浏览器利用这些数据对当前页面做局部更新,整个过程,页面无刷新,不打断用户的操作。

    注:

        异步: 当ajax对象(XMLHttPRequest)向服务器发送请求的时候,浏览器不会销毁当前页面,用户仍然可以对当前页面做其它操作。

使用BS结构时:

使用AJAX工作原理:

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(Javascriptobject 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();

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航