zoukankan      html  css  js  c++  java
  • JavaWeb 原生Ajax

            <script type="text/javascript">
                function checkUsername(username){
                  //发送ajax 请求 ,验证用户名是否可用
                  //发送ajax 请求的代码包括4步 这四步骤是固定的
                  //比传统请求要麻烦一些
                  //AJAX发送请求全靠浏览器内置的这个对象    XMLHttpRequest对象
                  // 使用这个XMLHttpRequest对象 可以再浏览器当中单独启动一个新的浏览器线程 ,通过浏览器线程发送该请求
                  //达到异步效果
                  //1.创建AJAX核心对象XMLHttpRequest《浏览器内置的,可以直接使用)
                  var xhr;
                  if(window.XMLHttpRequest){
                        xhr= new XMLHttpRequest();
                  }else{
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                  }
    
                  //2.//注册回调函数
                  //程序执行到这里的时候,后面的回调函数并不会执行,只是将回调函数注册给xhr对象
                  //等xhr对象的readyState发生改变的时候,后面的回调函数会执行
                  //0 请求未初始化(在调用 open() 之前)
                  //1 请求已提出(调用 send() 之前)
                  //2 请求已发送(这里通常可以从响应得到内容头部)
                  //3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
                  //4 请求已完成(可以访问服务器响应并使用它)
    
                  xhr.onreadystatechange = function () {
                      if (xhr.readyState == 4){//服务器响应结束
                        //可能会遇到404错误  500  需要判断
                        if (xhr.status == 200){//
                    //获取到span标签
    var nameTipMsg = document.getElementById("nameTipMsg");   //返回文本到span
                  nameTipMsg.innerText
    = xhr.responseText; // var s = xhr.responseText; }else{ } } } //当按钮对象注册一个鼠标点击事件,当按钮上发生鼠标单击的时候,会执行回调函数 //myBtn.onclick = function(){} //3. xhr.open("GET","checkusername.do?username=" + username,true);//只开启通道,不发送请求 //4.发送AJAX请求 xhr.send(); } </script> 用户名:<input type="text" name="username" onblur="checkUsername(this.value);"/> <span id="nameTipMsg" style="font-size: 12px;"></span><br> 密码:<input type="password" name="password"> serlvet 3.0 @WebServlet(name = "CheckUsernameAction",urlPatterns = "/checkusername.do") public class CheckUsernameAction extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.sendRedirect("text/html;charset=UTF-8"); PrintWriter out = resp.getWriter(); //获取用户名 String username = req.getParameter("username"); //连接数据库验证用户名是否存在 if("admin".equals(username)){ //用户名不可用 out.print("<font color='red'>用户名被注册</font>"); }else{ out.print("<font color='green'>用户名可注册</font>"); } //响应信息给浏览器 } }
     
  • 相关阅读:
    axios的数据请求方式及跨域
    vuex 的介绍
    返回顶部的过渡式写法
    数据结构和算法——二叉树
    RecyclerView的刷新和加载更多
    希尔排序小结
    选择排序小结
    插入排序小结
    冒泡、快速排序小结
    数据结构和算法——递归算法
  • 原文地址:https://www.cnblogs.com/rzkwz/p/12501393.html
Copyright © 2011-2022 走看看