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;
                });
            });
        }