AJAX —— 异步JavaScript和XML

最新推荐文章于 2025-09-09 08:37:13 发布

转载最新推荐文章于 2025-09-09 08:37:13 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/viusuangio/p/6903778.html

文章标签：

#javascript #java #ViewUI

本文介绍了AJAX技术的基本概念及其如何解决传统Web应用中服务器负载过高的问题。通过使用XMLHttpRequest技术，实现页面局部更新，避免了每次交互都要重新加载整个页面的情况，有效减轻服务器的压力。

　　1.AJAX全称为"Asynchronous JavaScript And XML" (异步JavaScript和XML)，这是一种创建交互式网页应用的开发技术。

　　2.是为了解决服务器因为需要处理大量的业务而导致响应时间过长的问题。

　　(关于这一点，说得有些模糊。举个例子说明：传统的Web项目中，用户在对用户的表单进行填写，当表单提交的时候意味着向服务器发送了一个请求，服务器接受处理并且响应，返回一个全新的网页。这样似乎并没有什么毛病，但是如果出现了大量并发的情况，那对服务器来说无疑是一种负担。而有时候，用户只需要提交极少量的信息，例如对表单的验证，传统的web会把所有的html代码都提交到服务器，其中大量的HTML冗余代码，会导致在高并发下，服务器处理响应的时长增加。)

　　微软的Outlook Web Access 小组退出了XMLHttpRequest技术，这项技术可以在不刷新页面的情况下，直接通过脚本和服务器建立连接并通讯，从服务器中取会当前必要的数据。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>异步验证</title>
</head>
<body>
    USER NAME：<input id="inp_uname" name="uname" onblur="checkName(this)"/><span id="tip"></span><br/>
    <br/>
    UPASSWORD: <input name="upwd" type="password"/><span></span><br/>
</body>
<script type="text/javascript">
    function createXMLHttpRequest(){
        var xmlhttp;
        if(window.XMLHttpRequest){
            /* For IE7+ ,Firefox,Chorme,Opear,Safari*/
            xmlhttp = new XMLHttpRequest();
        }else{
            /* For IE5 or IE6 */
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xmlhttp;
    }
    
    function checkName(obj){
        //获取页面值
        var name = obj.value;
        var span = document.getElementById("tip");
        if(name!=null&&name.length>0){
            //1,构建异步请求
            var xmlhttp = createXMLHttpRequest();
            //2,指定HTTP方法，比如POST,GET
            xmlhttp.open("POST","CheckNameServlet",true);
            //3,设置头文件
            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    
            //4,建立监听
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState==4&&xmlhttp.status==200){
                    span.innerHTML = xmlhttp.responseText;
                }
            }
            //5,发送异步请求
            xmlhttp.send("uname="+name);
        }
    }
    
</script>
</html>

package com.web;

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

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

/**
 * Servlet implementation class CheckNameServlet
 */
@WebServlet("/CheckNameServlet")
public class CheckNameServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    
    public CheckNameServlet() {
        super();
    }
    
    /**
     * 接受页面XMLHttpRequest发来的请求,接收后并且给出响应。    
     * @see javax.servlet.http.HttpServlet#doGet(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String uname = request.getParameter("uname");
        System.out.println(uname);
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        if("admin".equals(uname)){
            out.print("<lable style='color:red'>对不起，您输入的用户名已经存在</lable>");
        }else{
            out.print("<lable style='color:green'>您可以成功注册当前用户名</lable>");
        }
        out.close();
    }

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

}