Ajax 笔记（十）

1、ajax是什么?
     asynchronous javascript and xml :异步的 javascript和xml。
     ajax是用来改善用户体验的一种技术，其本质是利用浏览器内置的一个特殊的对象(XMLHttpRequest,一般称之为ajax对象)异步地(当ajax对象向服务器发请求时，浏览器不会销毁当前页面,
               用户仍然可以对当前页面做其它的操作)向服务器发请求。然后，利用服务器返回的部分数据(服务器并不会返回一个新的完整的页面,只返回少量的数据)更新当前页面。
               整个过程页面无刷新，不打断用户的操作。
2、ajax对象

     (1)获得ajax对象?

          因为ajax对象(即XMLHttpRequest对象)没有标准化，要区分浏览器来获得。

          function getXhr(){ 

               var xhr = null;

               if(window.XMLHttpRequest){

                    //非ie浏览器

                    xhr = new XMLHttpRequest();

               }else{

                    xhr = new ActiveXObject('Microsoft.XMLHttp');

               }

               return xhr;

          }

     (2)ajax对象的5个属性

          1) onreadystatechange: 绑订事件处理函数, 该函数用来处理ajax对象产生的readystatechange 事件(当ajax对象的readyState属性发生了改变，比如，从0变成了1,就会产生该事件)。

               比如:    

                    var xhr = getXhr();

                    xhr.onreadystatechange = f1;

          2) responseText: 获得服务器返回的文本。

          3) responseXML: 获得服务器返回的xml文档。

          4) status: 获得状态码。

          5) readyState:  ajax对象的readyState属性有5个值，分别0,1,2,3,4，表示ajax对象与服务器通讯的状态。其中，4表示ajax对象已经获得了服务器返回的所有的数据。
3、编程步骤

     step1,获得ajax对象

          比如:

               var xhr = getXhr();

     step2, 发请求

          方式一: 发送get请求

               xhr.open('get', 'check_username.do?username='+ $F('username'), true);

               xhr.onreadystatechange=f1;

               xhr.send(null);

          注意:

               true: 表示异步，即发送请求时，用户可以对当前页面做其它的操作。

               false:表示同步，即发送请求时，浏览器会锁定当前页面，用户不能做其它的操作。

          方式二:发送post请求    

     step3, 编写服务器端的处理代码。

          一般来说，服务器只需要返回的少量的数据，不需要返回一个完整的页面。

     step4, 编写事件处理函数

               function f1(){

                    //获得服务器返回的数据

                    //更新当前页面

               }     
4、ajax应用中的编码问题

     (1)发送get请求

          ie浏览器内置的ajax对象，会使用gbk编码； 而其它浏览器会使用utf-8编码。

          容器在默认情况下，一般会使用 iso-8859-1去解码，所以，会产生乱码问题。

          如何解决？

               step1, 让容器使用utf-8去解码。比如，可以修改tomcat的配置文件 conf/server.xml,添加 URIEncoding="utf-8"。

          以上配置的作用是，容器对所有的get请求中的参数使用utf-8进行解码。

               step2, 对请求地址使用encodeURI函数来

          进行编码。

     (2)发送post请求

          所有浏览器内置的ajax对象都会使用utf-8编码。而服务器默认情况会使用iso-8859-1去解码，所以会出现乱码问题。

          解决方式:

               request.setCharacterEncoding("utf-8");

             xhr.open('post','check_username.do',true);

             xhr.setRequestHeader('content-type','application/x-www-url-encoded');

             xhr.onreadystatechange=f1;

             xhr.send('username=' + $F('username'));

        注意：因为按照http协议要求，发送post请求，必须 添加一个content-type消息头。ajax对象默认不会添加这个消息头，所以需要调用setRequestHeader方法来添加。

            
5、json (javascript object notation)

          json技术借鉴了javascript语言中对象创建的一种语法(javascript object notation),所以命名为 json。          www.json.org

     (1)json是什么?

          是一种轻量级的数据交换标准。

     a,数据交换:

               就是将数据转换成一种标准的、与平台无关的数据格式(比如xml)发送给接受方。

     b,轻量级:

               json相对于xml而言，所需要的数据更少，并且解析的速度更快。

     (2)语法

          1)表示一个对象

               {属性名称:属性值,属性名称:属性值...}

               注意：

                    a,属性名称必须使用引号括起来。

                    b,属性值可以是string,number,boolean,null,object。

                    c,属性值如果是字符串，必须使用引号括起来。

          2)表示一个对象组成的数组          [{},{},{}...]    

     (3)使用json做数据交换

          (将服务器的java对象或者java对象组成的集合或者数组转换成json字符串发送给浏览器，然后在浏览器端转换成javascript对象)。

          1) java对象 --- > json字符串

               利用json官方提供的api来生成相应的json字符串。

               JSONObject, JSONArray

          2)json字符串 --- > javascript对象         

               可以使用prototype提供的evalJSON函数。

  
   6、ajax编程中的两个问题

             1)缓存问题

                  当使用ie浏览器时，ajax对象会检查请求地址，如果地址没有变化， 不会向服务器发请求。

                  解决方式: 

                       在请求地址后面添加一个随机数

                  比如：

                  xhr.open('get', 'getNumber.do?' + Math.random(),true);         或者，也可以改为post方式发请求。

             2)同步请求(扩展知识)

                  a,什么是同步请求？

                       当ajax对象再向服务器发请求时，浏览器会锁定当前页面，用户不能对当前页面做其它的操作，必须等待服务器的响应发送回来，浏览器才会向下继续执行。

                  b,如何发送同步请求?

                       xhr.open('get/post','...do',false);