zoukankan      html  css  js  c++  java
  • ajax 入门

     

     

     ajax发送post请求和发送get请求的一些区别:

      当ajax使用post提交请求时,设置中文乱码的情况需要额外处理

      同时post请求的参数在请求体里,所以参数应该写在send里,而get的参数直接写在url里,所以send里是空的

    https://blog.csdn.net/qq_38499084/article/details/79699210 可看这篇博客

    为了防止ajax的get请求走浏览器缓存的解决方法:在get 的url处加时间戳

    应用:模拟表单填写,当用户名一栏失去焦点时,ajax向后台发送请求,后台判断用户名是否已被注册

       返回的结果在网页上进行局部刷新,提示用户

    index.jsp

    <%--
      Created by IntelliJ IDEA.
      User: ASUS
      Date: 2020/4/16
      Time: 22:56
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
      <head>
        <title>$Title$</title>
      </head>
      <body>
          <script type="text/javascript">
              function checkUsername(username) {
                  // 1.创建Ajax核心对象,浏览器内置,可以直接使用
                  var xhr = new XMLHttpRequest();
                  // 2.注册回调函数
                  xhr.onreadystatechange = function (ev) {
                      // 服务器返回响应
                      if(xhr.readyState == 4){
                          if(xhr.status == 200){
                              var msg = document.getElementById("nameTipMsg");
                              msg.innerHTML = xhr.responseText;
                          }else {
                              alert(xhr.status);
                          }
                      }
                  }
                  // 3.开启浏览器和服务器之间的通道
                  xhr.open("GET","/myWeb/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"><br>
    
      </body>
    </html>

    OneServlet

    public class OneServlet extends HttpServlet {
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        }
    
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            // 1.获取用户名
            String username = req.getParameter("username");
            resp.setContentType("text/html;charset=UTF-8");
            PrintWriter out = resp.getWriter();
            // 2.验证用户名
            if("admin".equals(username)){
                // 用户名不可用
                out.print("<font color='red'>用户名已被注册</font>");
            }else {
                // 用户名可用
                out.print("<font color='green'>用户名可用</font>");
            }
    
        }
    }

    web.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
             version="4.0">
        <welcome-file-list>
            <welcome-file>index.jsp</welcome-file>
        </welcome-file-list>
        
        <servlet>
            <servlet-name>OneServlet</servlet-name>
            <servlet-class>com.controller.OneServlet</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>OneServlet</servlet-name>
            <url-pattern>/checkusername.do</url-pattern>
        </servlet-mapping>
    </web-app>
    View Code
  • 相关阅读:
    sqlmap基础使用(以sqli—labs第一关为例)
    IIS、Apache、Nginx日志记录的各个字段内容与含义
    建站+阿里云服务器上传个人制作网页
    SQL server 2005 在Windows server 2003上面的安装
    VMware里kali虚拟机的安装
    第三章web安全基础—http协议及burpsuite基本使用(brupsuite导入证书支持https访问)
    第三章web安全基础—互联网注册网站相关小知识
    第三章web安全基础—IIS发布dvbbs(动网论坛)及SQL2005问题解决
    根据现有目录批量创建文件夹
    PL/SQL通过存储过程为相同数据添加序号
  • 原文地址:https://www.cnblogs.com/zsben991126/p/12724659.html
Copyright © 2011-2022 走看看