var postContent ="name=" + encodeURIComponent("xiaocheng") + "&email=" + encodeURIComponent("xiaochengf_21@yahoo.com.cn");
xmlhttp.open("POST", "somepage", true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//xmlhttp.setRequestHeader("Content-Type", "text/xml"); //如果发送的是一个xml文件
xmlhttp.send(postContent);
Ajax的post方法的使用.
刚开始学Ajax,看到很多网上的代码都用Get方法提交参数,Tomcat默认ISO编码实在是让人头痛 ,对付乱码我都是用过滤器做字符编码过滤的,Get方法过滤器监听不到,所以我一直喜欢使用Post方法,下面对Ajax Get和Post方法做一对比
GET:
复制代码 代码如下:
<mce:script type="text/javascript"><!--
var xmlHttpRequest;
function createXMLHttpRequest(){
try
{
// Firefox, Opera 8.0+, Safari
xmlHttpRequest=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
}
//发送请求函数
function sendRequestPost(url,param){
createXMLHttpRequest();
xmlHttpRequest.open("GET",url+"?"+param,true);
xmlHttpRequest.onreadystatechange = processResponse;
}
//处理返回信息函数
function processResponse(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var res = xmlHttpRequest.responseText;
window.alert(res);
}else{
window.alert("请求页面异常");
}
}
}
//身份验证函数
function userCheck(){
var userName = document.loginForm.username.value;
var psw = document.loginForm.password.value;
if(userName == ""){
window.alert("用户名不能为空");
document.loginForm.username.focus();
return false;
}
else{
var url = "Servlet/userLogin_do";
var param = "userName="+userName+"&psw="+psw;
sendRequestPost(url,param);
}
}
// --></mce:script>
<mce:script type="text/javascript"><!--
var xmlHttpRequest;
function createXMLHttpRequest(){
try
{
// Firefox, Opera 8.0+, Safari
xmlHttpRequest=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
}
//发送请求函数
function sendRequestPost(url,param){
createXMLHttpRequest();
xmlHttpRequest.open("GET",url+"?"+param,true);
xmlHttpRequest.onreadystatechange = processResponse;
}
//处理返回信息函数
function processResponse(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var res = xmlHttpRequest.responseText;
window.alert(res);
}else{
window.alert("请求页面异常");
}
}
}
//身份验证函数
function userCheck(){
var userName = document.loginForm.username.value;
var psw = document.loginForm.password.value;
if(userName == ""){
window.alert("用户名不能为空");
document.loginForm.username.focus();
return false;
}
else{
var url = "Servlet/userLogin_do";
var param = "userName="+userName+"&psw="+psw;
sendRequestPost(url,param);
}
}
// --></mce:script>
POST:
复制代码 代码如下:
<mce:script type="text/javascript"><!--
var xmlHttpRequest;
function createXMLHttpRequest(){
try
{
// Firefox, Opera 8.0+, Safari
xmlHttpRequest=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
}
//发送请求函数
function sendRequestPost(url,param){
createXMLHttpRequest();
xmlHttpRequest.open("POST",url,true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-
urlencoded");
xmlHttpRequest.onreadystatechange = processResponse;
xmlHttpRequest.send(param);
}
//处理返回信息函数
function processResponse(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var res = xmlHttpRequest.responseText;
window.alert(res);
}else{
window.alert("请求页面异常");
}
}
}
//身份验证函数
function userCheck(){
var userName = document.loginForm.username.value;
var psw = document.loginForm.password.value;
if(userName == ""){
window.alert("用户名不能为空");
document.loginForm.username.focus();
return false;
}
else{
//var url = "Servlet/userLogin_do?userName="+userName+"&psw="+psw;
var url = "Servlet/userLogin_do";
var param = "userName="+userName+"&psw="+psw;
sendRequestPost(url,param);
}
}
// --></mce:script>
<mce:script type="text/javascript"><!--
var xmlHttpRequest;
function createXMLHttpRequest(){
try
{
// Firefox, Opera 8.0+, Safari
xmlHttpRequest=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
}
//发送请求函数
function sendRequestPost(url,param){
createXMLHttpRequest();
xmlHttpRequest.open("POST",url,true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-
form-urlencoded");
xmlHttpRequest.onreadystatechange = processResponse;
xmlHttpRequest.send(param);
}
//处理返回信息函数
function processResponse(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var res = xmlHttpRequest.responseText;
window.alert(res);
}else{
window.alert("请求页面异常");
}
}
}
//身份验证函数
function userCheck(){
var userName = document.loginForm.username.value;
var psw = document.loginForm.password.value;
if(userName == ""){
window.alert("用户名不能为空");
document.loginForm.username.focus();
return false;
}
else{
//var url = "Servlet/userLogin_do?
userName="+userName+"&psw="+psw;
var url = "Servlet/userLogin_do";
var param = "userName="+userName+"&psw="+psw;
sendRequestPost(url,param);
}
}
// --></mce:script>
可以发现,GET方法根据地址栏解析参数,post根据sendRequestPost(url,param);中的param字符串解析参数,重要的是POST方法中需要添加在open();方法后需要添加xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");这句代码,不知道为什么,初学,加了就能传递参数了,日后研究。