Ajax

Ajax

1.ajax(asynchronousjavascript and xml)

       (1)ajax是什么?

              ajax是一种用来改善用户体验的技术,其实质是

       利用浏览器提供的一个特殊对象(XMLHttpRequest

       对象)异步地向服务器发送请求,服务器一般只需要

       返回部分数据(文本或者xml文档)，浏览器利用这些

       数据更新当前页面。整个过程，页面刷新，不打断

       用户的操作。

              注：

                     异步：ajax对象向服务器发送请求时，

                     浏览器不会销毁当前页面，用户仍然可

                     以对当前页面做其它操作。

       (2)ajax对象如何获得

                     function getXhr(){

                            var xhr = null;

                            if(window.XMLHttpRequest){

                                   //非ie浏览器

                                   xhr = newXMLHttpRequest();

                            }else{

                                   xhr = newActiveXObject(

                                   'Microsoft.XMLHttp');

                            }

                            return xhr;

                     }

       (3)ajax对象的几个重要的属性

              1)onreadystatechange:用来绑订一个事件处理

              函数(该函数用来处理readystatechange事件)。

                     注：当ajax对象的readyState属性发生了改变，

                     比如，从0变成了1,就会产生readystatechange

                     事件。

              2)readyState：有5个值，分别是0,1,2,3,4，表示

               ajax对象与服务器之间通信的状态。比如值为4时，

               表示ajax对象已经获得了服务器返回的所有的数据。

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

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

              5)status:获得服务器返回的状态码。

       (4)编程步骤

              step1,获得ajax对象。

                     比如

                            var xhr = getXhr();

              step2,使用ajax对象发送请求。

                     1)get请求

                            xhr.open('get',

                                   'check_uname.do?uname=Tom',true);

                                        请求地址 

                            xhr.onreadystatechange=f1;

                            xhr.send(null);          

                            注：

                                   true:发送异步请求(浏览器不会销毁

                                   当前页面，用户仍然可以对当前页面做其它

                                   操作)。

                                   false:发送同步请求(浏览器不会销毁

                                   当前页面,浏览器会锁定当前页面，用户

                                   不能够对当前页面做其它操作)。

              step3,编写服务器端的程序，一般不需要返回

                            完整的页面，只需要返回部分数据。

              step4,编写事件处理函数f1

                            function f1(){

                                   //必须等到ajax对象获得了服务器返回的

                                   //所有数据。

                                   if(xhr.readyState== 4){

                                          vartxt = xhr.responseText;

                                          //使用txt更新当前页面。

                                   }

                            }

 

 

1.编码问题

       (1)发送get请求

              1)乱码问题产生的原因：

              ie浏览器提供的ajax对象在发送get请求时，会

       对中文使用gbk编码，而其它浏览器使用utf-8编码。

              服务器端，默认情况下，会使用iso-8859-1去解码。

              2)如何解决

                     step1,让服务器使用utf-8来解码。

                     修改tomcat的配置文件(conf/server.xml)

                            <ConnectorURIEncoding="utf-8">

                            注：只针对get请求有效。

                     step2,使用encodeURI函数对请求地址进行处理。

                     注：encodeURI是js内置的函数，直接使用即可。

                     该函数会对中文参数使用utf-8来编码。

       (2)发送post请求

              1)乱码问题产生的原因

                     浏览器提供的ajax对象对中文参数都会使用

                     utf-8来编码。

                     服务器端默认使用iso-8859-1来解码。

              2)解决方式

                     request.setCharacterEncoding("utf-8");

2,发送post请求

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

       xhr.setRequestHeader('content-type',

       'application/x-www-form-urlencoded');

       xhr.onreadystatechange=f1;

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

       注：

              按照http协议要求，发送post请求时，必须提供

       "content-type"消息头。而ajax对象默认情况下生成

       的请求数据包里面，没有提供该消息头，需要调用

       setRequestHeader方法来添加。

      

3.json (javascriptobject natation js对象声明)

       (1)什么是json?

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

              1)数据交换:

                     将数据转换成一种与平台无关的数据格式(

                     比如xml或者json)然后发送给接收方来处理。

              2)轻量级:

                     跟xml相比，json文档更小，解析速度更快。

                     xml格式

                            <stock>

                                   <code>600015</code>

                                   <name>山东高速</name>

                                   <price>20</price>

                            </stock>

                     json格式

                     {"code":"600015",

                     "name":"山东高速","price":20}

       (2)json语法 (www.json.org)

              1)表示一个对象

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

                     注：

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

                            b,属性值可以是string,number,true/false,

                            null,object。

                            c,属性值如果是string,必须使用双引号括起来。

              2)表示一个对象组成的数组

                     [{},{},{}...]     

       (3)使用json做数据交换

              1)java对象或者java对象组成的数组/集合转换成

              json字符串。                      ----->服务器端

                     可以使用json官方提供的api来实现。

                     JSONObject  JSONArray

              2)json字符串转换成js对象           ----->客户端

                     可以使用json官方提供的api (json.js)

                     也可以使用一些js框架(prototype.js)。

              注: prototype是一个曾经很流行的js函数库(js框架),

       提供了一些常用的函数:

                     evalJSON(): 把json字符串转换成js对象或者

                                          js对象组成的数组。

                     $(id): 依据id值查找节点(dom对象)。

                     $(id1,id2,id3...): 依据id1,id2,id3...分别查找

                                                        对应的节点，然后放到一个数组里

                                                        面返回。

                     $F(id): 依据id值查找节点，返回value属性值。

                     strip(): 除掉字符串两端的空格。