xmlhttp对象好用,但是一个页面如果有很多次调用的话,写起来也很麻烦,所以,这里简单封装了一下,可以作为对象来调用
ajax.js:
function ajaxsz() {
var xmlHttp;
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
this.rep = xmlHttp;
this.sendData = function(method,URL,asy,fun) {
if (asy)//异步
{
xmlHttp.onreadystatechange = function(){//此处检测状态,知道符合要求时,才会执行事件
if(xmlHttp.readyState==4 && xmlHttp.status == 200){
fun(xmlHttp);
}
}
if(method == "POST") {
xmlHttp.open("POST",URL,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(null);
}
else {
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
}
else {
if(method == "POST") {
xmlHttp.open("POST",URL,false);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(null);
}
else {
xmlHttp.open("GET",url,false);
xmlHttp.send(null);
}
return xmlHttp.responseText;
}
}
}
服务器端简单处理:
protected void Page_Load(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(Request["UserName"]))
{
Response.Write("您好!" + Request["UserName"]);
}
else
{
Response.Write("您好!");
}
}
调用页面:
<html>
<head>
<title>Ajax测试页</title>
<script type="text/javascript" src="js/ajax.js" language="javascript"></script>
<script language="javascript" type="text/javascript">
function getStr(){
var userName = document.getElementById("Text1").value;
var myajax = new ajaxsz();
myajax.sendData("POST","http://localhost:5964/GetData/GetString.aspx?UserName=" + userName,true,aa);
}
function aa(xmlhttp)
{
document.getElementById("mystr").innerHTML = xmlhttp.responseText;
}
</script>
</head>
<body style="font-size: 14px" text="#6600ff">
<div style="margin:0px auto">
返回字符串<br />
<br />
<div id="mystr" style="width: 121px; height: 34px">
</div>
输入您的姓名<input id="Text1" style="width: 125px" type="text" />
<input id="Button1" type="button" value="GetString" οnclick="getStr()" />
</div>
</body>
</html>