Ajax

AJAX的概述

什么是AJAX
    AJAX:异步的 JavaScript And XML.
    用的是老的技术,用的是新的思想.
AJAX的功能:完成页面的局部刷新,不中断用户的体验.
    早期的时候JS技术根本不受重视.后台开发人员经常将JS当成一种玩具式语言.JS中有一个对象XMLHttpRequest对象可以向服务器异步发送请求.传统的B/S结构的软件,所有实现功能都需要在服务器端编写代码(胖服务器).现在有了AJAX以后,可以将部分代码写到客户端浏览器(RIA:Rich Internet Application).FLEX:AS脚本编程.
    XML:使用XML做为数据传递的格式;JSON,也是一种传输格式。

XMLHttpRequest

属性:
* readyState            :XMLHttpRequest的状态
　　状态         名称     描述
　　0     Uninitialized     初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
　　1     Open             open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
　　2     Sent             Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
　　3     Receiving         所有响应头部都已经接收到。响应体开始接收但未完成。
　　4     Loaded     HTTP     响应已经完全接收。
* onreadystatechange    :当XMLHttpRequest状态改变的时候触发一个函数.
* status                :获得响应的状态码. 200 , 404 ...
* responseText            :获得响应的文本数据.
* responseXML            :获得响应的XML的数据.

方法:
* open(请求方式,请求路径,是否异步)        :异步去向服务器发送请求.
* send(请求参数)                        :发送请求.
* setRequestHeader(头信息,头的值)        :处理POST请求方式的中文问题.

创建XMLHttpRequest对象

IE：将XMLHttpRequest对象封装在一个ActiveXObject组件。
Firefox：直接就可以创建XMLHttpRequest对象。

function createXmlHttp(){
   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;
 }

AJAX的入门

AJAX的编写的步骤
* 第一步：创建一个异步对象.
* 第二步：设置对象状态改变触发一个函数.
* 第三步：设置向后台提交的路径
* 第四步：发送请求.
GET方式提交请求

function ajax_get() {
    // 1.创建异步对象
    var xhr = createXMLHttp();
    // 2.设置状态改变的监听 回调函数.        //3和4这两步放在2之前更好理解
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){ // 请求发送成功
            if(xhr.status == 200){ // 响应也成功
                // 获得响应的数据:
                var data = xhr.responseText;
                // 将数据写入到DIV中:
                document.getElementById("d1").innerHTML = data;
            }
        }
    }
    // 3.设置请求路径
    xhr.open("GET","/day15/ServletDemo1?name=aaa&pass=123",true);
    // 4.发送请求
    xhr.send(null);
}

POST方式提交请求

function ajax_post(){
    // 创建异步对象:
    var xhr = createXMLHttp();
    // 设置监听:
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                document.getElementById("d1").innerHTML = xhr.responseText;
            }
        }
    }
    // 打开路径:
    xhr.open("POST","/day15/ServletDemo1",true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//必须在xhr.open()的后面
    // 发送请求:
    xhr.send("name=张三&pass=123");        //发送了中文参数,要在路径的对象中,进行转码request.setCharacterEncoding("UTF-8");
}

异步校验用户名
【步骤一】：创建表和数据库:
【步骤二】：设计一个注册页面
【步骤三】：在用户名的文本框中使用onblur事件触发一个函数.
【步骤四】：AJAX的异步操作,将文本框的值传入到Servlet中.
【步骤五】：Servlet中根据传入的用户名去数据库进行查询.
【步骤六】：查询到了说明用户名已经被占用,没有查询到说明用户名可以使用.

创建数据库和表:
create database web_15;
use web_15;
create table user(
    id int primary key auto_increment,
    username varchar(20),
    password varchar(20),
    nickname varchar(20),
    type varchar(20)
);
insert into user values (null,'aaa','111','小凤','user');
insert into user values (null,'bbb','111','小森','user');

代码实现:
function checkUsername(){
    // 获得文本框的值:
    var username = document.getElementById("username").value;
    // 创建异步对象:
    var xhr = createXMLHttp();
    // 设置监听:
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                var data = xhr.responseText;
                if(data == 1){
                    document.getElementById("s1").innerHTML = "<font color='green'>用户名可以使用</font>";
                    document.getElementById("regBut").disabled = false;
                }else if(data == 2){
                    document.getElementById("s1").innerHTML = "<font color='red'>用户名已经被占用</font>";
                    document.getElementById("regBut").disabled = true;
                }
            }
        }
    }
    // 打开连接:
    xhr.open("GET","/day15/ServletDemo2?username="+username,true);
    // 发送请求:
    xhr.send(null);
}

【JQuery的AJAX】
JQuery的AJAX部分方法
　　Jq的对象.load(路径,参数,回调函数);
　　$.get(路径,参数,回调函数,数据类型);
　　$.post(路径,参数,回调函数,数据类型);
　　$.ajax();
　　serialize(); -- JQ的AJAX传递参数的时候需要使用的方法.

JQ异步校验用户名
【步骤一】：创建表和数据库:
【步骤二】：设计一个注册页面
【步骤三】：在用户名的文本框中使用onblur事件触发一个函数.
【步骤四】：使用JQ的AJAX完成异步操作,将文本框的值传入到Servlet中.
【步骤五】：Servlet中根据传入的用户名去数据库进行查询.
【步骤六】：查询到了说明用户名已经被占用,没有查询到说明用户名可以使用.

$(function(){
    $("#username").blur(function(){
        // 获得文本框的值:
        var username = $(this).val();
        // 演示load方法:
        // $("#s1").load("/day15/ServletDemo3",{"username":username});
        // 演示get/post方法:
        $.get("/day15/ServletDemo3",{"username":username},function(data){
            if(data == 1){
                $("#s1").html("<font color='green'>用户名可以使用</font>");
                $("#regBut").attr("disabled",false);
            }else if(data == 2){
                $("#s1").html("<font color='red'>用户名已经存在</font>");
                $("#regBut").attr("disabled",true);
            }
        });
    });
});

JQ完成输入框提示
【步骤一：】设计一个商品的搜索页面.
【步骤二：】keyup事件触发一个函数.
【步骤三：】获得文本框的值,提交到Servlet中
【步骤四：】在Servlet中根据提交名称查询相应信息.(显示5个)

create table words(
    id int primary key auto_increment,
    word varchar(20)
);

代码实现:
$(function(){
    // 为文本框绑定事件:
    $("#word").keyup(function(){
        // 获得文本框的值:
        var word = $(this).val();
        // 异步发送请求:
        if(word != ""){
            $.post("/day15/ServletDemo4",{"word":word},function(data){
                $("#d1").show().html(data);
            });
        }else{
            $("#d1").hide();
        }
    });
});

JQ完成省市联动
【AJAX的响应的数据】
文本,一段HTML的数据,XML,JSON
【使用工具生成XML的文件】
通常使用xStream工具. 将集合,数组,对象转成XML.

【步骤一】：使用注册页面中省市的下拉列表.
【步骤二】：当省份发生变化,触发一个事件.
【步骤三】：将选择的省份的信息传入到Servlet中.
【步骤四】：根据省份信息查询市的信息.
【步骤五】：将查询到市的信息转成XML.
【步骤六】：获得XML的指定信息,显示到第二个列表中.

Jsp引入的js把选择的省份id传入,再把结果返回给js中function的data
public class ServletDemo6 extends HttpServlet { 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            //接收数据
            String pid = request.getParameter("pid");
            //调用业务层查询所有的市的信息
            ProvinceService provinceService = new ProvinceService();
            List<City> list = provinceService.findByid(pid);
            //将list生成XML
            XStream xStream = new XStream();
            //修改标签名
            xStream.alias("city", City.class);    //改变list中对象的生成的标签名
            //将类中属性作为标签的属性
            /*xStream.useAttributeFor(City.class, "cid");
            xStream.useAttributeFor(City.class,"cname");
            xStream.useAttributeFor(City.class,"pid");*/
            
            String xmlStr = xStream.toXML(list);
            //System.out.println(xmlStr);
            response.setContentType("text/xml;charset=UTF-8");
            response.getWriter().println(xmlStr);
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException();
        }
    }
...
}

$(function(){
    // 为省份下拉列表绑定事件:
    $("#province").change(function(){
        // 获得选中的省份的id:
        var pid = $(this).val();
        // alert(pid);
        $.post("/day15/ServletDemo6",{"pid":pid},function(data){
            // alert(data);
            var $city = $("#city");
            $city.html("<option>-请选择-</option>");
            $(data).find("city").each(function(){
                var cid = $(this).children("cid").text();
                var cname = $(this).children("cname").text();
                
                $city.append("<option value='"+cid+"'>"+cname+"</option>");
            });
        });
    });
});

JQ完成省市联动——使用JSON作为响应数据
JSONLIB 转换JSON数据
　　JSONArray：将数组或List集合转成JSON。
　　JSONObject：将对象或Map集合转成JSON。

Jsp引入的js把选择的省份id传入,再把结果返回给js中function的data
public class ServletDemo8 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            String pid = request.getParameter("pid");
            ProvinceService provinceService = new ProvinceService();
            List<City> list = provinceService.findByid(pid);
            
            //将list集合转成json
            JsonConfig config = new JsonConfig();
            config.setExcludes(new String[]{"pid"});
            JSONArray jsonArray = JSONArray.fromObject(list,config);    //生成的json对象不包含pid
            response.setContentType("text/html;charset=UTF-8");
            response.getWriter().println(jsonArray.toString());
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException();
        }
    }
...
}

$(function(){
    // 为省份下拉列表绑定事件:
    $("#province").change(function(){
        var pid = $(this).val();
        $.post("/day15/ServletDemo8",{"pid":pid},function(data){
            // alert(data);
            // JS识别JSON:
            // var json = eval(data);
            var $city = $("#city");
            $city.html("<option>-请选择-</option>");
            $(data).each(function(i,n){
                // alert(n.cname);
                $city.append("<option value='"+n.cid+"'>"+n.cname+"</option>");
            });
        },"json");
    });
});