AJAX

异步请求:
 GET请求:   
    <script type="text/javascript">
        window.onload = function () {
            var btn = document.getElementById("btnGetDate");
            btn.onclick = function () {
                var xhr; //帮我们去后台发起一个新的请求的异步对象
                if (XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //参数:(请求的类型,请求的地址,是否是异步请求)
                xhr.open("Get", "GetDate.ashx?id=3", true);
                xhr.send(); //此方法不阻塞主线程,而且不一定 什么时候执行,由浏览器决定
                //我们不知道请求到了什么程度了、发送了没有、发送是否成功只能通过监听xhr对象的
                //的一些状态的改变事件
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        var strData = xhr.responseText;
                        var divresult = document.getElementById("result");
                        divresult.innerHTML = strData;
                    }
                }
            };
        };
    </script>
 
post请求:  
    <script type="text/javascript">
        window.onload = function () {
            var btn = document.getElementById("btn1");
            btn.onclick = function () {
                var xhr;
                if (XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.open("post", "GetDate.ashx", true);
                xhr.send({ id: 33, date: 2222 });
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {//判断后台返回是否成功
                            var str = xhr.responseText;
                            document.getElementById("result").innerHTML = str;
                        }
                    }
                }
            };
        };
    </script>
 
AJAX优点:
    Ajax在本质上时一个浏览器端的技术;
    Ajax技术的主要目的在于局部浇花客户端及服务器端之间的数据;
    Ajax技术的主角XMLHttpRequest的主要特点是能够不用重新载入整个版面来更新资料,也就是所谓 的Refresh Without Reload(轻刷新);
    与服务器之间的沟通,完全是通过Javascript来实行;
    使用XMLHttpRequest本身传送的数据量很小,所以反应会更快,也就是让网络程序更像一个桌面应用程序;
    Ajax就是运用Javascript在后台瞧瞧帮你去跟服务器要资料,最后再由Javascript或DOM来帮你呈现结果,因为所有动作都是由Javascript代劳的,所以省去了网页重载的麻烦,使用者感受不到等待的痛苦;
 
XMLHttpRequest对象:
    1.在IE和非IE浏览器中创建的方法不同;
    2.它可以异步从服务器端获取txt或者xml数据;
        在IE、Firefox、safari、Opera中创建的javascript代码为:
                var xhr = new XMLHttpRequest();
        在IE5\6中的代码为:
                var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        

 

function createXmlHttp() {//创建xhr对象
                var xhobj = false;
                try {
                    xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
                } catch (e) {
                    try {
                        xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
                    } catch (e2) {
                        xhobj = false;
                    }
                }
                if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
                    xhobj = new XMLHttpRequest();
                }
                return xhobj;
            }
    
异步请求的基本步骤:
  1.  创建对象;new
  2. 创建请求;open()
  3. 发送请求;send() 
            btn.onclick = function () {
                //创建对象,点击按钮的时候启动
                var xhr; //帮我们去后台发起一个新的请求的异步对象
                if (XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //参数:(请求的类型,请求的地址,是否是异步请求)
                xhr.open("Get", "GetDate.ashx?" + new Date(), true);
                xhr.send(); //此方法不阻塞主线程,而且不一定 什么时候执行,由浏览器决定
                //我们不知道请求到了什么程度了、发送了没有、发送是否成功只能通过监听xhr对象的
                //的一些状态的改变事件
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        var strData = xhr.responseText;
                        var divresult = document.getElementById("result");
                        divresult.innerHTML = strData;
                    }
                }
            };
 
异步实现增删改查:
 
将list转换成json格式:
    
StringBuilder sb = new StringBuilder();
    sb.Append("[");
    foreach(var item in userList)
    {
        sb.Append("{");
        sb.Appendformat("\"Id\":\"{0}\",\"LoginName\":\"{1}\"",item.ID,item.LoginName);
        sb.Append("}");
    }
    sb = sb.remove(sb.Length - 1,1);//去掉最后的“,”;     
    sb.Append("]");
 
 
if(confirm("ok")){
 
}
system.web.script.serialization
 
使用js序列化:
    using system.web.Extension //添加引用
    using system.web.script.serialization;
 
 
遍历json对象:
    for(var i =0 ;i<data.length;i++)
    {
        var user = data[i];
        <tr><td>user.ID</td></tr>
    }
 
分页:
        function InitNavPage(strData) {
            $.get("GetNavPage.ashx", strData, function (result) {
                $('#navPage').html(result);
                $('.pageLink').click(function () {
                    //点击分页超链接,异步刷新列表数据,同时也刷新分页标签
                    var strHref = $(this).attr("href");
                    strHref = strHref.substring(1); //获取发送的参数
                    alert(strHref);
                    InitNavPage(strHref); //重新刷新分页控件
                    return false;
                });
            });
        }
 
 
posted @ 2012-12-18 23:30  许全通  阅读(320)  评论(0编辑  收藏  举报