WCF+AJAX最佳实践

本文是基于Frank Xu的一个webcast上的串并总结，图片等都截至视频，谨致谢.

路线图

WCF+AJAX最佳实践

什么是WCF

Windows Communication Foundation是MS为构建面向服务的应用提供的分布式通信编程框架，是.net framework的重要组成部分,集成了多项微软的分布式技术

WCF+AJAX最佳实践

什么是Ajax

Asynchronous JavaScript and XML,即异步JavaScript和XML,基于JavaScript和HTTP请求，其本质原理就是利用XMLHttpRequest对象来直接与服务器进行通信

WCF+AJAX最佳实践

将以下内容复制进一个文本编辑器，然后保存在你的一个web容器中，并在同级目录下新建一个data.txt的文件，然后运行，就进行了一次Ajax调用的操作了。see, it easy, right?

<!DOCTYPE html>
<html>
<head>
    <title>纯AJAX例子：读取数据</title>
</head>
<body>
    <script type="text/javascript">
    function ajaxCall()
     {
        var xmlHttp;         
        try{// Firefox, Opera 8.0+, Safari
            xmlHttp=new XMLHttpRequest();//实例化XMLHttpRequest对象
        }catch (e){
          // Internet Explorer 5+
            try{
                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e){
                try{
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }catch (e){
                     alert("浏览器不支持AJAX！");
                     return false;
                }
            }
        }
        
        //绑定数据处理函数。
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4){
                if (xmlHttp.status == 200){
                    document.getElementById('txtResult').innerHTML = document.getElementById('txtUsername').value + xmlHttp.responseText;
                } else {
                    alert('请求出错.');
                    // there was a problem with the request,
                    // for example the response may be a 404 (Not Found)
                    // or 500 (Internal Server Error) response codes
                }                 
            }
        }
        xmlHttp.open("GET","data.txt",true);//异步请求数据
        xmlHttp.send(null);
    }
    </script>

    <form style="text-align:left">
        姓名: <input type="text" id="txtUsername"  style="width:400px;" />
        <br />
        测试:<input type="button" id="btn"   value="测试" onclick="ajaxCall();" style="width:400px;" />
        <br />
        结果: <textarea id="txtResult" style="width:400px;"></textarea>
    </form>
</body>
</html>

PureAjaxSample