POST提交
原生js实现
<script>
var oStr = '';
var postData = {};
var oAjax = null;
//post提交的数据
postData = {"name1":"value1","name2":"value2"};
//这里需要将json数据转成post能够进行提交的字符串 name1=value1&name2=value2格式
postData = (function(value){
for(var key in value){
oStr += key+"="+value[key]+"&";
};
return oStr;
}(postData));
//这里进行HTTP请求
try{
oAjax = new XMLHttpRequest();
}catch(e){
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
};
//post方式打开文件 x='+Math.random()为了解决浏览器缓存问题 true是否同步和异步
oAjax.open('post','服务器地址?x='+Math.random(),true);
//post相比get方式提交多了个这个
oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//post发送数据
oAjax.send(postData);
oAjax.onreadystatechange = function(){
//当状态为4的时候,执行以下操作
if(oAjax.readyState == 4){
try{
alert(oAjax.responseText);
}catch(e){
alert('你访问的页面出错了');
};
};
};
</script>
jquery实现
/*$.post(URL,data,callback);*/
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("地址",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("数据:" + data + "\n状态:" + status);
});
});
});
</script>
GET提交
js get提交
var xmlHttpRequest = null;
//1、创建XMLHttpRequest对象
if (window.XMLHttpRequest) {//新版本返回为TRUE
xmlHttpRequest = new XMLHttpRequest();
} else {
xmlHttpRequest = new ActiveXObject(
"Microsoft.XMLHTTF");
}
//2、设置回调函数
xmlHttpRequest.onreadystatechange = callBack;
var username = $("#username").val();
//3、初始化XMLHttpRequest组件
var url = "UserServlet?username=" + username;
xmlHttpRequest.open("GET", url, true);
//4、发送请求
xmlHttpRequest.send(null);
//回调函数callBack的编写
function callBack() {
if (xmlHttpRequest.readyState == 4
&& xmlHttpRequest.status == 200) {
var data = xmlHttpRequest.responseText;
if (data == "true") {
$("#errMsg").html("用户名已被注册");
} else {
$("#errMsg").html("用户可以注册");
}
}
}
});
jquery实现
/*$.get(URL,callback);*/
<script>
$(document).ready(function(){
$("button").click(function(){
/*可以在地址后面跟参数就行了*/
$.get("地址",function(data,status){
alert("数据:" + data + "\n状态:" + status);
});
});
});
</script>