zoukankan      html  css  js  c++  java
  • 原生ajax分享

    最近被大佬问了一个很有趣的问题,你还能手打出一个ajax吗?,我当时的想法是有现成的为什么要自己打,后来我反思了一下(只有靠自己才是强者),在这里给大家分享一个我自己打的ajax,也是自己的一个知识点的记录。

    //后台交互ajax方法
    //参数1 集合 代表和后台交互的所有数据
    function ajax(obj) {
            obj.type = obj.type || "get"; //指定提交方式的默认值
            obj.data = obj.data || null; //设置数据的默认值
            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); // 创建XMLHttpRequest对象
            var callback = function (xhr) {
                if (xhr.readyState == 4) {//判断状态码为4时,表示请求完毕可执行内容。
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {//如果状态值为200在300之间,或者是读取缓存中的内容成功时,执行内容。
                        //这里必须要try  catch。即使这里mysql报错,也不会影响到程序的使用。
                        try {
                            obj.success && obj.success(eval(xhr.responseText));
                        }
                        catch (e) {//如果错误,把错误输出到控制台。
                            console.log(xhr.responseText);
                        }
                    } else {//如果状态值不是200到300之间,或者不是304表示请求失败,执行失败的内容。
                        obj.error && obj.error();
                    }
                }
            }
            var toData = function (obj) { //格式化参数
                if (obj == null) {
                    return obj;
                }
                var arr = [];
                for (var i in obj) {
                    var str = i + "=" + obj[i];
                    arr.push(str);
                }
                return arr.join("&");
            }
            if (obj.type == "post") {//判断是get还是post请求
                xhr.open(obj.type, obj.url, obj.async);//打开连接,参数是:请求方式、请求地址、是否异步
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//如果是post请求,设置请求头信息。设置表单提交时的内容类型
                var data = toData(obj.data);//格式化参数
                xhr.send(data);//发送请求
                obj.async == false && callback(xhr);
            } else{ //get test.php?xx=xx&aa=xx
                var url = obj.url + "?" + toData(obj.data);//格式化yrl参数
                xhr.open(obj.type, url, obj.async);//打开链接
                xhr.send();//发送请求,因为是get请求,所以send()不填参数
            }
            xhr.onreadystatechange = function () {//每次状态改变时执行的函数
                callback(xhr);
            }
        }
    

      

  • 相关阅读:
    HTTP协议详解
    10本Linux免费电子书
    面试高级算法梳理笔记
    Linux服务器的那些性能参数指标
    2016 年开发者头条十大文章系列
    程序员如何优雅的挣零花钱
    [oracle] oracle权限传递
    [oracle] 两种权限:系统权限VS对象权限
    [oracle] 系统权限管理
    [oracle] 重要服务启动与停止命令行
  • 原文地址:https://www.cnblogs.com/smileZAZ/p/14044301.html
Copyright © 2011-2022 走看看