原生js手写ajax

墨蓝 2021-12-15 06:59 331阅读 0赞

<script>
        function createXHR(){
        if(typeof XMLHttpRequest != "undefined"){ // 非IE6浏览器
            return new XMLHttpRequest();
        }else if(typeof ActiveXObject != "undefined"){   // IE6浏览器
            var version = [
                        "MSXML2.XMLHttp.6.0",
                        "MSXML2.XMLHttp.3.0",
                        "MSXML2.XMLHttp",
            ];
            for(var i = 0; i < version.length; i++){
                try{
                    return new ActiveXObject(version[i]);
                }catch(e){
                    //跳过
                }
            }
        }else{
            throw new Error("您的系统或浏览器不支持XHR对象！");
        }
    }
    // 转义字符
    function params(data){
        var arr = [];
        for(var i in data){
            arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
        }
        return arr.join("&");
    }
    // 封装ajax
    function ga_ajax(obj){
        var xhr = createXHR();
        obj.url = obj.url + "?rand=" + Math.random(); // 清除缓存
        obj.data = params(obj.data);      // 转义字符串
        if(obj.method === "get"){      // 判断使用的是否是get方式发送
            obj.url += obj.url.indexOf("?") == "-1" ? "?" + obj.data : "&" + obj.data;
        }
        // 异步
        if(obj.async === true){
            // 异步的时候需要触发onreadystatechange事件
            xhr.onreadystatechange = function(){
                // 执行完成
                if(xhr.readyState == 4){
                    callBack();
                }
            }
        }
        xhr.open(obj.method,obj.url,obj.async);  // false是同步 true是异步 // "demo.php?rand="+Math.random()+"&name=ga&ga",
        if(obj.method === "post"){
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(obj.data);
        }else{
            xhr.send(null);
        }
        // xhr.abort(); // 取消异步请求
        // 同步
        if(obj.async === false){
            callBack();
        }
        // 返回数据
        function callBack(){
            // 判断是否返回正确
            if(xhr.status == 200){
                obj.success(xhr.responseText);
            }else{
                obj.Error("获取数据失败，错误代号为："+xhr.status+"错误信息为："+xhr.statusText);
            }
        }
    }
    function Xuan(){
    /*var btn = document.getElementsByIdName("#btn")[0];
    btn.onclick = function(){
         */
    
    
    var uid = document.getElementById("yonghuming").value;
    var pwd = document.getElementById("mima").value;
    alert(uid);
        ga_ajax({
            "method" : "post",
            "url" : "dlchuli.php",
            "data" : {
                "uid" : uid,            
                "pwd" : pwd
            },
            "success" : function(data){
                alert(data);
            },
            "Error" : function(text){
                alert(text);
            },
            "async" : false
        }
        );
    }
    
    
    
    </script>

转载于:https://www.cnblogs.com/sq45711478/p/6374555.html

发表评论取消回复

表情：

评论列表（有 0 条评论，331人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 原生手写轮播图

只是实现了原生JS实现轮播图的逻辑和具体实现代码，css样式并未进行美化实现了以下功能 (1) 点击容器container下方小圆点可以进行切换 (2) 点击左右的

不念不忘少年蓝@/ 2023年10月11日 22:08/ 0 赞/ 23 阅读

相关 js手写ajax 兼容IE浏览器

js手写ajax 最详细的手写ajax版本，兼容IE浏览器 request.js文件： import { getBrowser } from './in

- 日理万妓/ 2023年01月13日 15:00/ 0 赞/ 168 阅读

相关用原生js手写实现promise

用原生js手写实现promise，看了网上很多实现，最终写出自己的简易版promise，记录一下 > 前言：使用及调用同原生Promise方法，只实现了then(reso

骑猪看日落/ 2022年10月01日 05:48/ 0 赞/ 244 阅读

相关 ajax原生js写法

[参考][Link 1] 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

柔光的暖阳◎/ 2022年09月21日 11:43/ 0 赞/ 219 阅读

相关原生JS写出一个AJAX请求

使用JS写出一个AJAX请求 XMLHttpRequest 对象是AJAX的主要接口，用于浏览器与服务器之间的通信，可是使用多种协议，发送任何格式的数据。 XMLHttp

古城微笑少年丶/ 2022年02月19日 01:19/ 0 赞/ 297 阅读

相关用原生JS写出一个AJAX请求

let request = new XMLHttpRequest() request.open('get','/xxx') request.send()

川长思鸟来/ 2022年01月12日 02:55/ 0 赞/ 263 阅读

相关 Ajax_原生ajax写法、理解异步请求、js单线程+事件队列、封装原生ajax

1、原生Ajax 　　一定要理解Ajax出现的背景　　Ajax通过url查询后端接口的数据，在前端做数据的解析和局部更新　　1、隐藏帧iframe方式实现页面局部更新

ゞ浴缸里的玫瑰/ 2022年01月09日 11:43/ 0 赞/ 288 阅读

相关 Ajax_原生ajax写法、理解异步请求、js单线程+事件队列、封装原生ajax

1、原生Ajax 　　一定要理解Ajax出现的背景　　Ajax通过url查询后端接口的数据，在前端做数据的解析和局部更新　　1、隐藏帧iframe方式实现页面局部更新

柔情只为你懂/ 2021年12月22日 22:17/ 0 赞/ 321 阅读

相关原生js手写ajax

<script> function createXHR(){ if(typeof XMLHttpRequest != "undefine

墨蓝/ 2021年12月15日 06:59/ 0 赞/ 332 阅读

相关原生JS实现Ajax

> 前言 > > 这篇文章将给大家详细介绍一下，与JQuery对照用原生的js怎么去实现Ajax。 <table style="border:0px so

迷南。/ 2021年09月29日 08:02/ 0 赞/ 436 阅读