1.GET和POST提交

TaoistWar

浏览: 406818 次
性别:
来自: 北京

最近访客更多访客>>

呼呼很安静

bbwang8088

yungaoyue2005

zy_java

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

Ajax Servlet Safari Firefox Opera

1、服务器端/validateName的Servlet

package com.tao.ajax.server;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

public class ValidateName extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/xml;charset=utf-8");
        String userName = request.getParameter("userName");
        System.out.println(userName);
        PrintWriter out = response.getWriter();
        if (userName == null || userName == "") {
            out.println("<message>用户名不能为空！</message>");
        } else if ("tao".equals(userName)) {
            out.println("<message>用户名【" + userName + "】已经存在！</message>");
        } else {
            out.println("<message>用户名【" + userName + "】可以使用！</message>");
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String userName = request.getParameter("userName");
        System.out.println(userName);
        PrintWriter out = response.getWriter();
        if (userName == null || userName == "") {
            out.println("用户名不能为空！");
        } else if ("tao".equals(userName)) {
            out.println("用户名【" + userName + "】已经存在！");
        } else {
            out.println("用户名【" + userName + "】可以使用！");
        }
    }
}

2、客户端页面调用

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Simple jsp page</title>
        <script type="text/javascript" src="ajax.js"></script>
    </head>
    <body>
        user name:<input type="text" id="userName" />
        <input type="button" value="validate" onclick="validatePost()" /> <br />
        <span id="result"></span><br />
        <span id="message"></span>
    </body>
</html>

3.GET提交，返回纯文本数据库

var request;
function validateGET() {
   var userName = document.getElementById("userName").value;

   // 1.创建XMLHttpRequest对象
   if (window.XMLHttpRequest) {
        // 针对Firefox、Mozilla、Opera、Safari、IE7、IE8
        request = new XMLHttpRequest();
        // 针对某些特定版本的Mozillar浏览器BUG进行修正
        if (request.overrideMimeType) {
            request.overrideMimeType("text/html");
        }
    } else if (window.ActiveXObject) {
        // 针对IE6、IE5.5、IE5
        // 排在前边的版本新
        var actives = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
        for (var i=0; i<actives.length; i++) {
            try {
                request = new ActiveXObject(actives[i]);
                break;
            } catch (e) {
            }
        }
    }

    // 2.注册回调函数（绑定函数名）
    // 如果包含括号，表示绑定方法执行的返回值
    request.onreadystatechange = callback;

    // 3.设置连接信息
    // 第一个参数表示http的请求方式，支持所有的http请求，主要使用GET和POST
    // 第二个参数表示请求的url地址，GET方式请求的参数也在url中
    // 第三个参数表示采用异步还是同步方式交互，true表示异步
    request.open("GET", "validateName?userName=" + userName, true)

    // 4.发送数据
    // 同步方式下：send方法会在数据回来后才执行
    // 异步方式下：send方法会立即完成执行
    request.send(null);
}

function callback() {
    document.getElementById("result").innerHTML += ("<br />callbak : " + request.readyState);
    // 5.接收响应数据
    // 判断对象的状态是否交互完成
    if (request.readyState == 4) {
        // 判断http的交互是否成功
        if (request.status == 200) {
            // 获取服务器端的返回数据
            // 获取服务器输出的纯文本数据
            var txt = request.responseText;
            document.getElementById("result").innerHTML = txt;
        }
    }
}

4.POST提交，返回XML数据

function validatePost() {
   var userName = document.getElementById("userName").value;

   // 1.创建XMLHttpRequest对象
   if (window.XMLHttpRequest) {
        // 针对Firefox、Mozilla、Opera、Safari、IE7、IE8
        request = new XMLHttpRequest();
        // 针对某些特定版本的Mozillar浏览器BUG进行修正
        if (request.overrideMimeType) {
            request.overrideMimeType("text/xml");
        }
    } else if (window.ActiveXObject) {
        // 针对IE6、IE5.5、IE5
        // 排在前边的版本新
        var actives = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
        for (var i=0; i<actives.length; i++) {
            try {
                request = new ActiveXObject(actives[i]);
                break;
            } catch (e) {
            }
        }
    }


    // 2.注册回调函数（绑定函数名）
    // 如果包含括号，表示绑定方法执行的返回值
    request.onreadystatechange = callbackXml;

    // 3.设置连接信息
    // 第一个参数表示http的请求方式，支持所有的http请求，主要使用GET和POST
    // 第二个参数表示请求的url地址，GET方式请求的参数也在url中
    // 第三个参数表示采用异步还是同步方式交互，true表示异步
    request.open("POST", "validateName", true)

    //POST方式设置请求头
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    // 4.发送数据
    // 同步方式下：send方法会在数据回来后才执行
    // 异步方式下：send方法会立即完成执行
    request.send("userName=" + userName);
}
function callbackXml() {
    document.getElementById("result").innerHTML += ("<br />callbak : " + request.readyState);
    // 5.接收响应数据
    // 判断对象的状态是否交互完成
    if (request.readyState == 4) {
        // 判断http的交互是否成功
        if (request.status == 200) {
            // 获取服务器端的返回数据
            // 获取服务器输出的XML数据
            var xmlDoms = request.responseXML;
            if (xmlDoms && xmlDoms.length > 0) {
                var message = xmlDoms.getElementsByTagName("message")[0].firstChild.nodeValue;
                document.getElementById("result").innerHTML = message;
            } else {
                alert("xml格式错误,内容为：" + request.responseText);
            }
        }
    }
}

分享到：

Weblogic的使用 | Spring基于注解形式的AOP

2010-01-25 14:48
浏览 938
评论(1)
分类:编程语言
查看更多

1 楼 skyuck 2010-03-04

原生态的ajax

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

1.GET和POST提交

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

1.GET和POST提交

评论

发表评论

相关推荐

JS选择select

HTML页面右上用JS导入HTML页面

12.正则表达式：反向引用

10.正则表达式：定位点

9.正则表达式：限定符

5.正则表达式：普通字符

4.正则表达式：优先级顺序

Ext的xtype:"tabpanel"

Ext.Viewport的border布局

IE和FF的回车默认提交

JS prototype的使用

JS nodeType

JS教程－－String

JS的toExponential(num)

JS基础知识

火狐和IE之间的7个JavaScript差异

javascript正则表达式初级应用

正则表达式

一个基于JQuery的登录验证[修正]

检测用户浏览器是否支持cookie

最近访客更多访客>>