声明:本文题目来源于互联网,仅供即将从学校毕业的.Net码农(当然,我本人也是菜逼一个)学习之用。当然,学习了这些题目不一定会拿到offer,但是针对就业求职做些针对性的准备也是不错的。此外,除了技术上的准备外,要想得到提升,还得深入内部原理,阅读一些经典书籍(例如Jeffrey Richter的《CLR via C#》)以及借助Reflector或ILSpy反编译查看源码实现,知其然也知其所以然,方能得到感性认识到理性认识的飞跃!另外,本来想将本文标题取为就业求职宝典,但一想这名字太LOW了,而且太过浮华了,本文也根本达不到那个目标,于是将其改为储备,简洁明了。

1.1 原生js手写ajax请求:不使用第三方js库例如JQuery,借助XMLHttpRequest

  注意:这里仅写出了最基本的js代码,至于什么二次封装和重构各位可以自行解决;

function ajax(method, url, callback) {
     var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
     xhr.open(method, url, true);
     xhr.onreadystatechange = function () {
     if (xhr.readyState == 4 && xhr.status == 200) {
             var result = xhr.responseText;
             callback(result);
            }
     }
     xhr.send();
}

  这里主要理解记忆为四个步凑即可:

  (1)创建XMLHttpRequest对象:如果你足够细心,还可以考虑一下各主流浏览器的兼容性;

  (2)建立与服务器端的连接:借助open方法,GET还是POST?服务页面地址是?异步还是同步?

  (3)设置响应完成后的回调函数:注意条件是readyState=4且status=200的情况下,下面给出了这些条件的具体含义

属性

描述

onreadystatechange

每次状态改变所触发事件的事件处理程序

readyState

对象状态值:

  • 0 = 未初始化(uninitialized)
  • 1 = 正在加载(loading)
  • 2 = 加载完毕(loaded)
  • 3 = 交互(interactive)
  • 4 = 完成(complete)

responseText

从服务器进程返回的数据的字符串形式

responseXML

从服务器进程返回的DOM兼容的文档数据对象

status

从服务器返回的数字代码,比如404(未找到)或200(就绪)

statusText

伴随状态码的字符串信息

  (4)最后正式发送请求:最后一步才是正式的发送此次Ajax请求,调用send方法;

PS:可以看看上面这段js方法具体如何应用的

<script type="text/javascript">
        function getServerTime() {
            ajax("GET", "AjaxHandler.ashx?action=gettime", afterSuccess);
        }

        function afterSuccess(data) {
            if (data != null) {
                document.getElementById("spTime").innerHTML = data;
            }
        }

        function ajax(method, url, callback) {
            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            xhr.open(method, url, true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    callback(result);
                }
            }
            xhr.send();
        }
</script>
</head>
<body>
    <div align="center">
        <input id="btnAjax" type="button" value="Get Server Time" onclick="getServerTime()" />
        <br />
        <span id="spTime" style="font-weight:bold;"></span>
    </div>
</body>
View Code

相关文章:

  • 2022-02-02
  • 2022-01-02
  • 2022-01-20
  • 2022-12-23
  • 2021-12-15
  • 2021-12-19
  • 2021-11-29
  • 2021-11-15
猜你喜欢
  • 2021-07-20
  • 2021-05-24
  • 2022-01-13
  • 2021-06-24
  • 2021-12-06
  • 2022-02-08
相关资源
相似解决方案