美文网首页
原生ajax的实现方式

原生ajax的实现方式

作者: tenro | 来源:发表于2020-06-16 11:58 被阅读0次
        1.创建XMLHttpRequest 对象
          var xmlhttp;
          //作浏览器兼容处理
          if (window.XMLHttpRequest) {
            // 兼容 IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp = new XMLHttpRequest();
          } else {
              // 兼容IE6, IE5
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }

        2.建立连接
              //参数1 :method:请求的类型;GET 或 POST
              //参数2 :url:文件在服务器上的位置
              //参数3 :async:true(异步)或 false(同步)
              xmlhttp.open("GET", "AjaxServlet?lname=zzf", true);

        3.发送请求 
              xmlhttp.send();

        4.接收服务器的数据 xmlhttp.responseText;
              //onreadystatechange:   存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
              xmlhttp.onreadystatechange = function() {
                //存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                //readyState
                //0: 请求未初始化
                //1: 服务器连接已建立
                //2: 请求已接收
                //3: 请求处理中
                //4: 请求已完成,且响应已就绪

                //status
                //1XX - 5XX
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    alert(xmlhttp.responseText);
                }
            }
        }
</script>

相关文章

  • 前端基础知识-示例代码

    1、ajax 2、jsonp a、原生实现方式 b、jquery ajax: c、vue.js d、npm包jso...

  • 原生ajax的实现方式

  • Ajax

    标签: Ajax 正文 一、实现一个原生Ajax 二、Ajax状态 三、将原生的 ajax 封装成 promise

  • 原生js实现ajax及get post方法

    @拭目以待:首发于原生js实现ajax及get post方法 ajax原生实现,含 post与get方法。原码如下...

  • 前后端交互

    1 前后端交互模式 1.1接口调用方式: 原生AJAX 基于JQuery的AJAX fetch axios 原生的...

  • 原生js实现Ajax

    原生js实现Ajax方法:var Ajax={get: function(url, fn) { var xhr =...

  • Ajax Axios

    关于Ajax兼容性问题 前端原生Ajax(get方式),后端使用node.js 前后端代码: 前端原生Ajax(p...

  • vue学习4

    接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环...

  • Vue接口调用方式

    接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环...

  • Ajax原生实现

    onreadystatechange事件:必须定义在open()之前 检测XHR的readyState属性,每次变...

网友评论

      本文标题:原生ajax的实现方式

      本文链接:https://www.haomeiwen.com/subject/yoblxktx.html