JQAjax.html:
<title></title>
<script src="../js/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function() {
$("#btnJQGetDate").click(function() {
//JSON:[3,4,6,{id:3,uname:34,data:[1,4,5]},45]
//发送异步请求
//第一个参数:URL地址,第二个参数是数据,可以是urlencode格式也可以是json格式数据
//最后一个参数是请求成功之后的事件响应方法。接受一个参数,参数就是后天返回的响应内容
//$.get("GetDate.ashx","id=3&n=dddd", function(data) {
// alert(data);
//});
//$.post("GetDate.ashx", "id=3&n=dddd", function (data) {
// alert(data);
//});
//data:返回数据的格式是json的。
$.getJSON("GetDate4Json.ashx", "id=3&n=dddd", function(data) {
alert(data.id);
alert(data.n);
});
});
});
</script>
</head>
<body>
<input type="button" id="btnJQGetDate" value="JQGetDate"/>
</body>
GetDate.ashx.cs:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//Thread.Sleep(2000);
context.Response.Write(DateTime.Now.ToString());
}
GetDate4Json.ashx.cs:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";
//context.Response.Write("{key:22,Time:'2013-9-17 16:45:41'}");
int id = int.Parse(context.Request["id"] ?? "0")+1;
string n = context.Request["n"] + "eeeeeee";
//自己拼接json必须都是双引号。
//StringBuilder sb =new StringBuilder();
//sb.Append("{");
//sb.AppendFormat("\"id\":{0},\"n\":\"{1}\"", id, n);
//sb.Append("}");
//context.Response.Write(sb.ToString());
System.Web.Script.Serialization.JavaScriptSerializer javaScriptSerializer=new JavaScriptSerializer();
//这个方法。可以把一个对象直接转成json格式字符串。
string strJson= javaScriptSerializer.Serialize(new {id=id,n=n});
//var obj = new {Name = "shit", Age = 18, UName = "红太阳!"};
context.Response.Write(strJson);
}
XmlRequestDemo.html:
<script src="../../js/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
//我们自己封装的异步方法
$("#btnMyAjax").click(function() {
myAjax("get", "GetDate.ashx", "u=ssss&id=3", function(data) {
alert(data);
});
});
$("#btnGetDate").unbind("click");
$("#btnGetDate").bind("click", function () {
//悄悄发送一个请求道后台,获取当前的后台的时间
//创建异步请求对象
var xhr;
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();//ie7+,chrome/ff/opera.....
} else {
//兼容ie5,ie6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//--------------------Get请求的方式--------------------
//设置当前请求的地址设置当前的请求方法。
//get请求在url地址后面添加参数
//xhr.open("Get", "GetDate.ashx?id=2");
//真正的发送请求
//xhr.send();
//----------------------------------------------------
//--------------------Post请求的方式--------------------
xhr.open("Post", "GetDate.ashx");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("id=3&snamd=sss");
//----------------------------------------------------------
//监控当前xhr对象的 状态。
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
});
});
function myAjax(method, url, param, success) {
//document.getElementById("ss");
//window.on
var xhr;
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();//ie7+,chrome/ff/opera.....
} else {
//兼容ie5,ie6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (method.toLowerCase() == "get") {
url = url + "?" + param;
}
xhr.open(method, url, true);
if (method.toLowerCase() == "post") {
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(param);
} else {
xhr.send();
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
success(xhr.responseText);
}
};
}
</script>
</head>
<body>
<input type="button" id="btnGetDate" value="获取时间" />
<hr />
<input type="button" id="btnMyAjax" value="MyAjax获取时间" />
</body>