`

1.GET和POST提交

阅读更多

 

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);
            }
        }
    }
}
 

 

 

 

 

 

 

 

 

 

分享到:
评论
1 楼 skyuck 2010-03-04  
原生态的ajax

相关推荐

    对Django 中request.get和request.post的区别详解

    Django 中request.get和request.post的区别 POST和GET差异: ...因此,GET提交的数据会在地址栏中显示出来,而POST提交,地址栏不会改变。 GET属性 1、QueryDict类型的对象 2、包含get请求方式的所

    jsp中post和get传输方式的区别

    1. **GET与POST的数据格式:** - GET:通常使用`variable=value`的形式进行编码,并且这些参数会附加在URL之后,如`http://example.com/page?name=value&age=30`。 - POST:使用HTML表单(`&lt;form&gt;`)中的数据提交...

    表单提交中get和post的区别

    例如,假设我们有一个表单,包含一个文本框,名称为“Text”,那么在get方式中,提交的URL将是“getpost.asp?Text=http://leewei.blogchina.com”。而在post方式中,表单内各个字段与其内容将被放置在HTML HEADER内...

    jquery 异步调用$.ajax() $.post() $.get()

    在实际开发中,`$.ajax()`、`$.post()`和`$.get()`经常用于前后端通信,比如从服务器获取数据、提交表单数据或更新资源。它们都是基于Ajax技术,能够在不刷新页面的情况下进行异步数据交换,从而提升用户体验。 ...

    ajax POST 与GET提交的区别

    ### AJAX POST 与 GET 提交的区别详解 #### 一、GET与POST基本概念及应用场景 在探讨AJAX中GET和POST的区别之前,我们先来了解一下这两种请求方式的基本概念。 **GET**请求通常用于获取资源信息,它将参数拼接到...

    HttpUtils Java get post 工具类

    "HttpUtils Java get post 工具类" 提供了便捷的方法来发送GET和POST请求,简化了网络请求的操作。以下是对这两个主要HTTP方法的详细解释以及如何在Java中实现它们。 **1. GET方法** GET是HTTP中最常见的请求方法,...

    jQuery的3种请求方式$.post,$.get,$.getJSON

    在jQuery库中,$.post, $.get和$.getJSON是用于执行AJAX(Asynchronous JavaScript and XML)请求的三种主要方法,这些方法使得前端与后端服务器进行异步数据交互成为可能,无需刷新整个页面。接下来,我们将详细...

    【JavaScript源代码】解决vue $http的get和post请求跨域问题.docx

    在Vue组件中,你可以这样发起GET和POST请求: ```javascript // GET请求 this.$http.get('/api/amdatashift/login/probe') .then(function(data) { // 处理成功响应 }) .catch(function() { console.log(...

    get 和post 实例

    GET主要用于获取资源,而POST则用于向服务器提交数据。这里我们将深入探讨这两种方法以及如何在多线程环境下创建唯一的HttpClient。 首先,GET和POST的主要区别在于它们处理数据的方式: 1. **GET**:在URL中携带...

    VB6Get和POST请求异步处理请求

    在VB6(Visual Basic 6)编程环境中,GET和POST是两种主要的HTTP请求方法,用于从Web服务器获取数据或提交数据。这两种方法在进行网络通信时起着至关重要的作用,尤其是在开发基于Web的应用程序时。然而,在进行同步...

    java后台实现 get post 提交.zip

    本资料"java后台实现 get post 提交.zip"可能包含了实现这些功能的代码示例和详细解释。 1. GET请求: GET请求主要用于从服务器获取资源,它将参数附加到URL后面。在Java中,我们通常使用`java.net.URL`和`java.net...

    浅析Get与Post的区别

    Get和Post是两种常用的表单提交方式,在Web开发中经常被使用。但是,很多人并不了解这两种方式的区别,导致在实际开发中出现问题。本文将详细阐述Get和Post的区别,以便读者更好地理解和使用这两种方式。 Get方式 ...

    get、post登录

    总的来说,理解GET和POST方法对于任何Web开发者来说都是至关重要的,它们是构建交互式Web应用程序的基础。通过掌握这两种方法,你可以更好地设计和实现登录和其他数据提交功能,确保用户数据的安全性和交互的效率。

    HttpTest.rar_GET和POST请求_HTTPTest_get post

    相比GET,POST请求更适用于向服务器提交数据,比如表单提交。在POST请求中,数据被放在请求体中,不会显示在URL上,因此更适合处理敏感数据。POST请求没有GET请求那么多的数据大小限制,可以发送大量数据。然而,...

    HttpClient实现POST GET和文件下载

    接下来,我们将分别讲解HttpClient如何实现GET和POST请求: 1. GET请求: 使用HttpGet类创建GET请求,指定目标URL。例如: ```java HttpGet httpGet = new HttpGet("http://example.com"); CloseableHttpClient...

    VB使用XMLHTTP实现Post与Get的方法.rar_POST_POST GET_VB_Post_post vb_vb ge

    GET方法常用于从服务器获取数据,而POST方法则用于向服务器发送数据,如表单提交。下面我们将详细探讨如何在VB中利用XMLHTTP对象实现这两种方法。 首先,我们需要引入XMLHTTP组件。在VB6中,可以通过引用...

    get与post实例

    本文将深入探讨GET和POST的区别、应用场景以及VB(Visual Basic)中如何使用它们。 GET和POST是HTTP请求的核心方法,用于从服务器获取数据或向服务器发送数据。GET主要用于从服务器获取资源,它的参数通常显示在URL...

    Get 与 Post

    1. POST方法主要用于向服务器提交数据,数据包含在请求体中,而不是URL上。 2. POST请求没有长度限制,可以传输大量或复杂的数据。 3. POST请求不会显示在浏览器的历史记录和地址栏,相对GET来说更安全,但并非绝对...

    GET请求和POST请求详解.docx

    1. GET请求和POST请求的区别 GET请求和POST请求的最明显的区别是它们的请求方式。GET请求通过URL提交数据,而POST请求通过“请求体”传递数据。因此,在GET请求中,参数可以在URL中看到,而POST请求的参数则不会在...

Global site tag (gtag.js) - Google Analytics