Ajax中post和get的用法

最新推荐文章于 2021-08-05 13:35:42 发布
最新推荐文章于 2021-08-05 13:35:42 发布
阅读量95 收藏
点赞数
分类专栏： Ajax 文章标签： Ajax 浏览器 Servlet JavaScript XHTML ViewUI

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" οnclick="doRequestUsingGET();"/>   
   
    <br/><br/>
    <input type="button" value="Send parameters using POST" οnclick="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的唯一性，从而避免浏览器缓存结果。

terran_li2005
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax中POST和GET的区别
weixin_34228617的博客
09-20 408
Get和Post都是向服务器发送的一种请求，只是发送机制不同。 1. GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的。 2. 首先是"GET方式提交的数据最多只能是1024字节"，因为GET是通过URL提交数据，那么GET可提交的数据量就跟UR...
ajax-post的使用
yangsm的博客
08-24 359
只能写在open()和send()之间 <script> window.onload = function(e){ var oBtn = document.querySelector("button"); oBtn.onclick = function(ev1){ // 1.创建一个异步对象 var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ ..
原创：Ajax中get与post请求详解
redarmychen的专栏
03-29 6713
        学习ajax技术的时候,很多同学对于ajax中get与post请求总是疑问不解,为了给学员解决疑问,现将授课中对get与post的请求的总结发表于学生大本营中,希望能给你带来帮助.  一、get()和post()基本区别1.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制
ajax的Get和Post的区别
weixin_34122810的博客
08-27 104
Get方式:用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的header传送），也就是说，浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是，它会被客户端的浏览器缓存起来，那么，别人就可以从浏览器的历史记录中，读取到此客户的数据，比如帐号和密码等。因此，在某些情况下，get方法会带来严重...
Ajax中GET和POST
Yang_lan1的博客
05-03 406
get请求处理 表单提交数据 <form action="http://www.baidu.com" method="GET"> <input type="text" name="userName"><br> <input type="password" name="userPwd"><br> ...
详谈jQuery Ajax(load,post,get,ajax)的用法
10-20
下面小编就为大家带来一篇详谈jQuery Ajax(load,post,get,ajax)的用法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
AJAX使用get与post模式的区别分析
10-24
主要介绍了AJAX使用get与post模式的区别,实例分析了Ajax中get与post的具体用法与使用区别,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
01-21
当我们用javascript写ajax程序写得很“开心”的时候，突然有人告诉你有一种东西叫jquery，它会告诉你不直接和HttpRequest是多么的快乐，同时你再也不需要再烦恼纠结的ajax乱码问题，更幸福的是你的js代码将大大地...
jqueryajax的$post和$get方法共3页.pd
10-30
在学习jQuery的AJAX操作时，理解`$.post()`和`$.get()`的基本用法是至关重要的，这将帮助开发者快速实现前后端数据交互，提高网页的动态性和用户体验。通过实践和不断探索，开发者可以更好地掌握这些方法，并将其...
AJAX请求 $.post方法的使用
sunny_lin5的博客
10-21 657
AJAX请求 $.post方法的使用 使用jQuery的$.post方法可以以POST形式向服务器发起AJAX请求。$.post方法是jQuery的实用工具方法。 $.post方法语法 $.post(url,parameters,callback) 参数   url (字符串)服务器端资源地址。 paramet
ajax的post跟get区别,Ajax中post与get的区别
weixin_39742958的博客
08-05 1172
get和post都是向服务器发送一种请求，只是发送机制不同 。1. GET可以通过在请求URL上添加请求参数，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。2. get方式请求数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号密码等。在某种情况下，get方式会带来严重的安全问题。而post方式相对来说就可以避免这些问题。3. Post请求必须设置...
Ajax中post用法的demo
DcTbnk的博客
04-23 572
一.ajax_post_demo1 html <body> <h1>使用post方式向php发送请求,并且携带参数</h1> 账号 : <input type="text"><br> 密码 : <input type="password"><br> <button>请求&...
ajax中get请求的使用及注意事项
grand_brol的博客
08-17 502
使用表单提交一个get请求 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body&
$.get, $.post, $.ajax基本用法
syl2850246的博客
07-03 551
$.get(URL, callback) -> $.get(“demo.jsp”, function(data, status){           alert(data); }); $.post(URL, data, callback) -> $.post(“demo.jsp”,...
Ajax-post,Ajax-get用法
laizhixue的博客
02-05 246
controll: //ajax.post类型请求时返回值最好ActionResult public ActionResult PostSingle(String title) { Album a = new Album(); a.Title = title; return Json(a
ajax中post请求的使用及注意事项
grand_brol的博客
08-17 497
使用表单发送一个post的请求 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <bod
get和post的区别
qq_45378970的博客
10-03 243
区别详解 1. get是从服务器上获取数据，post是向服务器传送数据。 2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。 3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。 Ge
ajax学习笔记01-GET的基本使用
doulihang的博客
11-26 182
一、ajax发送get请求 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05-ajax-get</title> <!-- 1.什么是ajax ajax是与服务器交换数据并更新部分网页...
ajax学习笔记02-POST的基本使用
doulihang的博客
11-27 503
一、使用ajax发送post请求 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07-ajax-post</title> <!-- 1.什么是ajax ajax是与服务器交换数据并更新...
$.ajax中的$是什么用法
最新发布
08-20
- *1* [Jquery中$.post和$.ajax的用法小结](https://download.csdn.net/download/weixin_38538472/13032236)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值