大数据WEB阶段（十一）Ajax、URL编码

Ajax与使用Ajax时产生的乱码问题—URL编码

（一）Ajax

一、Ajax详解

1. 在学习HTTP协议的时候，我们知道，HTTP协议基于请求响应模型，一次请求对应一次响应，请求只能由客户端发出，服务器只能被动的等待请求。
2. 但我们经常见到如下的功能：
   
   1. 网络聊天室里，聊天信息，不需要刷新页面就可以接受最新的聊天消息。
   2. 网站注册时，输入用户名后无需提交立即提示用户名已经存在。
   3. 百度输入搜索条件时，根据输入的不同提示不同的备选查询内容。
3. 在这些应用场景中，我们没有刷新网页，却获取到了服务器发回的最新数据。这不是很明显的违反了HTTP协议了吗？
   
   1. 其实这不是违反了HTTP协议，而是使用了一种“另类”的技术，叫做AJAX（Asynchronous JavaScript and XML）。改变了传统方式的同步刷新方式，改为了异步刷新—即在保持当前页面的情况下，异步发出请求等待响应，再根据得到的响应消息修改当前页面。
4. Ajax并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。
5. XMLHttpRequest对象方法
6. XMLHttpRequest对象属性

7. JS方法实现Ajax：

   //1 创建XMLHttpRequest对象
       function ajaxFunction(){
          var xmlHttp;
          try{ // Firefox, Opera 8.0+, Safari
               xmlHttp=new XMLHttpRequest();
           }
           catch (e){
              try{// Internet Explorer
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                 }
               catch (e){
                 try{
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                 }
                 catch (e){}
                 }
           }
           return xmlHttp;
        }
   
   //2.服务器端向客户端进行响应(注册监听)
       var data = null;
       var xhr = ajaxFunction();
       xhr.onreadystatechange=function(){
               if(xhr.readyState==4){
                   if(xhr.status==200||xhr.status==304){
                       data = xhr.responseText;
                   }
               }
           }
   
   
           readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
               0 代表未初始化。 还没有调用 open 方法
               1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
               2 代表已加载完毕。send 已被调用。请求已经开始
               3 代表交互中。服务器正在发送响应
               4 代表完成。响应发送完毕
   
           xhr.status
               常用状态码及其含义：
               404 没找到页面(not found)
               403 禁止访问(forbidden)
               500 内部服务器出错(internal service error)
               200 一切正常(ok)
               304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
   
           xhr.responseText 服务器发回的响应结果,字符串
           xhr.responseXML 服务器返回的响应结果,XML对象
   
   
   //3 客户端与服务器端建立连接
            * 使用的是XMLHttpRequest对象的open(method, url, asynch)方法
            *  * method：请求类型，类似 “GET”或”POST”的字符串。
            *  * url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
            *  * asynch：表示请求是否要异步传输，默认值为true(异步)。
       xhr.open("GET","../testServlet?timeStamp="+new Date().getTime()+"&c=19",true);
   
   //4 客户端向服务器端发送请求
            * 
            * 使用的是XMLHttpRequest对象的send()方法
            *  * 如果请求类型是GET方式的话，使用send()方法发送请求数据，服务器端接收不到
            *  * 该步骤不能被省略，只能写成xhr.send(null);
            */
   
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   
           ~GET方式：
               xhr.send(null);     //xhr.send(null);
   
   
           ~POST方式：如果请求类型是POST的话，需要设置请求首部信息
               xhr.send("a=7&b=8");
   

8. JQuery方式实现Ajax

   1. JQuery详解：http://blog.youkuaiyun.com/chou_out_man/article/details/78585875

      $.ajax({
          type: "POST",
          url: "some.php",
          data: "name=John&location=Boston",
          success: function(msg){
              alert( "Data Saved: " + msg );
          }
      });
      
      $.get("test.php?name=John&location=Boston", function(data){
          alert("Data Loaded: " + data);
      });
      
      $.post("test.php",{"name":"John","location":"Boston"}, function(data){
          alert("Data Loaded: " + data);
      })
      

（二）使用Ajax时产生的乱码问题—URL编码

一、详解

1. 浏览器与服务器之间是通过Http协议通信的 ， 但是Http协议只支持ISO-8859-1编码 ， 所以理论上来说 ， Http协议只能处理ISO-8859-1码表中具有的字符 ， 不能处理中文
2. URL编码—解决Http协议携带中文的问题
   
   1. 通过URL编码 ， 客户端将非ISO-8859-1编码的字符转换为URL编码格式发送给服务器 ， 服务器收到之后在进行URL解码 ， 就可以得到正确的字符了 。

3. URL编码过程：

   1. 对于ISO-8859-1中有的字符不作处理 ， 原样输出

   2. 对于ISO-8859-1中没 有的字符 ， 先按照制定码表将字符转换为字节

      中    11110000
           11101010
           10101100
      国    11010101
           10110101
           00110001 
      

   3. 再将每个字节转换为16进制表示的方式

      中    11110000 -> f0
           11101010 -> ea
           10101100 -> ac
      国    11010101 -> d5
           10110101 -> b5
           00110001 -> 31
      

   4. 再在每一个之前加上% ，就得到了 URL编码格式

      中    11110000 -> %f0
           11101010 -> %ea
           10101100 -> %ac
      国    11010101 -> %d5
           10110101 -> %b5
           00110001 -> %31
      中国 ->%F0%EA%AC%D5%B5%31
      

4. 一般情况下 ， 浏览器和服务器会自动进行URL编码和解码 ， 并不需要程序员手动进行编解码 。

5. 但是在一些特别的场景下 ， 例如：AJAX发送数据时 ， 浏览器不再自动帮我们编码 ， 需要我们手动进行URL编解码 操作

   java中进行URL编解码：
       URLEncoder.encoder(str , encode);//编码
       URLDecoder.decode(str , encode);//解码
   jq中进行URL编解码：
       $.param(myObject);