ajax提交封装,简单仿Jquery

  提交代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//Ajax提交请求 requestType:"get" or "post"; url:地址;data:请求参数; backCallFun:回调函数
        function AjaxRequest(requestType, url, data, backCallFun) {
            var xhrobj; //XMLHttpRequest对象
            if (window.XMLHttpRequest) {  //标准浏览器
                xhrobj = new XMLHttpRequest();
                //xhobj = new ActiveXObject("Msxml2.XMLHTTP");
            } else if (window.ActiveXObject) {
                xhrobj = new ActiveXObject("Microsoft.XMLHTTP");
            }
 
            if (requestType == "get") {
                xhrobj.open("get", url, true);
            } else {
                xhrobj.open("post", url, true);
                //当post请求的时候,必须设置Content-Type
                xhrobj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            }
            //注册事件,当请求后状态改变后触发
            xhrobj.onreadystatechange = function() {
                //readyState状态释义
                //0 - (未初始化)还没有调用send()方法
                //1 - (载入)已调用send()方法,正在发送请求
                //2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
                //3 - (交互)正在解析响应内容
                //4 - (完成)响应内容解析完成,可以在客户端调用了
                if (xhrobj.readyState == 4) {
                    if (xhrobj.status == 200) {  //页面状态
                        var dataStr = xhrobj.responseText;
                        backCallFun(dataStr); //执行回调方法
                    } else {
                        backCallFun("Error");
                    }
                }
 
            }
            xhrobj.send(data);
        }

  示例:  

  var btnlogin = document.getElementById("btnLogin");
    btnLogin.onclick = function() {
      AjaxRequest("post", "LoginHandler.ashx", "uid=admin&pwd=123", function(data) {
        alert(data);
      });
   }

posted @   老张一笑  阅读(286)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示