ajax 基本寫法以及jquery現在常用寫法

c# ajax 基本寫法 現在都用jquery的ajax 函數了，但是不要忘記基本寫法哦 

<script type="text/javascript">
        $(function()
        {
            var xhr = new AjaxXmlHttpRequest();
            $("#btnAjaxOld").click(function(event)
            {
                var xhr = new AjaxXmlHttpRequest();

//XMLHTTP預設（也推薦）不是同步請求的，也就是open方法並不像WebClient的DownloadString那樣把伺服器返回的資料拿到才返回，是非同步，因此需要監聽onreadystatechange事件。
                xhr.onreadystatechange = function()
                {
                    if (xhr.readyState == 4)//表示伺服器完成
                    {

                         if(xhr.status == 200)//如果狀態代碼為200則是成功

                          {
                          document.getElementById("divResult").innerHTML = xhr.responseText;

                          }else {
                          alert("AJAX伺服器返回錯誤！")
                         }
                    }
                }
                xhr.open("GET", "data/AjaxGetCityInfo.aspx?resultType=html", true);
                xhr.send(null);
            });
        })

        //跨瀏覽器擷取XmlHttpRequest對象
        function AjaxXmlHttpRequest()
        {
            var xmlHttp;
            try
            {
                // Firefox, Opera 8.0+, Safari
                xmlHttp = new XMLHttpRequest();
            }
            catch (e)
            {

                // Internet Explorer
                try
                {
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e)
                {

                    try
                    {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e)
                    {
                        alert("您的瀏覽器不支援AJAX！");
                        return false;
                    }
                }
            }
            return xmlHttp;
        }       
    </script>

jquery ajax 常用寫法

列表頁面

<script language="javascript" type="text/javascript">
    function InitList() {
        $("#liststr").html("");
        var strhtml = "";
        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "WS_Page.asmx/InitList",
            data: "{id:'" + $("#txtId").val() + "',url:'" + $("#txtUrl").val() + "',ip:'" + $("#txtIp").val() + "'}",
            datatype: 'json',
            cache: false,
            success: function(json) {
           
                var objlist = eval(json.d);
                $.each(objlist, function(n, obj) {

                    strhtml += "<tr >";
                    strhtml += "<td>";
                    strhtml += obj.id;
                    strhtml += "</td>";
                    strhtml += "<td>";
                    strhtml += obj.url;
                    strhtml += "</td";
                    strhtml += "<td>";
                    strhtml += obj.ip;
                    strhtml += "</td>";
                    strhtml += "<td>";
                    strhtml += obj.updatetime;
                    strhtml += "</td>";
                    strhtml += "<td>";
                    strhtml += "<input type='button' value='編輯'onclick='javascript:location.href=\"Manager.aspx?id=" + obj.id + "\"'/>&nbsp&nbsp;";
                    strhtml += "<input type='button' value='刪除'onclick='deleteInfo(" + obj.id + ")'/>";
                    strhtml += "</td>";
                    strhtml += "</tr>";
                })     
                $("#liststr").append(strhtml);

            },
            error: function(err) {
                alert(err.responseText);
            }
        });

    }

    function deleteInfo(id) {
        if (!confirm('確定刪除嗎?')) return;
        if (isNaN(id)) {
            alert('參數錯誤');
            return;
        }
        $.ajax({
            type: 'POST',
            contentType: 'application/json',
            url: 'WS_Page.asmx/DeleteInfo',
            data: "{id:" + id + "}",
            dataType: 'json',
            cache: false,
            success: function(json) {
                if (json.d == "success") {
                    alert('刪除成功!');
                    InitList();
                } else {
                    alert(json.d);
                }
            },
            error: function(err) {
                alert(err.responseText);
            }
        });
    }

    $(document).ready(function() {
     InitList();
    });
</script>

 

 //manager 頁面

 

<script language="javascript" type="text/javascript">

    var id = $.query.get('id');//一定要引用一個外掛程式 urlparameter.js 才能正常擷取穿過來的參數。

    function getInfoById() {
        if(id!=""&& !isNaN(id)) {
            $.ajax({
                type: "POST",
                contentType: "application/json",
                url: "WS_Page.asmx/getInfoById",
                data: "{id:" + id + "}",
                dataType: 'json',
                cache: false,
                success: function(json) {
                    var data = eval(json.d);
                    $("#txtIp").val(data[0].ip);
                    $("#txtUrl").val(data[0].url);
                },
                error: function(err) {
                    alert(err.responsetext);
                }
            });
        }

    }

    function submitEvent() {
        if (id == "" || isNaN(id)) {

            $.ajax({
                type: "POST",
                contentType: "application/json",
                url: "WS_Page.asmx/AddInfo",
                data: "{url:'" + $("#txtUrl").val() + "',ip:'" + $("#txtIp").val() + "'}",
                dataType: 'json',
                cache: false,
                success: function(json) {
                    if (json.d.indexOf("success") == 0) {
                        id = json.d.substring(7);
                        alert("添加成功！");
                    }
                    else {
                        alert(json.d);
                    }
                },
                error: function(err) {
                    alert(err.responseText);
                }
            });
           
       
       
        } else {

            $.ajax({
                type: "POST",
                contentType: "application/json",
                url: "WS_Page.asmx/UpdateInfo",
                data: "{url:'" + $("#txtUrl").val() + "',ip:'" + $("#txtIp").val() + "',id:" + id + "}",
                dataType: 'json',
                cache: false,
                success: function(json) {
                    if (json.d == "success") {
                        alert("修改成功！");
                    } else {
                        alert(json.d);
                    }
                },
                error: function(err) {
                    alert(err.responsetext);
                }

            });
        }

    }
  
    $(document).ready(function() {
        getInfoById();
    });
</script>