JavaWeb 之 20.AJAX基础与案例

## AJAX技术 ##

**Ajax技术的概述**
    
    1.ajax的技术：Asynchronous JavaScript and XML    异步 js and XML
    2.ajax技术可以在客户端与服务器进行数据的交互。
        * 使用的异步进行数据交互
            * 异步：先发送一个请求，但是不用等服务器端做出响应，就可以再发送一次请求。
        * 传统方式同步数据交互
            * 同步：先发送一个请求，用户需要等待，服务器做出响应。再发送一次请求。
        
    3.使用js完成局部的刷新
        * 可以使用ajax技术配合js的技术可以完成的局部刷新。
        
    4.ajax可以和服务器进行数据的交互
        * 传输纯文本        text
        * 传输XML数据        在js端一解析
        * 传输json数据        js端使用的一种js
        
    5.应用的场景
        * 百度搜索。
        * 校验用户是否已经存在。    
        * 省市联动
        
    6.ajax的优缺点
        * 优点
            * 用户体验非常好。
            * 传输的数据比较小的。减轻服务器端压力。
            
        * 缺点：
            * 不能应用所有的场景下。
            * 异步访问服务器端的次数明显增多。对服务器造成了压力。
            * 使用XMLHttpRequest对象（浏览器对它的支持不是很好，浏览器有之间差异）
            * var xhr = new XMLHttpRequest();
            * 浏览器的差异
            

**Ajax开发步骤（固定）**
    
    0.知道XMLHttpRequest对象，异步对象。使用该对象来完成异步发送请求和接收响应的操作。
    1.第一步：先获取XMLHttpRequest对象
        * 大多数浏览器                var xhr = new XMLHttpRequest();
        * IE6浏览器：                  var xhr = new ActiveXObject("Msxml2.XMLHTTP");
        * IE5.5及其一下版本        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        function createXMLHttpRequest(){
            try{
            // 获取大多数（IE高版本、火狐、谷歌）
            return new XMLHttpRequest();
            }catch(e){
                try{
                    // IE6
                    return new ActiveXObject("Msxml2.XMLHTTP");
                }catch(e){
                    try{
                        // IE5.5
                        return new ActiveXObject("Microsoft.XMLHTTP");
                    }catch(e){
                        alert("大哥！您到底用的什么浏览器啊？是您自己开发的吗？");
                        throw e;
                    }
                }
            }
        }
        
    2.第二步：和服务器进行链接
        * xhr.open();
        * open("GET","/day23/xxx",true)方法有一些参数
            * 1）请求的方式（常用的GET和POST）
            * 2）请求资源的路径
            * 3）是否是异步请求还是同步请求，如果值是true，异步的请求。反之。
        
        * xhr.open("GET","/day23/xxx",true);    

    3.第三步：发送请求的数据
        * xhr.send();
        * send()方法的参数：代表请求体的内容。
        * 如果现在GET请求，send(null)，因为火狐浏览器的版本有不同，有可能接收不到你发的请求。    
        * 如果是POST请求，send("username=zhangsan&password=123")

    4.接收服务器端做出的响应
        * 事件onreadystatechange ，监听xhr对象的状态的变化。
        xhr.onreadystatechage = function(){
            // 判断对象的状态为4，状态码为200
            if(xhr.readyState == 4 && xhr.status == 200){
                // 获取响应的内容 做出操作
                
            }
        }
    
        * xhr对象的状态的改变
            * 0    刚创建完xhr的对象
            * 1    刚链接服务器，但是没有发送
            * 2    发送完请求，但是服务器没有做出响应
            * 3    服务器端已经做出响应，但是还没有响应完成
            * 4    服务器的响应已经完成。（使用4状态）
        * xhr.readyState == 4 服务器已经响应完成了。        

        * 状态码（200 404 500 302 304）
            * xhr.status == 200   一切ok

    5.获取响应的数据
        * 先看服务器给你发的什么数据。
        * var text = xhr.responseText;        -- 接收纯文本内容
        * var doc = xhr.responseXML;            -- 接收XML格式的字符串数据。返回是的Document对象。
    

**Ajax基本入门案例**
    
    1.需求：页面上有一个按钮，点击该按钮，发送异步的请求，获取服务器的数据，动态的显示到<h3>标签的中间。
    2.客户端
        * 有个按钮            -- 触发事件 onclick事件
        * 放<h3></h3>    -- 使用innerHTML属性
    3.服务器端
        * 接收请求
        * 做出响应（输出字符串）

**发送数据**
    
    1.GET方式可以发送数据
        * 在GET方式发送数据，在地址栏上拼接数据。
    2.POST正常的发送数据。
        * 需要在open()方法请求方式修改"POST"
        * 需要设置请求的头信息    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        * 发送send()    指定想要发送的数据
        

**验证用户名是否已存在**

    1.需求：判断用户是否已经存在。
    2.分析：
        * 客户端
            * 表单，表单上有输入用户名
        * 服务器
            * 接收数据，获取用户输入的用户名，查询数据库，如果用户已经存在了，给用户提示。
        
    3.创建一个数据库
    create database day23;
    use day23;
    create table t_user(
        id int primary key auto_increment,
        username varchar(20),
        password varchar(20)    
    );
    
    insert into t_user values (null,'aaa','aaa');
    insert into t_user values (null,'bbb','bbb');
    insert into t_user values (null,'eee','eee');
    insert into t_user values (null,'ggg','ggg');
    
    
**响应XML数据**
    
    1.在服务器端编写的也是一个字符串，格式和XML的格式是一样的。String xml = "<stu><name>zhangsan</name></stu>";
    2.客户端
        * 接收数据    var doc = xhr.responseXML;    返回的doc就是Document对象。
        * 做什么操作。
    3.服务器
        * 如果之前响应是字符串（text/html;charset=UTF-8），如果响应的XML类型的字符串（text/xml;charset=UTF-8），

    
**省市联动**
    
    1.需求：在我的页面上，提供两个下拉选择框，一个是显示省份，一个是显示省份下的城市。
        * 显示省份的下拉框，只要是页面一加载完成把所有的省份的信息加载到该下拉框中。
        * 选择不同的省份，根据省份的信息，把该省下所有的城市生成到另一个下拉框中。

    2.分析
        * 提供了页面，包含两个下拉框。提供事件onload事件（页面一加载完，获取所有的省份信息）

        * 编写后台的ProvinceServlet程序，负责解析china.xml的文件，获取到所有的省份的信息，返回到页面上，把信息加载到第一个下拉选择框中。（采用字符串的方式  北京,天津,河北....    ）

        * 选择其中的一个省份，发送一次请求，请求CityServlet，获取该省份下所有的城市，做出响应，获取到该省份所有的城市，添加到另外的一个选择框中。（数据的格式采用    xml ）
        
    3.编写代码
        * 提供china.xml的文件    解析这个文件需要导入dom4j的jar包
            
    4.前台的页面
    
    
**XStream把JavaBean转换成xml（字符串类型）**

    1.作用：把JavaBean转换XML的格式
    2.第三方提供的jar包。导入jar包。
        xstream-1.4.4.jar
        xpp3_min-1.1.4c.jar
    3.演示的作用
        * XStream xs = new Xstream();
        * String xmlStr = xs.toXML(JavaBean);        -- 把JavaBean转换成字符串类型的XML数据
    
**JSON数据交换格式**

    1.用来交互数据，一种交互数据的格式。XML也可以交换数据。
    2.json有自己的数据的格式
        * var person = {}；    person称为一个对象。
        * json对象中有属性名和属性的值。属性名必须使用双引号。不能使用单引号！！！！！。
        * 值是这几种类型
            * null
            * 数值        数字类型
            * 字符串        ""
            * 数组        []来表示
            * boolean类型    true和false

    3.开源的jar包
        * JSON-lib
        * 把JavaBean转换成JSON字符串
        * 导入jar包
            json-lib的核心jar包有：　
                json-lib.jar
            json-lib的依赖jar包有：
                commons-lang.jar
                commons-beanutils.jar
                commons-logging.jar
                commons-collections.jar
                ezmorph.jar

        
    4.JSONObject
        * 就相当于java中的Map
        * put方法，添加键值对，调用toString()方法把JSON格式的字符串
        * JSONObject.fromObject(JavaBean)  -- 把JavaBean对象转换成JSON格式的字符串
            
    5.JSONArray
        * 就相当于java中的List集合
        * add(JavaBean)，把JavaBean转换JSON格式（数组格式 []）