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

 

转载于:https://www.cnblogs.com/genesis/p/4687543.html