Ajax技术的原理

最新推荐文章于 2021-08-05 16:04:26 发布

罗隽_jerChuan

最新推荐文章于 2021-08-05 16:04:26 发布

阅读量287

点赞数

分类专栏： servlet jsp外文文献 ajax 文章标签： ajax 技术 jsp

本文链接：https://blog.csdn.net/qq_31678809/article/details/75258919

版权

servlet 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

jsp外文文献

1 篇文章 0 订阅

订阅专栏

Ajax技术的原理

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

那么要如何来实现Ajax呢？

很简单,以注册表单为例
我们通过注册表单需要填写用户名和密码等信息，在填写这些信息时，我们需要建立两个表单，一个面向用户，一个隐藏起来用于参数传递，这时我们可以通过采用onblur方法来对input标签进行监听，当输入行失去焦点后，通过调用onblur中的方法，将用户填写的信息从隐藏表单中传递到后台servlet，通过servlet的判断，返回相应信息，再将信息显示给用户

<%@ 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>

    <title>学习Ajax的原型技术</title>

  </head>

  <body>
    <form action="RegServlet" method="post">
        NAME:<input type="text" name="name" onblur="val(this)"/> <br/>
        PWD:<input type="password" name="pwd" /> <br/>
        QQ:<input type="text" name="qq" /> <br/>
        ADDR:<input type="text" name="addr" /> <br/>
        <input type="submit" value="注册" />
    </form>

    <form target="returnFrame" action="<%=request.getContextPath()%>/ValServlet" method="post">
        <input type="text" id="regName" name="regName"/> 
    </form>
    <iframe name="returnFrame">
    </iframe>
  </body>

  <script type="text/javascript">
    //提交name给后台ValServlet处理
    function val(obj){
        var name=obj.value;
        if(name!=null){
            //把需要校验的值填入小表单中
            document.getElementById("regName").value=name;
            document.forms[1].submit();
        }
    }
  </script>
</html>

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 ValServlet 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");
        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>");
            if(request.getParameter("regName").startsWith("hncu")){
                out.println(1);
            }
        out.println("  </BODY>");
        out.println("</HTML>");
        out.flush();
        out.close();
    }

}