原生AJAX（捕获野生的ajax）

悠悠 2022-12-24 10:59 183阅读 0赞

# AJAX #

不需要刷新页面也能发送请求的技术：AJAX

1、创建AJAX对象：
    var ajax = new XMLHttpRequest();
    2、监听ajax状态：
    ajax.onreadystatechange = function(){
        
    //判断ajax是否请求完成，ajax自己有个属性记录
    if(ajax.readyState == 4){
        
    //判断是否请求成功
    //ajax的属性，--ajax.status  响应状态码
    if(ajax.status>=200 &&ajax.status<=300){
        
    var res= ajax.responseText;//接收数据
    }
    }
    }
    3、代开这次连接，设置请求地址和请求的方式
    ajax.open(“get”,”demo.php”);//请求方式，请求地址，get请求写在地址栏的后面   //demo.php?id = 2;
    4、将设置好的这个请求发送：
    ajax.send();

> ajax是异步代码，ajax.open的第三个参数表示是否是异步，同步警告性能浪费

> from date post请求的数据在network里面是form date，不是这个是有问题的

## 完整版原生ajax ##

php中给ajax进行响应必须使用echo ， 并且只有一个echo

function pAjax(obj) {
        
          return  new Promise(function (resolve, reject) {
        
                if (!obj.url) {
        
                    throw new Error("请求地址不能不传");
                }
                //判断是否异步的参数，---如果不传默认是true，传了也行
                if (obj.async == undefined) {
        
                    obj.async = true;
                }
                //如果传了判断传的是否是布尔值
                if (Object.prototype.toString.call(obj.async) != "[object Boolean]") {
        
                    throw new Error("async传的不是布尔值，可以选择不传");
                }
                //判断method请求方式----是否是get或者post
                //不传默认get
                if (!obj.method) {
        
                    obj.method = 'get';
                }
                //判断传的是否是get或者post
                if (obj.method.toLowerCase() != "post" && obj.method.toLowerCase() != "get") {
        
                    throw new Error("要么不传，要么传post或者get");
                }
    
    
                //判断请求地址是否是字符串
                if (Object.prototype.toString.call(obj.url) != "[object String]") {
        
                    throw new Error("请求地址必须是字符串");
                }
       // 判断数据
                var data = "";
                if (obj.data) {
        
                    if (Object.prototype.toString.call(obj.data) != "[object String]" && Object.prototype.toString.call(obj.data) != "[object Object]") {
        
                        throw new Error("数据必须是字符串或者对象");
                    }
                    //到这数据是传了
                    if (Object.prototype.toString.call(obj.data) == "[object Object]") {
        
                        var f = "";
                        for (var attr in obj.data) {
        
                            data += f + attr + "=" + obj.data[attr];
                            f = "&";
                        }
                    } else if (Object.prototype.toString.call(obj.data) == "[object String]") {
        
                        data = obj.data;
                    } else {
        
                        throw new Error('数据必须是字符串或者对象');
                    }
                    if (obj.method.toLowerCase() == "get") {
        
                        obj.url += "?" + data;
                    }
                }
                // console.log(obj.url)
            
                //obj.dataType默认为json
                if (!obj.dataType) {
        
                    obj.dataType = "json";
                }
       //dataType:判断你想要的类型
                if (obj.dataType.toLowerCase() != "json" && obj.dataType.toLowerCase() != "string") {
        
                    throw new Error("dataType传入的既不是json也不是string");
                }
              var xhr = new XMLHttpRequest;
                xhr.onreadystatechange = function () {
        
                    if (xhr.readyState == 4) {
        
                        if (xhr.status >= 200 && xhr.status < 300) {
        
                            var res = xhr.responseText;
                            //dataType实现转换，默认情况就会转
                            switch (obj.dataType) {
        
                                case "string":
                                   resolve(res);
                                    break;
                                case "json":
                                    res = JSON.parse(res);
                                    resolve(res);
                                    break;
                            }
                        } else {
        
                            reejct();                    }
                    }
                }
                xhr.open(obj.method, obj.url, obj.async);
                if (obj.data) {
        
                    if (obj.method.toLowerCase() == "post") {
        
                        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
                        xhr.send(data);
                        return;
                    }
    
                }
                xhr.send();
            })
        }

发表评论取消回复

表情：

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

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

相关阅读

相关原生Ajax的使用

什么是 AJAX ？ AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 AJAX 就是异步、J

朱雀/ 2023年08月17日 17:34/ 0 赞/ 478 阅读

相关原生AJAX（捕获野生的ajax）

AJAX 不需要刷新页面也能发送请求的技术：AJAX 1、创建AJAX对象： var ajax = new XMLHttpRequest();

悠悠/ 2022年12月24日 10:59/ 0 赞/ 184 阅读

相关 promise封装原生ajax $ajax() 以及fetch？

使用Promise封装原生ajax Get 和 Post Promise是异步编程的一种解决方案。比传统的解决方案——————回调函数和事件，Promise更合理和

客官°小女子只卖身不卖艺/ 2022年12月20日 12:58/ 0 赞/ 264 阅读

相关原生ajax封装

引入线上jquery： <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

梦里梦外;/ 2022年09月14日 02:25/ 0 赞/ 198 阅读

相关 jquery框架的ajax,原生ajax和jquery框架ajax的使用

创建一个异步调用对象，XMLHttpRequest 创建一个新的 HTTP 请求，并且指定方法，url 及参数等(XMLHttpRequest.open(‘GET/POST’

我不是女神ヾ/ 2022年09月03日 11:17/ 0 赞/ 169 阅读

相关原生ajax实例

var xmlhttp = new XMLHttpRequest(); //创建事件处理程序

悠悠/ 2022年05月31日 05:51/ 0 赞/ 192 阅读

相关原生Ajax

原生Ajax <span>输入账号 :</span> <input id="name" name="name" οnkeyup="check()" type="text"

迷南。/ 2022年04月05日 03:56/ 0 赞/ 210 阅读

相关原生ajax请求与jquery-ajax请求

ajax请求可以在不刷新页面的情况下，请求后台服务器为了演示的效果，在jsp中添加一段视频，再播放视频的时候请求后台，看效果。普通表单提交返回数据，会刷新页面使

约定不等于承诺〃/ 2022年02月04日 08:29/ 0 赞/ 379 阅读

相关原生ajax的封装

原生ajax的封装 get请求 post请求有参无参都可以实现返回数据类型，需要自己处理，返回字符串格式 <!DOCTYPE html> <html

青旅半醒/ 2022年01月23日 06:04/ 0 赞/ 259 阅读

相关原生ajax封装

//参数/ url :地址 obj: 参数 callback 回调 //没做容错有时间在写一

深藏阁楼爱情的钟/ 2021年09月16日 23:42/ 0 赞/ 350 阅读