javaWeb - Java学习十八——ajax - 《JavaStudy 学习》

ajax

ajax是一种无需重新加载网页的情况下，能够更新部分网页的技术。即局部刷新。

通过在后台与服务器进行少量数据交换，ajax实现网页的异步更新。

ajax是异步JavaScript和xml或者html，所以ajax写在script标签里。

onreadystatechange 事件
Java学习十八——ajax - 图1
js中的原生ajax及测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax01</title>
</head>
<!--
    js中的原生ajax
    ajax：前端的一门技术，用于网页的异步刷新
    （在不提交整个页面的情况下，可以局部的向服务器发送请求，并且处理响应）
-->
<script>
    //定义一个ajax核心对象的变量
    var xhr;
    //判断当前浏览器是否属于ie浏览器
    //如果判断当前浏览器是ie浏览器，需要从插件中获取ajax核心对象
    if(window.ActiveXObject){
        //Microsoft 代表微软
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest) {
        //如果不是ie浏览器，就直接创建对象
        xhr = new XMLHttpRequest();
    }
    //定义测试函数
    function funTest(){
        //原生ajax需要定义open函数
        //method:提交类型 post， get
        //url : 提交的地址
        //async:是否开启异步 true 是  false 否
        xhr.open("post","http://localhost:8080/ajax/ajaxServlet?flag=test",true);
        //回调函数接收前端的响应
        xhr.onreadystatechange = function (){//核心对象中的事件
            //判断浏览器的状态
            if(xhr.readyState == 4 && xhr.status == 200){
                //弹一下获取的后端响应的数据
                alert(xhr.responseText)
            }
        }
        //发送请求
        xhr.send();
    }
</script>
<body>
<input type="button" value="测试" onclick="funTest()">
</body>
</html>

jQuery中的ajax及测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax02</title>
</head>
<!--jQuery中的ajax（jQuery对js中ajax的第一层封装）
    ajax第一层封装：属性位置可以互换，先后顺序无要求，比较灵活
-->
<script src="../jquery/jquery-1.7.2.js"></script>
<script>
    function toLogin(){
        $.ajax({
            //请求后端资源
            url:"http://localhost:8080/ajax/ajaxServlet?flag=login",
            //提交的类型
            type:"post",
            //提交的数据
            data:{
                username:$("[name = 'username']").val(),
                password:$("[name = 'password']").val()
            },
            //请求成功之后的回调函数
            success:function (obj){
                if(obj){
                    alert("登录成功")
                }else {
                    alert("登录失败")
                }
            },
            //服务端返回的数据类型
            dataType:"json"
        })
    }
</script>
<body>
    <table>
        <tr>
            <td>用户名:</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr >
            <td colspan="11"><input type="button" value="登录" onclick="toLogin()"></td>
        </tr>
    </table>
</body>
</html>