综合编程

Ajax学习笔记

微信扫一扫,分享到朋友圈

Ajax学习笔记
0 0



AJAX 为何被需要



普通的
ASP.Net
每次执行服务端方法的时候都要刷新当前页面。也就是说 如果在这个页面采取操作的时候,就会将整个页面进行刷新,如果是视频,就会从头开始播放,这对于用户的体验是非常差的

AJAX
是一种进行页面局部异步刷新的技术,

AJAX

向服务器发送请求和获得服务器返回的数据并且更新到界面中,不是整个页面刷新


刷新的方式


HTML 页面中使用



JavaScript
创建的
XMLHTTPRequest






对象


来对服务器发出请求,并且获得返回的数据。

.Net代码实现:


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

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

按照习惯,所有的
js 的库都要写进
js
这个文件夹中,


其中使用
语句来引入这个库

.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中的
博客园精华区
感谢您的支持!

    谷歌、Yandex及俄罗斯数家互联网公司讨论建立一套反盗版数据库

    上一篇

    「9月25日消息面」联合国儿童基金会驻法国办公室接受数字货币捐赠

    下一篇

    您也可能喜欢

    评论已经被关闭。

    插入图片