Ajax学习笔记

综合编程 2018-09-25 阅读原文



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中的
博客园精华区

责编内容by:博客园精华区阅读原文】。感谢您的支持!

您可能感兴趣的

Customizable Select Box & Input Field Enhancem... Demo Download Author: jshjohnson Views Total: 3,566 ...
webapi跨域使用session 在之前的项目中,我们设置跨域都是直接在web.config中设置的。 这样是可以实现跨域访问的。因为我们这边一般情况下一个webapi会有多个网站、小程序、微信公众号等访问,所以这样设置是没有问题的。但是……如果其中一个网站需...
Angularjs UI bootstrap popover having trouble rend... I have an AngularJS (v1.4.7) directive that uses AngularJS-UI (v0.14.3). Inside the directive, I have a popover that ...
JQuery calls the PHP ajax method How would I call a PHP Method/function from jQuery ajax. Is this even possible? If it is not possible in jquery, is it p...
How do I retrieve the object I passed in jQuery.aj... I made a chrome extension which calls jQuery's ajax method: content-script.js $.ajax({ "url": "ht...