Ajax异步的JavaScript和XML,异步相对于同步而言,在程序当中什么叫同步,什么叫异步了?
假设场景:小明一个人在家,然后突然肚子饿了,这个时候他想吃饭,但是发现家里没有了柴火,那么小明需要上山砍柴,然后再做饭,对于这种情况我们称之为同步,按照步骤做事,那么什么叫异步了,小明可以去柴火场买回柴火来做饭,这样就不必要自己去砍柴了,这种方式被称为异步,异步对程序而言就是另起线程,不干扰主线程,通过其他线程来帮我们做事,上面解释是个人理解,如果有其他更容易理解的,麻烦帮忙指正。
页面异步请求(客户端)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
/* 引入Jquery库文件*/
〈script type="text/javascript" src="/Script/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
//给ReuqestServices按钮邦定点击事件
$("#ReuqestServices").click(function(){
//构建模板
var tableStr="<table border='1'>";
tableStr+="<tr><td>编号</td><td>姓名</td></tr>";
//异步请求
$.ajax({
url:"/ResponseData.ashx", //指定请求路径
type:"GET", //指定请求方式
dataType:"JSON", //指定数据格式
//成功回调函数,data就是存储服务端返回的数据
success:function(data)
{
$("#ShowTable").empty(); //清空原来的span标签
//迭代数据
for(var i=0;i<data.length;i++)
{
//动态拼HTML
tableStr+="<tr><td>"+data[i].StudentId+"</td><td>"
+data[i].StudentName+"</td></tr>";
}
tableStr+="</table>";
//把tableStr邦定到ShowTable元素上,html类似于innerHtml方法
//前面文章中有介绍
$("#ShowTable").html(tableStr);
}
});
});
});
</script>
</head>
<body>
<span id="ShowTable"></span>
<button id="ReuqestServices">请求服务端,渲染Table表格</button>
</body>
</html>
服务端处理请求,返回结果(服务端)
public class ResponseData:IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType="text/plain";
//组装集合数据,返回给客户端
List<Person> pList = new List<Person>(){
new Person(){StudentId="001",StudentName="Rotu"},
new Person(){StudentId="002",StudentName="Jack"},
};
//将对象转换成为JSON字符串,返回给客户端
context.Response.Write(new JavaScriptSerializer().Serialize(pList));
}
//组装实体模型
public class Person
{
public string StudentId{get;set;}
public string StudentName{get;set;}
}
public bool IsRenusable
{
get
{
return false;
}
}
}
备注:处理请求的是一般处理程序