前端页面——AJAX是个什么样的传输机

前篇文章我们介绍了一下级联查询，可是有时候我们需要在页面和后台或页面与页面之间传值，这样我们就需要用到一个非常重要的技术——AJAX，想必大家都听说过吧，今天我们来介绍一下AJAX，看看它是如何扮演一个传输机的角色的（我们使用的还是MVC）。

- 1概念

我们都知道AJAX有两种传输策略，那就是同步和异步，那么什么是同步，什么是异步呢，两者有什么不同呢？

同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕

举个例子：同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到下班才去吃饭。

- 2实现方式

其实AJAX实现同步和异步很简单，只要设置async的属性值就行，默认的设置值为true，这种情况为异步方式，就是说当ajax发送请求后，在等待server端返回的这个过程中，前台会继续 执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程 和ajax块后面的脚本（另一个线程），两个线程互不影响

下面我们来看一段JS代码

 <script type="text/javascript">
       // 当把asyn设为false时，这时ajax的请求时同步的，也就是说，这个时候ajax块发出请求后，他会等待在function1（）这个地方，不会去执行function2()，直到function1()部分执行完毕。
       // 当把asyn设为true时，这时ajax的请求时异步的，当ajax块发出请求后，他将停留function1()，等待server端的返回，但同时（在这个等待过程中），前台会去执行function2()
       function addclick() {//点击触发addclick事件
               //用jquery获取id为txtuserName的页面标记的value，存放在txtuserName变量里
                var txtuserName = $("#txtuserName").val();
                var txtuserPWD = $("#txtuserPWD").val();

                $.ajax({
                    type: "POST",  //ajax的方式为post(get方式对传送数据长度有限制)
                    url: "/AjaxRequest/AddUser.ashx", //一般处理程序页面AddUser.ashx(在2中会写出该页面内容)
                    dataType: "json",   //数据传回的格式为json
                    data: { "txtuserName ": txtuserName,"txtuserPWD":txtuserPWD },
                    //或者data:  "txtuserName " + txtuserName + "&txtuserPWD" + txtuserPWD,
                    //要传送的数据键值对adduserName为键（方便2中的文件用此名称接受数据）txtuserName为值（要传递的变量，例如用户名）
                   success: function (result) {   
                       function1()     
                   }
               });
               function2();
            }

       );
           function function1() {
               alert('function1');
           }
           function function2() {
               alert('function2');
           }
    })
}
</script>

我们的JS代码写完后，如何在后台接到页面传来的数据呢。

String roundCoude = Request["txtuserName"];
String roundCoude = Request["txtuserPWD"];

- 3总结

今天我们学习了AJAX如何将数据从页面传到后台，以及后台如何接收。我然我们也知道AJAX两种不同的传输方式，也是AJAX的核心，那就是同步和异步，我们在实际应用中一定要根据自己的需求来合理的选择同步还是异步。在以后的学习中，我们还会用到AJAX，本次只介绍了其post传值的方式，其实他还有get方式传值，大家可以上网查查，以后再与大家分享。