Ajax异步的JavaScript和XML,异步相对于同步而言,在程序当中什么叫同步,什么叫异步了?
    假设场景:小明一个人在家,然后突然肚子饿了,这个时候他想吃饭,但是发现家里没有了柴火,那么小明需要上山砍柴,然后再做饭,对于这种情况我们称之为同步,按照步骤做事,那么什么叫异步了,小明可以去柴火场买回柴火来做饭,这样就不必要自己去砍柴了,这种方式被称为异步,异步对程序而言就是另起线程,不干扰主线程,通过其他线程来帮我们做事,上面解释是个人理解,如果有其他更容易理解的,麻烦帮忙指正。

    页面异步请求(客户端)

    1. <!DOCTYPE html>
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    5. <title></title>
    6. /* 引入Jquery库文件*/
    7. script type="text/javascript" src="/Script/jquery-1.10.2.min.js"></script>
    8. <script type="text/javascript">
    9. $(function(){
    10. //给ReuqestServices按钮邦定点击事件
    11. $("#ReuqestServices").click(function(){
    12. //构建模板
    13. var tableStr="<table border='1'>";
    14. tableStr+="<tr><td>编号</td><td>姓名</td></tr>";
    15. //异步请求
    16. $.ajax({
    17. url:"/ResponseData.ashx", //指定请求路径
    18. type:"GET", //指定请求方式
    19. dataType:"JSON", //指定数据格式
    20. //成功回调函数,data就是存储服务端返回的数据
    21. success:function(data)
    22. {
    23. $("#ShowTable").empty(); //清空原来的span标签
    24. //迭代数据
    25. for(var i=0;i<data.length;i++)
    26. {
    27. //动态拼HTML
    28. tableStr+="<tr><td>"+data[i].StudentId+"</td><td>"
    29. +data[i].StudentName+"</td></tr>";
    30. }
    31. tableStr+="</table>";
    32. //把tableStr邦定到ShowTable元素上,html类似于innerHtml方法
    33. //前面文章中有介绍
    34. $("#ShowTable").html(tableStr);
    35. }
    36. });
    37. });
    38. });
    39. </script>
    40. </head>
    41. <body>
    42. <span id="ShowTable"></span>
    43. <button id="ReuqestServices">请求服务端,渲染Table表格</button>
    44. </body>
    45. </html>

    服务端处理请求,返回结果(服务端)

    1. public class ResponseData:IHttpHandler
    2. {
    3. public void ProcessRequest(HttpContext context)
    4. {
    5. context.Response.ContentType="text/plain";
    6. //组装集合数据,返回给客户端
    7. List<Person> pList = new List<Person>(){
    8. new Person(){StudentId="001",StudentName="Rotu"},
    9. new Person(){StudentId="002",StudentName="Jack"},
    10. };
    11. //将对象转换成为JSON字符串,返回给客户端
    12. context.Response.Write(new JavaScriptSerializer().Serialize(pList));
    13. }
    14. //组装实体模型
    15. public class Person
    16. {
    17. public string StudentId{get;set;}
    18. public string StudentName{get;set;}
    19. }
    20. public bool IsRenusable
    21. {
    22. get
    23. {
    24. return false;
    25. }
    26. }
    27. }
    28. 备注:处理请求的是一般处理程序