Ajax技术---Ajax技术原理，自己写一个Ajax

最新推荐文章于 2022-12-26 20:08:08 发布

海那边的小萌男

最新推荐文章于 2022-12-26 20:08:08 发布

阅读量240

点赞数

分类专栏： J2EE 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_37720904/article/details/75309399

版权

J2EE 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

本篇博客知识点—演示写一个类似Ajax技术功能的模块。

通过自己写一个简单的类似Ajax技术功能模块，来帮忙理解Ajax底层思想，以便后面更好的学习Ajax

需求：在填写表单的时候，填完失去焦点时，提示用户刚刚输入的姓名是否合法。如图~（图片显示不了是什么鬼？？？）
这里写图片描述
思路：姓名标签内有个函数—当失去焦点时候触发，作用就是想办法把刚刚填了的姓名提交给后台判断是否非法。同时反馈结果。

Name:<input type="text" name="name" onblur="val(this)">

函数代码：利用一个隐藏的表单提交

    function val(obj){
                var nm = obj.value;
                if(nm!=null){
                document.getElementById("forname").value = nm;
                document.forms[1].submit();
                }
            }

后台处理完成后直接转发到一个JSP页面

String name = request.getParameter("ForName");
        if(name!=null&&!name.trim().equals("")&&name.startsWith("hncu")){
            request.setAttribute("error", 1);
        }else{
            request.setAttribute("error", 0);
        }
        request.getRequestDispatcher("/reg/reg.jsp").forward(request, response);

这个页面不是普通的页面，而是刚刚那个页面的画中画

            <iframe style="display:none;" name="returnframe"> </iframe>             
        <form action="FornameServlet" target="returnframe"method="post">
            <input id ="forname" type="hidden" name ="ForName">
        </form>

这个JSP页面有两种技术来完成信息提示用户

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!-- 
   <p>这是ajax返回结果页面</p>
 -->

<script type="text/javascript">
  //alert("aaa");

  //一个技术: 把java代码中的数据传递到js中来。利用java脚本穿透js,把输出内容赋值给js变量。
  var res ='<%=request.getAttribute("error")%>';
  //另一个技术: 在子页(显示在iframe中的页面)中访问父页(外面大窗口中的页面) ,通过在原来访问页面元素的方式前面加"parent."

  /*访问父页，法1: 直接在子页中操纵父页中的元素
  if(res==1){
      parent.document.getElementById("msg").innerHTML="用户名已存在,请换一个!";
  }else{
      parent.document.getElementById("msg").innerHTML="用户名可用,可以注册!";
  }
  */
  //访问父页，法2: 在子页中调用父页中的一个函数，然后在该函数中操纵父页中的元素
  parent.back(res);
</script>

这样就完成啦。由于贴不了图我把所有代码贴上去把

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>Ajax底层技术学习</title>
  </head>

  <body>
          <script type="text/javascript">
            function val(obj){
                var nm = obj.value;
                if(nm!=null){
                    document.getElementById("forname").value = nm;
                    document.forms[1].submit();
                }
            }
            // 给子页面调用的
            function back(res){
                if(res!=null){
                   if(res==0){
                     label.style.color = "red";
                    label.innerHTML="用户名字存在，请换一个";
                   }else{
                     label.style.color = "green";
                    label.innerHTML="恭喜你！该用户名可以使用！";
                   }
               }
            }

          </script>

        <h3>Ajax底层技术学习~</h3>
        <form action="RegServlet"method="post">
            Name:<input type="text" name="name" onblur="val(this)">
            <label id="label"></label><br/>
            pwd:<input type="password" name="pwd"><br/>
            <input type="submit" value="提交">
        </form>
            <iframe style="display:none;" name="returnframe"> </iframe>             
        <form action="FornameServlet" target="returnframe"method="post">
            <input id ="forname" type="hidden" name ="ForName">
        </form>
  </body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <display-name></display-name>
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>RegServlet</servlet-name>
    <servlet-class>cn.hncu.servlets.RegServlet</servlet-class>
  </servlet>
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>FornameServlet</servlet-name>
    <servlet-class>cn.hncu.servlets.FornameServlet</servlet-class>
  </servlet>


  <servlet-mapping>
    <servlet-name>RegServlet</servlet-name>
    <url-pattern>/RegServlet</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>FornameServlet</servlet-name>
    <url-pattern>/FornameServlet</url-pattern>
  </servlet-mapping>    
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

RegServlet

package cn.hncu.servlets;
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class RegServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
        out.println("<HTML>");
        out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
        out.println("  <BODY>");

        String name = request.getParameter("name");
        String pwd = request.getParameter("pwd");
        boolean  boo = false;
        if(name!=null && !name.trim().equals("")){
            if(pwd!=null && !pwd.trim().equals("")){
                if(name.startsWith("hncu") && pwd.length()>5){
                    boo = true;
                }
            }
        }
        if(boo){
            out.println("欢迎你，"+name);
        }else{
            request.getRequestDispatcher("/index.jsp").forward(request, response);
        }
        out.println("  </BODY>");
        out.println("</HTML>");
        out.flush();
        out.close();
    }

}

ForNameServlet

package cn.hncu.servlets;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class FornameServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
        out.println("<HTML>");
        out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
        out.println("  <BODY>");

        String name = request.getParameter("ForName");
        if(name!=null&&!name.trim().equals("")&&name.startsWith("hncu")){
            request.setAttribute("error", 1);
        }else{
            request.setAttribute("error", 0);
        }
        request.getRequestDispatcher("/reg/reg.jsp").forward(request, response);
        out.println("  </BODY>");
        out.println("</HTML>");
        out.flush();
        out.close();
    }

}

画中画 reg.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<script type="text/javascript">

   var res =<%=request.getAttribute("error")%>;
   var olabel =  window.parent.document.getElementById("label");
   if(res!=null){
       if(res==0){
          olabel.style.color = "red";
          olabel.innerHTML="用户名字存在，请换一个";
       }else{
           olabel.style.color = "green";
           olabel.innerHTML="恭喜你！该用户名可以使用！";
       }
   }
   // 技术二 调用父类方法
 // parent.back(res);
</script>

海那边的小萌男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax技术---Ajax技术原理，自己写一个Ajax

本篇博客知识点—演示写一个类似Ajax技术功能的模块。通过自己写一个简单的类似Ajax技术功能模块，来帮忙理解Ajax底层思想，以便后面更好的学习Ajax需求：在填写表单的时候，填完失去焦点时，提示用户刚刚输入的姓名是否合法。如图~（图片显示不了是什么鬼？？？）思路：姓名标签内有个函数—当失去焦点时候触发，作用就是想办法把刚刚填了的姓名提交给后台判断是否非法。同时反馈结果。Name:<in
复制链接

扫一扫

专栏目录