Ajax & Jquery

Ajax & Jquery

Ajax

• 是什么？

“Asynchronous Javascript And XML” （异步JavaScript和XML），
并不是新的技术，只是把原有的技术，整合到一起而已。

		1.使用CSS和XHTML来表示
		2.使用DOM模型来交互和动态显示
		3.使用xmlHttpRequest来和服务器进行异步通信
		4.使用JavaScript来绑定和调用

• 有什么用？

咱们的网页如果想要刷新局部内容，那么需要重新载入整个网页，用户体验不是很好。所以是为了解决局部刷新的问题，而保持其他部分不动，只刷新某些地方。

数据请求 GET

1.创建对象
function ajaxFunction() {
       
        var xmlhttp;
        
        try {
            xmlhttp = new XMLHttpRequest();
        }catch (e) {
            try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e) {
                try {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }catch (e) {}
            }
        }
        return xmlhttp;
    }

2.发送请求
//执行get请求
function get() {
        
        //1. 创建 xmlhttprequest 对象
        var request = ajaxFunction();
        
        //2. 发送请求
        /**
         * 参数一：请求类型 GET or POST
         * 参数二：请求的路径
         * 参数三：是否异步， true or false
         */
        //request.open("GET", "demo01", true); 不带数据
        request.open("GET", "demo01?name=aa&age=18", true);  //带数据
        request.send();
    }    
            
  3.如果发送请求的同时，还行获取数据，那么代码如下：
  //执行get请求
  function get() {
          
            //1. 创建 xmlhttprequest 对象
            var request = ajaxFunction();
          
            //2. 发送请求
            request.open("GET", "demo01?name=aa&age=18", true);
          
            //3. 获取响应数据 注册监听的意思。一会准备的状态发生了改变，那么就执行 = 号右边的方法
            request.onreadystatechange = function () {
                //前半段表示已经能够正常处理，再判断状态码是不是200
                if(request.readyState == 4 && request.status == 200){
                    //弹出响应的信息
                    alert(request.responseText);
                }
            }
            request.send();
        }

数据请求 POST

//1.创建对象
function ajaxFunction() {
        var xmlhttp;
        try {
            xmlhttp = new XMLHttpRequest();
        }catch (e) {
            try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e) {
                try {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }catch (e) {
                    
                }
            }
        }
        return xmlhttp;
    }        
//2.发送请求
//执行post请求
    function post() {

        //1. 创建 xmlhttprequest 对象
        var request = ajaxFunction();

        //2. 发送请求
        request.open("POST", "demo01", true);
		
		//如果需要获取服务器的响应数据，只需添加如下代码
		//想要获取服务器传过来的数据，加一个状态的监听
        request.onreadystatechange = function(){
            if (request.readyState == 4 && request.status == 200){
                alert("post:" + request.responseText);
            }
        }	
        
		//如果不带数据，只需要写这一行就可以
		request.send();

        //如果使用的是post方式带数据，那么这里要添加头，说明提交的数据类型是一个经过url编码的form表单数据
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //带数据过去，在send()方法里面写表单数据
        request.send("name=aobama&&age=19");
    }

校验用户名是否可用

1.搭建环境

1. 页面准备

        <table border="1" width="500">
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="name" id="name" onblur="checkUserName()"><span id="span01"></span></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="text" name=""></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input type="text" name=""></td>
            </tr>
            <tr>
                <td>简介：</td>
                <td><input type="text" name=""></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="注册"></td>
            </tr>
        </table>
   

2. 数据库准备

2.Servlet代码

protected void doGet(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException {
    try {

        req.setCharacterEncoding("UTF-8");

        //1. 检测用户名是否存在
        String name = req.getParameter("name");
        System.out.println("name=" + name);
        UserDao dao = new UserDaoImpl();
        boolean isExist = dao.checkUserName(name);

        //2. 通知页面，到底有还是没有
        if (isExist){
            resp.getWriter().println(1); //存在用户名
        }else{
            resp.getWriter().println(2); //不存在用户名
        }

    } catch (SQLException e) {
        e.printStackTrace();
    }
}

3.Dao代码

public boolean checkUserName(String username) throws SQLException {

    QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());

    String sql = "select count(*) from user where username=?";
    Long result = (Long)runner.query(sql, new ScalarHandler(), username);

    return result > 0;
}

4.jsp页面显示

function ajaxFunction() {
        var xmlhttp;
        try {
            xmlhttp = new XMLHttpRequest();
        }catch (e) {
            try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e) {
                try {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }catch (e) {

                }
            }
        }
        return xmlhttp;
    }

    function checkUserName() {

        //获取输入框的值
        var name = document.getElementById("name").value;

        //1. 创建对象
        var request = ajaxFunction();
        //2. 发送请求
        request.open("POST", "checkusername", true);

        //注册状态改变监听，获取服务器传送过来的数据
        request.onreadystatechange = function(){
            if (request.readyState == 4 && request.status == 200){
                //alert(request.responseText);
                var data = request.responseText;
                if(data == 1){
                    //alert("用户名已存在");
                    document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在！</font>";
                }else{
                    //alert("用户名可用");
                    document.getElementById("span01").innerHTML = "<font color='green'>用户名可用！</font>";
                }
            }
        }

        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        request.send("name=" + name);
    }

JQuery

• 是什么？

javascript 的代码框架

• 有什么用？

简化代码，提高效率

• 核心

write less do more 写的更少，做得更多

load

<a href="#" onclick="load()">使用JQuery执行load方法</a>

有两次刷新，先走 onClick 方法，取到数据回来之后，赋值显示；接着走 href=“” 的路径，
若这个属性没有赋值，则会把当前页面重新刷新一次，导致看不见返回值
function load() {
        //$("#text01") --- document.getElementById("text01");
        //找到这个元素，去执行加载的动作，加载demo02，得到的数据，赋值显示 （statusTXT，xhr这两个属性为可选属性）
        $("#text01").load("demo02", function (responseText, statusTXT, xhr) {
            //alert("结果=" + responseText);
            //找到id为text01的元素，并设置它的value属性值为responseText对应的值
            $("#text01").val(responseText);
        });
    }

get

function get() {
        $.get("demo02", function (data, status) {
            alert("结果=" + data);
            //$("#div01").val(data);  val 用于设置元素里面有 values 的属性值
            //$("#div01").html(data);  可以设置html标签
            $("#div01").text(data);
        });
    }

赋值显示

• val(“aa”);

只能放那些标签带有 value 属性的

• html(“aa”); - - - 可以写html 代码
• text(“aa”);

这两个其实没什么区别，如果想针对这份数据做 html 样式，那么只能用 html（）方式

load & get

• load

    $("#元素").load(URL地址)
    
    $("#div01").load(servlet); ---> 默认使用 get 请求，回来赋值的时候，使用的text（）赋值
  

• get

    语法格式：$.get(URL, callback);
    
    使用案例：
    	$.get("demo02", function (data, status) {
            $("#div01").text(data);
        });
  

• post

    语法格式：$.post(url, data, callback);
    
    使用案例：
    $.post("demo02", {name:"zhangsan", age:18}, function (data, status) {
            //alert("回来数据了=" + data);
            //想要放数据到 div 里面去，---找到div
            $("#div01").html(data);
        });
  

使用JQuery校验用户名是否可用

function checkUserName() {
        //1. 获取输入框的内容
        var name = $("#name").val();
        //2. 发送请求
        $.post("checkusername", {name:name}, function (data, status) {
            //alert(data);
            if (data == 1){
               $("#span01").html("<font color='red'>用户名已存在！</font>");
            }else {
                $("#span01").html("<font color='green'>用户名可用！</font>");
            }
        });
        //3. 输出响应的数据到页面
    }