Ajax案例(使用ajax进行加法运算)

此案例功能实现了一边看视频一边进行加法运算，而加法运算时页面不会刷新请求

ajax代码:

<script type="text/javascript" src="jquery-1.8.3.js"></script>

<script type="text/javascript">

    $(function () {

        $("#btnOK").click(function () {

            var i1 = $("#i1").val();

            var i2 = $("#i2").val();

            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

            xhr.open("POST", "AjaxTest1.ashx?i1=" + i1 + "&i2=" + i2, true);

            //只有监听onreadystatechange事件来获取返回的进度

            xhr.onreadystatechange = function () {

                if (xhr.readyState == 4)

                {

                    //alert();

                    if (xhr.status == 200) {

                        $("#result").text(xhr.responseText);//responseText服务器返回的报文正文

                    }

                    else {

                        alert("服务器出错"+xhr.status);

                    }

                }

            }

            xhr.send();

        });

    });

</script>

html代码:

<video controls="controls">

    <source src="1.MP4" type="video/mp4" />

</video>

<input type="text" id="i1" value="" />+<input type="text" id="i2" value="" />

<input type="button" id="btnOK" value="=" /><span id="result"></span>

ashx代码:

context.Response.ContentType = "text/html";

int i1 = Convert.ToInt32(context.Request["i1"]);

int i2 = Convert.ToInt32(context.Request["i2"]);

int count = i1 + i2;

Thread.Sleep();

context.Response.Write(count);

调用封装的ajax函数写法：

$(function () {

    $("#btnOK").click(function () {

        var i1 = $("#i1").val();

        var i2 = $("#i2").val();

        MyAjax("AddTest1.ashx?i1=" + i1 + "&i2=" + i2,

        function (resTxt) {

            $("#result").text(resTxt);

        },

        function (status) {

            $("#result").text(status);

        });

    });

});