2、.net NVelocity中原生javascript ajax封装使用

        在页面上,我们经常会遇到局部刷新的例子,这个时候,就需要用到ajax,

因为很多代码都是公用的,所以我们想到了,将代码封装,简化了使用,减少了冗余

javascript ajax代码如下:

var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性
            xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求
            xmlhttp.onreadystatechange = function ()
            {
                if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成)
                {
                    if (xmlhttp.status == 200) //如果状态码为200则是成功
                    {
                        alert(xmlhttp.responseText);
                    }
                    else
                    {
                        alert("AJAX服务器返回错误!");
                    }
                }
            }
//不要以为if (xmlhttp.readyState == 4) {在send之前执行!!!!
            xmlhttp.send(); //这时才开始发送请求
//发出请求后不等服务器返回数据,就继续向下执行,所以不会阻塞,界面就不卡了,这就是AJAX中“A”的含义“异步”。试着在ashx加一句Thread.Sleep(3000);

我们为了实现 无刷新页面实现 视频的顶踩操作,首先封装ajax,新建ajax.js,采用post提交

function ajax(url, onsuccess)
{
    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性。XHR
    xmlhttp.open("POST", url, true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求

    //DRY:不要复制粘贴代码
    //AJAX是异步的,并不是等到服务器端返回才继续执行
    xmlhttp.onreadystatechange = function ()
    {
        if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成)
        {
            if (xmlhttp.status == 200) //如果Http状态码为200则是成功
            {
                onsuccess(xmlhttp.responseText);
            }
            else
            {
                alert("AJAX服务器返回错误!");
            }
        }
    }
    //不要以为if (xmlhttp.readyState == 4) {在send之前执行!!!!
    xmlhttp.send(); //这时才开始发送请求。并不等于服务器端返回。请求发出去了,我不等!去监听onreadystatechange吧!
}

html页面:

<html>
<head>
    <title></title>
//需要引入 刚刚封装的ajax函数 <script type="text/javascript" src="js/ajax.js"></script> <script type="text/javascript">function cai() { ajax("ZanCai.ashx?action=Cai", function (resText) { document.getElementById("CaiCount").innerHTML = resText; }); } </script> </head> <body> <video src="diaosi.mp4" autoplay controls></video> <p><input type="button" name="Zan" value="" onclick="zan()" /><label id="ZanCount"></label></p> <p><input type="button" name="Cai" value="" onclick="cai()" /><label id="CaiCount"></label></p> </body> </html>

 

你可能感兴趣的:(2、.net NVelocity中原生javascript ajax封装使用)