原生态Ajax实例

<script type="text/javascript">
var xmlhttprequest;
function GetXmlHttpRequest() {
if (window.ActiveXObject) {
try
{
//适用于IE5 IE6
xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
//适用于IE7 以上版本
xmlhttprequest=new ActiveXObject("Msxml2.XMLHTTP");
}
}
if(window.XMLHttpRequest)
{
//适用于所有的浏览器
xmlhttprequest=new XMLHttpRequest();
}
else
{
alert("对不起,您的浏览器不适用于AJAX");
}
} //执行操作
function Operate() {
{ //先获取xmlhttprequest
GetXmlHttpRequest(); //POST传值 //open方法(指定数据发送方式,处理页面,是否异步)创建一个新的http请求,并指定此请求的方法、URL以及验证等信息
xmlhttprequest.open("POST", "DoOperate.ashx",true); //setRequestHeader(header, value)方法单独设定某个请求的HTTP头信息
xmlhttprequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //状态发生事件(onreadyStateChange事件是在readyState属性发生改变时触发)
xmlhttprequest.onreadystatechange=WatchChange; //发送数据
xmlhttprequest.send("id=1001&name=holyknihgt"); //GET传值【如果是POST传值需要设定RequestHeader,而Get传值不需要】
//xmlhttprequest.open("Get", "DoOperate.ashx",true); //xmlhttprequest.send(null);
} //状态监听
function WatchChange()
{
//readyState
//0:send方法还没有被调用
//1:已经调用了send方法,请求还在处理
//2:send方法已完成 整个应答已接收
//3:正在解析应答
//4:应答解析完成 //status
//200:表示交互成功
//404:NOT Found
//500:服务器内部错误
if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200)
{
//或许响应值
var result = xmlhttprequest.responseText;
//将响应值以‘,’分割
result = result.split(',');
//给id为resultMsg的控件赋值
document.getElementById("resultMsg").innerHTML = "ID:"+result[0]+" Name:"+result[1];
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="resultMsg"></div>
<input type="button" value="调用AJAX" onclick="Operate();" />
</div>
</form>
</body>
</html>
上一篇:bootstrap table 复选框选中后,翻页不影响已选中的复选框


下一篇:vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控