post请求步骤与前篇的get请求步骤差别不大,只是增加了

 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

这里直接上代码:

在web\02_testpost 分别创建两个文件posttest.jsp和test.js

<%@ page language="java"  pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

     <script type="text/javascript" src="./test.js"></script>

  </head>

  <body>

     <form action="" enctype="application/x-www-form-urlencoded">

          <input type="button" name="ok" id="ok" value="测试服务器连接">

      </form>

  </body>

</html>
//当页面加载完毕之后，执行以下代码

window.onload = function(){

    document.getElementById("ok").onclick = function(){

        /*

         * 1    创建XMLHttpRequest对象

         */

         var xhr = ajaxFunction();

        /*

         * 2    服务器向浏览器响应请求

         *

         * readyState 属性表示Ajax请求的当前状态。它的值用数字代表。

                0 代表未初始化。 还没有调用 open 方法

                1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用

                2 代表已加载完毕。send 已被调用。请求已经开始

                3 代表交互中。服务器正在发送响应

                4 代表完成。响应发送完毕

            常用状态码及其含义：

                404 没找到页面(not found)

                403 禁止访问(forbidden)

                500 内部服务器出错(internal service error)

                200 一切正常(ok)

                304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )

         */

         xhr.onreadystatechange = function(){

             alert(xhr.readyState);

            //alert(xhr.status);

            if(xhr.readyState==4){

                if(xhr.status==200||xhr.status==304){

                    var data = xhr.responseText;

                    alert(data);

                }

            }

         }

        /*

         * 3    浏览器与服务器建立连接

         *

         * xhr.open(method, url, asynch);

         *         * 与服务器建立连接使用

         *         * method：请求类型，类似 “GET”或”POST”的字符串。

         *         * url：路径字符串，指向你所请求的服务器上的那个文件。请求路径

         *         * asynch：表示请求是否要异步传输，默认值为true(异步)。

         */

         xhr.open("POST","../testServlet?timeStamp="+new Date().getTime()+"&c=18",true);

         //如果是POST请求方式，设置请求首部信息

         xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        /*

         * 4    浏览器向服务器发送请求

         *

         *     send()方法：

         *         * 如果浏览器请求的类型为GET类型时，通过send()方法发送请求数据，服务器接收不到

         *         * 如果浏览器请求的类型为POST类型时，通过send()方法发送请求数据，服务器可以接收

         */

         xhr.send("a=6&b=9");        //xhr.send(null);

    }

}

function ajaxFunction(){

   var xmlHttp;

   try{ // Firefox, Opera 8.0+, Safari

        xmlHttp=new XMLHttpRequest();

    }

    catch (e){

       try{// Internet Explorer

             xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

          }

        catch (e){

          try{

             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

          }

          catch (e){}

          }

    }

    return xmlHttp;

 }
package com.servlet;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

/**

 * Created by huangyichun on 2016/12/7.

 */

@WebServlet(name = "testServlet",urlPatterns = "/testServlet")

public class TestServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("a=" + request.getParameter("a"));

        System.out.println("c=" + request.getParameter("c"));

        PrintWriter out = response.getWriter();

        out.println("get connection server success");

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("connection...");

        System.out.println("a=" + request.getParameter("a"));

        System.out.println("c=" + request.getParameter("c"));

        PrintWriter out = response.getWriter();

        out.println("get connection server success");

    }

}

js实现ajax的post请求步骤的更多相关文章

  1. 使用js实现ajax的get请求步骤

    (以下内容非原创,视频整合得来的) 1.创建XMLHttpRequest对象 2.浏览器与服务器建立连接 3.浏览器向服务器发送请求 4.服务器向浏览器响应请求 下面给出一个实例 1.创建一个test ...

  2. 原生JS实现ajax 发送post请求

    1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...

  3. NodeJ node.js Jquery Ajax 跨域请求

    Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...

  4. vue.js的ajax和jsonp请求

    首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax ...

  5. Ajax引擎：ajax请求步骤详细代码

    说起AJAX,可能是很多同学在很多地方都看到过,各大招聘网站上对于WEB前端和PHP程序员的技能要求清单中也是必不可少的一项.但是,ajax请求步骤详细代码以及说明却比较少见到 什么是AJAX引擎? ...

  6. 用原生JS实现AJAX和JSONP

    前端开发在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的.其实,原生 ...

  7. [代码]JS原生Ajax,GET和POST

    javascript/js的ajax的GET请求: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ ...

  8. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

  9. 用JS实现Ajax请求

    AJAX核心(XMLHttpRequest) 其实AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象.所有的异步交互都是使用XMLHttpServlet对象完成的. ...

随机推荐

  1. #DP# ----- OpenJudge数字组合

    OpenJudge 2985:数字组合 总时间限制:1000ms  内存限制: 65536kB 描述 有n个正整数,找出其中和为t(t也是正整数)的可能的组合方式.如:n=5,5个数分别为1,2,3, ...

  2. Spring3.2AOP实现需要添加的三个包

    Spring3.2AOP实现需要添加的三个包 http://down.51cto.com/data/1001395 http://down.51cto.com/data/519542

  3. 数据挖掘学习笔记--AdaBoost算法(一)

    声明: 这篇笔记是自己对AdaBoost原理的一些理解,如果有错,还望指正,俯谢- 背景: AdaBoost算法,这个算法思路简单,但是论文真是各种晦涩啊-,以下是自己看了A Short Introd ...

  4. Biztalk AS2开发经验总结

    一.    准备证书    4 1.    升级win2008 R2证书服务    4 2.    申请证书    6 二.    配置证书    13 1.    为AS2配置证书    13 2. ...

  5. 写给Java开发者的Node.JS简介

    前言 今天上推特看见这篇文章,点进去发现是新货. 正好最近想入Node的坑,又有一些Java基础,所以希望翻译出来给大家,同时也让自己加深理解. 才疏学浅,如有不妥之处请指正. 原文链接:Node f ...

  6. Codeforces Round #396 (Div. 2)

    C. Mahmoud and a Message time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  7. Swift 面向对象解析（二）

    接着上面一篇说的内容: 一 继承: 苹果继承与水果,苹果是水果的子类,则苹果是一种特殊的水果:这就是继承的关系,这个我们学OC的时候相信也都理解了,就不再描述定义了,下面的就叫继承: class ZX ...

  8. 在内存充足时malloc函数分配内存失败的原因及解决

    昨天在修改自己的代码的时候,碰到了malloc函数内存分配失败,上网翻了翻,一个很可能的原因是之前的代码出现了越界操作,导致malloc分配函数所涉及的一些信息被破坏.在这个思想的指导下,今天又是郁闷 ...

  9. UU农场平台开发 UU农场拆复利系统

    UU农场平台开发 UU农场拆复利系统今年比较新的一款游戏,类似于QQ农场,但又加入了很多新型的互联网理财模式!UU农场平台开发 UU农场拆复利系统.UU农场开发.UU农场游戏平台开发.UU农场平台开发 ...

  10. AWT与Swing的区别

    AWT 是Abstract Window ToolKit (抽象窗口工具包)的缩写,这个工具包提供了一套与本地图形界面进行交互的接口.AWT 中的图形函数与操作系统所提供的图形函数之间有着一一对应的关 ...