Ajax学习笔记

AJAX为何被需要普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面。也就是说如果在这个页面采取操作的时候,就会将整个页面进行刷新,如果是视频,就会从头开始播放,这对于用户的体验是非常差的AJAX是一种进行页面局部异步刷新的技术,AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中,不是整个页面刷新

 

 

刷新的方式HTML页面中使用JavaScript创建的XMLHTTPRequest对象来对服务器发出请求,并且获得返回的数据。

 

.Net代码实现:

<head>
    <title></title>
    <script type="text/javascript" src="js/ajax.js"></script>
    <script type="text/javascript">
        function zan()
        {
            var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性。XHR
            xmlhttp.open("POST", "/*这里写入你需要执行的一般处理程序文件*/?你传入的参数", true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求

            //AJAX是异步的,并不是等到服务器端返回才继续执行
            xmlhttp.onreadystatechange = function ()
            {
                if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成)
                {
                    if (xmlhttp.status == 200) //如果Http状态码为200则是成功
/*意思是说如果前面传入的参数达成,那就返回为true,执行*/
                    {
                        //alert(xmlhttp.responseText);
                        document.getElementById("ZanCount").innerHTML = xmlhttp.responseText; //responseText为服务器端返回的报文正文
/*这里填入你需要执行的操作*/
                    }
                    else
                    {
                        alert("AJAX服务器返回错误!");
                    }
                }
            }
            //不要以为if (xmlhttp.readyState == 4) {在send之前执行!!!!
            xmlhttp.send(); //这时才开始发送请求。并不等于服务器端返回。请求发出去了,我不等!去监听onreadystatechange吧!

        }

        function cai()
        {
            ajax("ZanCai.ashx?action=Cai", function (resText)
            {
                document.getElementById("CaiCount").innerHTML = resText;
            });
        }
    </script>
</head>

 

注意:以上是完成一个操作(视频播放的赞或者踩其中一个)所使用的代码,如果完成两个操作需要写出来两份。那么就需要将这段代码进行封装。

 

按照习惯,所有的js的库都要写进js这个文件夹中,其中使用<script type="text/javascript" src="js/ajax.js"></script>语句来引入这个库

 

.Net ajax 代码封装的实现:

 1 function ajax(url, onsuccess)  // 传入两个参数,一个是传入的一个能够让第一个if语句执行的一个action参数,第二个是if语句执行的语句
 2 {
 3     var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性。XHR
 4     xmlhttp.open("POST", url, true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求
 5
 7     //AJAX是异步的,并不是等到服务器端返回才继续执行
 8     xmlhttp.onreadystatechange = function ()
 9     {
10         if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成)
11         {
12             if (xmlhttp.status == 200) //如果Http状态码为200则是成功
13             {
14                 onsuccess(xmlhttp.responseText);
15             }
16             else
17             {
18                 alert("AJAX服务器返回错误!");
19             }
20         }
21     }
22     //不要以为if (xmlhttp.readyState == 4) {在send之前执行!!!!
23     xmlhttp.send(); //这时才开始发送请求。并不等于服务器端返回。请求发出去了,我不等!去监听onreadystatechange吧!
24 }

 

如何调用?

1 调用的方法: function cai()
2         {
3             ajax("ZanCai.ashx?action=Cai", function (resText)
4             {
5                 document.getElementById("CaiCount").innerHTML = resText; //这里传入需要进行操作的代码
6             });
7         }
8 
9 // 这串代码是要写进script中的

 

posted @ 2018-09-25 14:40  一个热爱汉服的程序员  阅读(140)  评论(0编辑  收藏  举报