首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Java Ajax简单使用

Java Ajax简单使用

作者头像
SakuraTears
发布2022-01-13 14:59:43
发布2022-01-13 14:59:43
60700
代码可运行
举报
运行总次数:0
代码可运行

写一个简单的Ajax:一个输入框输入值判断,如果输入值 == "sakura" 后面显示名字不可用,否则显示可用

JSP页面

写一个form表单

代码语言:javascript
代码运行次数:0
运行
复制
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>$Title$</title>
    <script src="js/jQuery.js"></script>
    <script src="js/Ajax.js"></script>
</head>
<body>

<form action="">
    <input type="text" id="fname" name="fname" onblur="nameOnblur()"> <span id="sp"></span><br>
</form>

</body>
</html>

JS

js里写Ajax

代码语言:javascript
代码运行次数:0
运行
复制
/*获取XmlHttpRequest*/
function getAjax() {
    var xmlHttpRequest;
    /*如果是chrome,火狐,safari,IE7以上等主流浏览器*/
    try {
        xmlHttpRequest = new XMLHttpRequest();
    } catch (e) {
        try {
            /*是否是IE6*/
            xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                /*IE5或者更早版本*/
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                /*抛出异常提示*/
                alert("不存在XmlHttpRequest的浏览器");
                throw e;
            }
        }
    }
    //将对象返回
    return xmlHttpRequest;
}

/*发送请求给服务器*/
function nameOnblur() {
    /*1 打开与服务器的连接*/
    var jsRequest = getAjax();
    /**
     * open(method,url,async) method即提交方式,一般为GET和POST,url为提交的地址,async代表是否异步(true)还是同步(false)
     */
    //此处的url为请求的地址
    jsRequest.open("GET", "/test/index.jsp", true);
    /*2 发送请求*/
    //通知服务器发送的数据是请求参数
    jsRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    jsRequest.send();
    /*3 注册监听*/
    jsRequest.onreadystatechange = function () {
        //确认readyState和status
        if (jsRequest.readyState == 4) {
            if (jsRequest.status == 200) {
                //得到响应参数,处理请求
                //获取input的值
                var name = document.getElementById("fname").value;
                //获取span
                var span = document.getElementById("sp");
                //判断
                if (name == "sakura") {
                    span.innerText = "名字不可用";
                } else {
                    span.innerText = "名字可用";
                }
            }
        }
    }
}

本文参考:https://www.cnblogs.com/youngchaolin/p/11574364.html#_label1_0

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021年09月10日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • JSP页面
  • JS
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档