• JS实现异步提交


    • 什么是XMLHttpRequest?
      • XMLHttpRequest对象用于在后台与服务器交换数据
    • XMLHttpRequst的作用
      • 在不重新加载页面的情况下更新网页 
      • 在页面已加载后从服务器请求数据
      • 在页面已加载后从服务器接收数据
      • 在后台向服务器发送数据
    • 若出现Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.
      • 设置请求头必须在open打开之后,send之前
    • JS实现异步提交
      <!--
      onchange触发事件必须满足两个条件:
      (1)当前对象属性发生改变
      (2)当前对象失去焦点
      -->
      <input type="text" name="username" id="username" placeholder="请输入用户名" >



      var username = document.getElementById("username");
      /**
      * 获取XMLHttpRequestObject对象
      */
      function getXMLHttpRequestObject(url, param) {
      //创建XMLHttpRequest对象
      var xmlhttp;
      //为了应对所有现代浏览器,检查是否支持XMLHttpRequst,若支持则创建XMLHttpRequest对象,若不支持,则创建ActiveXObject对象
      if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();

      } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      //规定请求的类型、URL、是否异步请求
      xmlhttp.open('get', url + '?' + param, true);
      //添加请求头必须在open打开之后,send之前
      //想请求添加Http请求头
      xmlhttp.setRequestHeader("Context-type", "application/x-www-form-urlencoded");
      //将请求发送到服务器
      xmlhttp.send();

      return xmlhttp;
      }
      
      
      /**
      * 验证用户名
      */
      username.onchange = function () {

      var usernameValue = username.value;
      var param = "username=" + usernameValue
      var url = "/register";
      var xmlhttp = getXMLHttpRequestObject(url, param);
      //设置监听函数,若为true时,在事件中的就绪状态时执行函数
      xmlhttp.onreadystatechange = function () {
      //判断请求是否成功,每当readyState属性改变时,就会调用该函数
      //readyState的状态:0(请求未初始化)、1(服务器连接已建立)、2(请求已接收)、3(请求处理中)、4(请求已完成,且响应已就绪)
      //status的状态:200(ok),404(未找到页面)
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

      //获取服务器的响应,通过
      //responseText:获取字符串形式的响应数据
      //responseXML:获取XML形式的响应数据
      console.log(xmlhttp.responseText);
      }
      }

      }



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

      String username = req.getParameter("username");
      resp.setContentType("text/html;charset=utf-8");
      PrintWriter out = resp.getWriter();
      out.println("我已经收到你的来信了");
      }
       

     

     

  • 相关阅读:
    设计模式
    LiggEasyWinApp-104-Ligg.EasyWinForm:Zone
    Ligg.EasyWinApp-10300-Ligg.EasyWinForm:View的配置
    LiggEasyWinApp-103-Ligg.EasyWinForm:View
    Ligg.EasyWinApp-102-Ligg.EasyWinForm:Function--ControlBox、Tray、Resize、Menu
    Ligg.EasyWinApp-101-Ligg.EasyWinForm: Application--启动,传入参数、读取Application级别配置文件、验证密码、软件封面、启动登录、StartForm
    Ligg.EasyWinApp-100-Ligg.EasyWinForm:一款Winform应用编程框架和UI库介绍
    Ligg.WinOa-000: Windows运维自动化编程实战--前言
    Ligg.EasyWinApp-000: 一款Windows应用编程框架介绍
    微服务分布式 spring cloud springboot 框架源码 activiti工作流 前后分离
  • 原文地址:https://www.cnblogs.com/fatRabbit-/p/10155325.html
Copyright © 2020-2023  润新知