<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>This is my JSP page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
div{
border: 1px solid red;
width: 400px;
height: 300px;
}
</style>
</head>

<body>
<input type="button" value="Ajax" onclick="testAjax()">
<div id="msg"></div>
</body>
<script type="text/javascript">

function testAjax(){
//document.getElementById("msg").innerHTML = "加载中...";
//id;
var request;
//创建 request对象
if(window.XMLHttpRequest){ //兼容性
request = new XMLHttpRequest();
}else if(window.ActiveXObject){ //针对IE
request = new ActiveXObject("Msxml2.XMLHTTP");
}

//写监听 去check request的状态
request.onreadystatechange = function(){
//
//console.log(request.readyState);
if(request.readyState == 4){
//得到 后台写出的数据

//当加载成功以后
if(request.status == 200){
//得到的的是一个json字符串
var data = request.responseText;
//将json字符串转换为json对象
eval("data = "+data);
document.getElementById("msg").innerHTML = data.password;
}else if(request.status == 404){
document.getElementById("msg").innerHTML = "资源没有找到";
}else if(request.status == 500){
document.getElementById("msg").innerHTML = "服务器错误";
}

}else{
document.getElementById("msg").innerHTML = "<img src=\"images/loading.gif\" />";
}
};

//打开请求
//如果在 地址栏上面 的参数 的值中包含 # 应该将其编码 然后在传递
request.open("post", "ajax/ajaxController?name="+encodeURIComponent("lisi#123")+"&d="+new Date().getTime());
//encodeURIComponent(uriComponent)
//发送数据
//如果没有数据 则写null 不然 其他浏览器可能会报错

//如果在 send方法中传参数 则一定要设置 请求头信息中的 Content-Type 为 application/x-www-form-urlencoded
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

//如果是 post传参 他和 参数的组织方式 是有关系的
request.send("username=lisi#123&age=123");
}

</script>
</html>

ajax的post请求方式的更多相关文章

  1. AJAX中的请求方式以及同步异步的区别

    AJAX中的请求方式以及同步异步的区别请求方式,分为GET与POST: GET 最为常见的HTTP请求,普通上网浏览页面就是GET.GET方式的参数请求直接跟在URL后,以问号开始.(JS中用wind ...

  2. jQuery中的Ajax几种请求方式

    1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (M ...

  3. 利用Ajax改变发送请求方式

    由于测试的时候需要模拟Head请求,解决办法:先访问要请求的站点,然后在浏览器的控制台下执行如下代码,请求方式就为参数给的值: var xmlHttp; if (window.ActiveXObjec ...

  4. ajax使用jsonp请求方式

    /* //简写形式,效果相同 $.getJSON("http://app.example.com/base/json.do?sid=1494&busiId=101&jsonp ...

  5. 4种常用的Ajax请求方式

    在jQuery中,AJAX常见的请求方式主要有一下4种: 1.$.ajax()返回其创建的 XMLHttpRequest 对象 $.ajax() 只有一个参数:参数key/value对象,包含各配置及 ...

  6. Ajax学习系列——jQuery中Ajax的请求方式

    在jQuery中,Ajax常见的请求方式主要有4种. 1.$.ajax()返回其创建的XMLHttpRequest对象. $.ajax({ type:"POST", content ...

  7. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

  8. JQuery书写Ajax的几种方式?

    1 $.ajax({ type: "Post", //请求方式 ("POST" 或 "GET"), 默认为 "GET" ...

  9. jquery的ajax和原始的ajax这两种方式的使用方法

    jquery的ajax是对原始的ajax进行的封装,方便用户的使用.下面用代码分别举例各自的使用方式. jquery的ajax发送和接收xml数据格式. $.ajax({ type: "PU ...

随机推荐

  1. vue router动态路由

    <div id="#app"> <router-link to="/user/header">路由1</router-link&g ...

  2. vue-cli脚手架目录讲解

    build目录 config目录 是webpack配置相关的 node-modules目录 是我们用npm install 安装的依赖代码库 src目录 是我们项目的源码(我们开发的所有项目文件都在s ...

  3. Python itertools.combinations 和 itertools.permutations 等价代码实现

    最近编程时经常要用到排序组合的代码,想当年还抱着一些情况买了一本<组合数学>,不过现在这货也不知道被自己放哪里了,估计不会是垫桌子腿了吧. 由于去年去东北大学考博面试的时候遇到过可能涉及排 ...

  4. JS字符串的问题

    首先,搞了好几个小时,头都大了,原来出在字符串问题上. 具体如下: 今天做Yii,遇到用JQuery 的AJAX方法做注册验证,把传回来的字符串与textField中的比较,发现相等,但是就是不出结果 ...

  5. C# 空合并操作符（??）不可重载？其实有黑科技可以间接重载！

    ?? 操作符叫做 null-coalescing operator,即 null 合并运算符.如果此运算符的左操作数不为 null,则此运算符将返回左操作数:否则返回右操作数. 在微软的官方 C# 文 ...

  6. cobbler装机错误--Failed to create kernel channel,-22

    最近使用cobbler安装GPU的机器遇到了一个错误:Failed to create kernel channel,-22 经过各种搜索发现是英伟达的显卡与centos7的默认显卡驱动冲突导致. 网 ...

  7. wpf 客户端【JDAgent桌面助手】业余开发的终于完工了。。晒晒截图

    目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...

  8. std::function与std::bind 函数指针

    function模板类和bind模板函数,使用它们可以实现类似函数指针的功能,但却却比函数指针更加灵活,特别是函数指向类 的非静态成员函数时. std::function可以绑定到全局函数/类静态成员 ...

  9. 自动下载google reader里面的星标文章

    1. google reader马上就要关闭了,最后一次看看俺的浏览记录吧 最近 30 天的统计信息 全部订阅: 367 已读条目: 151 已点击的条目:41 个 加星标条目: 16 已发电子邮件条 ...

  10. 显示Deprecated: Assigning the return value of new by reference is deprecated in解决办法

    很多朋友的php程序当php的版本升级到5.3以后,会出现”Deprecated: Assigning the return value of new by reference is deprecat ...