AJAX 快速实例上手

最新推荐文章于 2022-04-29 10:47:08 发布

amchencute2

最新推荐文章于 2022-04-29 10:47:08 发布

阅读量121

点赞数

分类专栏： Tech - AJAX 文章标签： Ajax Servlet JavaScript XML Web ViewUI

本文链接：https://blog.csdn.net/amchencute2/article/details/83356955

版权

Tech - AJAX 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

概要介绍：

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），其核心只有JavaScript、XMLHTTPRequest和DOM 。

最早应用XMLHTTP的是微软,IE（IE5以上）通过允许开发人员在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。它可以排除下载冗余HTML的需要,从而提高进程的速度。Mozilla（Mozilla1.0以上及NetScape7以上）做出的回应是创建它自己的继承XML代理类：XMLHttpRequest类。Konqueror (和Safari v1.2,同样也是基于KHTML的浏览器)也支持XMLHttpRequest对象,而Opera也将在其v7.6x+以后的版本中支持XMLHttpRequest对象。对于大多数情况，XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。

实例：
三个源文件<index.jsp, ValidateServlet.java, web.xml>

<index.jsp>内容如下：

<%@ page contentType="text/html;charset=gb2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>ajax starting</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="description" content="desc">
<link rel="stylesheet" type="text/css" href="styles.css">

<script type="text/javascript">
var req;

function validate()
{
    var idField = document.getElementById("userid");
    var url = "servlet/ValidateServlet?id=" + escape(idField.value);
    if (window.XMLHttpRequest)
    {
        req = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(req)
    {
        req.open("GET", url, true);
        req.onreadystatechange = callback;
        req.send(null);
    }
}

function callback()
{
    if (req.readyState == 4)
    {
        if (req.status == 200)
        {
            parseMessage();
        }
        else
        {
            setMessage("Not able to retrieve description" + req.statusText);
        }
    }
}

function parseMessage()
{
    var message = req.responseXML.getElementsByTagName("message")[0];
    var name = req.responseXML.getElementsByTagName("name")[0];
    setMessage(message.firstChild.data,name.firstChild.data);
}
function setMessage(message,name)
{
    var userMessageElement = document.getElementById("userIdMessage");
    userMessageElement.innerHTML = "<font color=\"red\">" + message + " you "+name+"</font>";
}
</script>
</head>

<body>
    <input type="text" size="20" id="userid" name="id" οnblur="validate();">

<ValidateServlet.java>内容如下：

package example;

import java.io.IOException;
import java.util.HashMap;

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

public class ValidateServlet extends HttpServlet {

private ServletContext context;
private HashMap users = new HashMap();

public ValidateServlet() {
super();
}

public void destroy() {
super.destroy();
}

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
    response.setContentType("text/xml");
    response.setHeader("Cache-Control", "no-cache");

    String targetId = request.getParameter("id");
    System.out.println(targetId.trim());

    if ((targetId != null) && users.containsKey(targetId.trim())) {

    response.getWriter().write("<info><message>welcome</message><name>"+targetId.trim()+"</name></info>");
    } else {

    response.getWriter().write("<info><message>damp</message><name>bush</name></info>");
    System.out.print("invalid");
    }
}

public void init(ServletConfig config) throws ServletException {
    this.context = config.getServletContext();
    users.put("ben","female");
    users.put("ewilliams","male");
}

}

<web.xml>内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_9" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>

    <servlet>
        <servlet-name>ValidateServlet</servlet-name>
        <servlet-class>example.ValidateServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>ValidateServlet</servlet-name>
        <url-pattern>/servlet/ValidateServlet</url-pattern>
    </servlet-mapping>

</web-app>

amchencute2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX 快速实例上手

概要介绍： AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），其核心只有JavaScript、XMLHTTPRequest和DOM。最早应用XMLHTTP的是微软,IE（IE5以上）通过允许开发人员在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能,开发人员可以不用从当前的Web页面导航而直接传...
复制链接

扫一扫