资讯专栏INFORMATION COLUMN

【Web全栈课程5】自己封装一个简单的ajax

olle / 1020人阅读

摘要:内部怎么实现的使用一个文件来模拟服务器返回,代码如下请求的发送实际上我们都通过浏览器的实现,使用,不考虑的兼容,我们实现一个简单的请求如下。

ajax ajax内部怎么实现的?

使用一个php文件来模拟服务器返回,php代码如下

请求的发送实际上我们都通过浏览器的XMLHttpRequest实现,ie6使用ActiveXObject,不考虑IE6的兼容,我们实现一个简单的xhr请求如下。


    
    
    
    
        
    
xhr.readyState状态值
0:刚刚创建初始状态
1:已连接
2:已发送
3:已接受-头(32k上限)
4:已接受-body(1G上限)
http状态码
1XX 消息
2XX 成功
3XX 重定向
    301 永久重定向——浏览器永远不会再次请求老的地址
    302 临时重定向——浏览器下次还会请求老地址
    304 (not modified)重定向到缓存请求——因此304也是成功
4XX 请求错误,客户端错误
5XX 服务端错误
6XX 扩展错误码

因此可以通过2XX和304的状态码判断请求成功。

    // 接收;4代表结束
    xhr.onreadystatechange = function(){
        if (xhr.readyState ==4){
            if ((xhr.status>=200&&xhr.status<300)||xhr.status==304){
                alert("成功:"+xhr.responseText);
                console.log(xhr);
            } else {
                alert("失败");
            }
        }
    };
xhr返回值

xhr.responseText 文本数据
xhr.responseXML XML数据(已经不常用)

xml数据是不固定标签组成的数据,xml数据更加占空间,例如:


    xiaoyezi
    18
    front engineer

json格式:

let json={name:"xiaoyezi",age:18,job:"front engineer"};
XMLHttpRequest发送POST请求

按照我们上面代码的思路,post请求的写法推导出来应该是如下写法,实际上如下写法并不行

// 连接,true代表异步,false代表同步;浏览器对异步的xhr会报错
xhr.open("post","../server/a.php",true,);

// 发送;send里面是body,post需要发送
xhr.send("a=12&b=5");

对比form的post提交方式,我们可以看到,Request Headers里面有条设置和form提交的不同:

Content-Type: text/plain;charset=UTF-8
form提交:Content-Type: application/x-www-form-urlencoded

需要增加setRequestHeader的设置,再send请求的body内容,请求成功。

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("a=12&b=5");
content-type类型及含义?
text/plain 文本
application/x-www-form-urlencoded &&&连接的方式,eg:a=12&b=5
multippart/form-data 定界符分割各个数据(文件上传)
实现简单的自定义ajax
function ajax(options){
    // 数据处理
    options = options || {};
    options.data = options.data || {};
    options.type = options.type || "get";
    options.dataType = options.dataType || "text"; //解析数据

    let arr = [];
    for (let name in options.data) {
        arr.push(`${name}=${encodeURIComponent(options.data[name])}`);
    }
    let dataStr = arr.join("&");

    // 不兼容ie6
    let xhr=new XMLHttpRequest();

    // 连接,true代表异步,false代表同步;浏览器对异步的xhr会报错
    if (options.type == "get"){
        xhr.open("get",options.url + "?" + dataStr,true);
        xhr.send();
    } else {
        xhr.open("post",options.url,true,);

        // 发送;send里面是body,post需要发送Content-Type
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(dataStr);
    }

    // 接收;4代表结束
    xhr.onreadystatechange = function(){
        if (xhr.readyState ==4){
            if ((xhr.status>=200&&xhr.status<300)||xhr.status==304){
                let result = xhr.responseText;
                switch (options.dataType){
                    case "text":
                        break;
                    case "json":
                        if (window.JSON && JSON.parse){
                            result = JSON.parse(result);
                        } else {
                            result = eval("("+result+")");
                        }
                        break;
                    case "xml":
                        result = xhr.XMLHttpRequest;
                        break;
                    default:
                        break;

                }
                options.success && options.success(result);
            } else {
                options.error && options.error("error");
            }
        }
    };
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95610.html

相关文章

  • Web全栈课程三】ES6特性介绍(下)

    摘要:示例运行函数弹出弹出函数接收参数,返回值。其中,返回一个对象,是的返回值,代表函数是否执行完成。 ES6特性介绍(下) ES6新的标准,新的语法特征:1、变量/赋值2、函数3、数组/json4、字符串5、面向对象6、Promise7、generator8、ES7:async/await 《【Web全栈课程二】ES6特性介绍(上)》见:https://segmentfault.com/a...

    wangshijun 评论0 收藏0
  • 全栈之路】JAVA基础课程七_AJAX原理剖析(20190617v1.0)

    摘要:借鉴图片仅用于学习分享,请尊重原创作者,勿用于商用。这其中最关键的一步就是从服务器获得请求数据。基本步骤创建对象也就是创建一个异步调用对象。创建一个新的请求并指定该请求的方法及验证信息。设置响应请求状态变化的函数。使用和实现局部刷新。 欢迎进入JAVA基础课程 博客地址:https://blog.csdn.net/houjiyu...本系列文章将主要针对JAVA一些基础知识点进行讲解...

    biaoxiaoduan 评论0 收藏0
  • 全栈之路】JAVA基础课程七_AJAX原理剖析(20190617v1.0)

    摘要:借鉴图片仅用于学习分享,请尊重原创作者,勿用于商用。这其中最关键的一步就是从服务器获得请求数据。基本步骤创建对象也就是创建一个异步调用对象。创建一个新的请求并指定该请求的方法及验证信息。设置响应请求状态变化的函数。使用和实现局部刷新。 欢迎进入JAVA基础课程 博客地址:https://blog.csdn.net/houjiyu...本系列文章将主要针对JAVA一些基础知识点进行讲解...

    yintaolaowanzi 评论0 收藏0

发表评论

0条评论

olle

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<