`
terran_li2008
  • 浏览: 200394 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ajax中post和get的用法

    博客分类：
  • Ajax
Ajax浏览器ServletJavaScriptXHTML
阅读更多

getAndPostExample.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sending Request Data Using GET and POST</title>

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

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}
   
function createQueryString() {
    var firstName = document.getElementById("firstName").value;
    var middleName = document.getElementById("middleName").value;
    var birthday = document.getElementById("birthday").value;
   
    var queryString = "firstName=" + firstName + "&middleName=" + middleName
        + "&birthday=" + birthday;
   
    return queryString;
}

function doRequestUsingGET() {
    createXMLHttpRequest();
   
    var queryString = "GetAndPostExample?";
    queryString = queryString + createQueryString()
        + "&timeStamp=" + new Date().getTime();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", queryString, true);
    xmlHttp.send(null);
}

function doRequestUsingPOST() {
    createXMLHttpRequest();
   
    var url = "GetAndPostExample?timeStamp=" + new Date().getTime();
    var queryString = createQueryString();
   
    xmlHttp.open("POST", url, true);
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   
    xmlHttp.send(queryString);
}
   
function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            parseResults();
        }
    }
}

function parseResults() {
    var responseDiv = document.getElementById("serverResponse");
    if(responseDiv.hasChildNodes()) {
        responseDiv.removeChild(responseDiv.childNodes[0]);
    }
   
    var responseText = document.createTextNode(xmlHttp.responseText);
    responseDiv.appendChild(responseText);
}

</script>
</head>

<body>
  <h1>Enter your first name, middle name, and birthday:</h1>
 
  <table>
    <tbody>
        <tr>
            <td>First name:</td>
            <td><input type="text" id="firstName"/>
        </tr>
        <tr>
            <td>Middle name:</td>
            <td><input type="text" id="middleName"/>
        </tr>
        <tr>
            <td>Birthday:</td>
            <td><input type="text" id="birthday"/>
        </tr>
    </tbody>
 
  </table>
 
  <form action="#">
    <input type="button" value="Send parameters using GET" onclick="doRequestUsingGET();"/>   
   
    <br/><br/>
    <input type="button" value="Send parameters using POST" onclick="doRequestUsingPOST();"/>   
  </form>

  <br/>
  <h2>Server Response:</h2>

  <div id="serverResponse"></div>

</body>
</html>

 

 

GetAndPostExample.java:

package ajaxbook.chap3;

import java.io.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class GetAndPostExample extends HttpServlet {
   
    protected void processRequest(HttpServletRequest request,
            HttpServletResponse response, String method)
    throws ServletException, IOException {
       
        //Set content type of the response to text/xml
        response.setContentType("text/xml");
       
        //Get the user's input
        String firstName = request.getParameter("firstName");
        String middleName = request.getParameter("middleName");
        String birthday = request.getParameter("birthday");
       
        //Create the response text
        String responseText = "Hello " + firstName + " " + middleName
                + ". Your birthday is " + birthday + "."
                + " [Method: " + method + "]";
       
        //Write the response back to the browser
        PrintWriter out = response.getWriter();
        out.println(responseText);

        //Close the writer
        out.close();
    }
   
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        //Process the request in method processRequest
        processRequest(request, response, "GET");
    }
   
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        //Process the request in method processRequest
        processRequest(request, response, "POST");
    }
}

 

注释：为什么要把时间戳追加到目标URL中

    在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，这就会带来不好的结果。把当前时间戳追加到URL最后，就能确保URL的唯一性，从而避免浏览器缓存结果。

分享到：
| 容器启动后初始化工作
评论
发表评论

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

相关推荐

    ajax中send的用法

    一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null。 例如 ： var url = "login.jsp?user=XXX&pwd=XXX"; ...

    Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    $.get(),$.post(),$.ajax(),$.getJSON() 一，$.get(url,[data],[callback]) 说明：url为请求地址，data为请求数据的列表，callback为请求成功后的回调函数，该函数接受两个参数，第一个为服务器返回的数据，第二个...

    详谈jQuery Ajax(load,post,get,ajax)的用法

    今天看到群里面有网友们问到Jquery Ajax的(load,post,get,ajax)之间的区别，现在整理了一篇文章出来，希望可以帮到网友们，首先我们先来看一些简单的方法， 这些方法都是对jQuery.ajax()进行封装以方便我们使用的...

    minAjax.js：极简的Javascript库，用于执行AJAX POST和GET请求

    极简的Javascript库，用于执行AJAX POST和GET Request。 检查漂亮的文档 用法 入门 npm i minajax.js &lt; script type =" text/javascript " src =" ...

    AJAX使用get与post模式的区别分析

    主要介绍了AJAX使用get与post模式的区别,实例分析了Ajax中get与post的具体用法与使用区别,具有一定参考借鉴价值,需要的朋友可以参考下

    jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解

    当我们用javascript写ajax程序写得很“开心”的时候，突然有人告诉你有一种东西叫jquery，它会告诉你不直接和HttpRequest是多么的快乐，同时你再也不需要再烦恼纠结的ajax乱码问题，更幸福的是你的js代码将大大地...

    jQuery中ajax – get() 方法实例详解

    在jquery中使用get，post和ajax方法给服务器端传递数据，在上篇文章给大家分享了jquery中ajax-post()方法实例，下面通过本文继续学习jQuery中ajax – get() 方法，具体介绍请看下文。 jQuery Ajax 参考手册 实例 ...

    Jquery中$.post和$.ajax的用法小结

    简单易用的高层实现见 $.get, $.post 等。 $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。 注意： 如果你指定了 dataType 选项，请确保服务器...

    Ajax基础教程（扫描版）

    2.4 get与post 28 2.5 远程脚本 29 2.5.1 远程脚本概述 29 2.5.2 远程脚本的示例 29 2.6 如何发送简单请求 31 2.6.1 简单请求的示例 32 2.6.2 关于安全 34 2.7 dom level 3 加载和保存规约 35 2.8 dom 35 ...

    使用jQuery的ajax方法向服务器发出get和post请求的方法

    打算写个ajax系列的博文，主要是写给自己看，学习下ajax的相关知识和用法，以更好的在工作中使用ajax。 假设有个网站A，它有一个简单的输入用户名的页面，界面上有两个输入框，第一个输入框包含在一个form表单里用来...

    aAjax:一个ajax插件，支持JSONP，用法类似JQ的ajax

    介绍 一个ajax插件，包括JSONP，你可以像jQuery ajax一样使用它。 用法 包括文件： ... type : "get",//or "post" url : "xxx.php", data : {id:111, name:"lucy"}, success : function(result){ co

    原生js 封装get ,post, delete 请求的实例

    现在的项目中都在用VUE 以及react 等MVC， MVVM 框架。...POST,GET,DELETE 的请求方式。当然根据不同的公司，不同的方式。都可以自己扩展。目前这个只是针对自己所在公司而已。 function api(url,opt,methods) {

    基于jQuery的api可配置ajax包smajax.zip

    smajax，基于jQuery的api可配置ajax包。安装[removed] [removed]必须先引入 jQuery（任何版本）[removed] [removed]用法初始化请求var SmartAJAX = new smajax({ dataType: 'json' });初始化选项：POST ...

    jQuery学习笔记之Ajax用法实例详解

    简单易用的高层实现见 .get,.post 等。 .ajax()返回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回...

    php下的原生ajax请求用法实例分析

    本文实例讲述了php下的原生ajax请求用法。分享给大家供大家参考，具体如下： ... 意味着我们的浏览器不提交，通过JS就可以请求服务器。  ajax(Asynchronous Javascript...open("get/post", url, true/false); //有参数则k

    jquery+ajax实现注册实时验证实例详解

    先介绍下ajax中$.get,由于$.post用法和$.get大同小异就不再介绍了： 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。 复制代码 代码如下:$...

    超简单的jquery的AJAX用法

    包括POST,GET,AJAX 前台调用 代码如下: jQuery.post(“NewDoAjax.aspx”, { max: ‘ N ！’, name: ‘wsenmin’ }, function(data) { alert&#40;data&#41; }); jQuery.get(“NewDoAjax.aspx”, { max: ‘ B ！’, ...

Magicbox
Global site tag (gtag.js) - Google Analytics