js 之 Post发送请求
// ajax 对象
function ajaxObject() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
return xmlHttp;
}
// ajax post请求:
function ajaxPost ( url , data , fnSucceed , fnFail , fnLoading ) {
var ajax = ajaxObject();
ajax.open( "post" , url , true );
ajax.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );
ajax.onreadystatechange = function () {
if( ajax.readyState == 4 ) {
if( ajax.status == 200 ) {
fnSucceed( ajax.responseText );
}
else {
fnFail( "HTTP请求错误!错误码:"+ajax.status );
}
}
else {
fnLoading();
}
}
ajax.send( data );
}
或者使用jQuery的$.post方法可以以POST形式向服务器发起AJAX请求。$.post方法是jQuery的实用工具方法。
$.post方法语法
$.post(url,parameters,callback) | |
---|---|
参数 | |
url | (字符串)服务器端资源地址。 |
parameter | (对象)需要传递到服务器端的参数。 参数形式为“键/值”。 |
callback | (函数)在请求完成时被调用。该函数参数依次为响应体和状态。 |
返回值 | XHR实例 |
实例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function () {
$('#selectNum').change(function () {
var idValue = $(this).val();
//采用POST方式调用服务
$.post('Server.aspx', { id: idValue }, function (text, status) { alert(text); });
})
})
</script>
</head>
<body>
<select id="selectNum">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
</html>