学习前端之ajax

【学习笔记】

前段时间看msdn，发现最新发布了asp.net core2.0.这又让我提起了学web开发的想法了。由于之前一直在搞桌面端开发，web开发完全是小白。

这是我第一次正经的开始学web，之前完全是处于“听说”的状态(当然，跟项目客串过java web的开发)。

话不多说，打开VS就开撸。这里说一下，要用到.net core2.0的话，还是需要把vs2017升级到15.3及以上的版本才行。

今天学习ajax，因为我需要在前台请求Controller接口（之前不知道mvc的时候，就是用这个玩意儿来做web api的）。

 

一个很简单的获取服务器时间的接口。

 

        //
        // GET: /HelloWorld/GetTime/
        public string GetTime()
        {
            return DateTime.Now.ToString();
        }

方法有了，我就在前台循环用ajax请求一下吧。

 

 

function getTime() {
            getServerTime();
            setTimeout('getTime()',500);
        }

 

var getServerTime = function () {   
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                document.getElementById('pserverTime').innerHTML = xmlhttp.responseText;   
            }
        }
    };
    xmlhttp.open("GET", "/HelloWorld/GetTime", true);
    xmlhttp.send();    
    
}

 

一运行，我就坐等一个数字时钟跳动的显示了。但是等了半天就一个固定的时间静静地躺在那儿，一动不动。

 

没办法去找一下w3school老师，发现循环请求相同的url得到的是缓存结果，那就是说时间一直不变获取的都是第一次请求的时间。

没办法，改一下，使url每次都不一样(伪随机)。

把url改成这样：

 

xmlhttp.open("GET", "/HelloWorld/GetTime?rnd="+Math.random(), true);

改一下controller函数：

 

 

        //
        // GET: /HelloWorld/GetTime/
        public string GetTime(int rnd)
        {
            return DateTime.Now.ToString();
        }

解决了。

 

但是感觉这样写起来很不舒服，于是爱找麻烦的我还是去看一下jquery有没有封装更好看的办法。

一找，还真有。方法如下：

 

var result=$.ajax(
        {
            url: "/HelloWorld/GetTime",
            type: "get",
            cache: false,
            async: false,
            success: function (data) {
                document.getElementById('pserverTime').innerHTML = data;
            }
        });

将参数cache赋值为false，就不缓存了。