原生AJAX写法

本文详细介绍了使用原生JavaScript实现Ajax请求的方法,包括POST和GET请求的完整代码示例,以及如何封装Ajax函数以简化调用流程。文章还概述了Ajax的基本原理与步骤,适合前端开发者深入了解Ajax的工作机制。

距离写原生ajax——one year

那就写一下 打个卡

//post
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

// get
var request = new XMLHttpRequest();
request.open('GET', '/my/url?'+data, true);
request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
        // Success!
        var resp = request.responseText;
    } else {
        // We reached our target server, but it returned an error
    }
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();

// 稍微封装一下
function ajax({ url, method, headers, data, success, error }) {
    headers = headers || 'application/x-www-form-urlencoded; charset=UTF-8'
    if(window.XMLHttpRequest) {
    	let request = new XMLHttpRequest()
	} else {
		let request = new ActiveXObject('Microsoft.XMLHTTP')
	}
    if(method.toUpperCase() === 'POST') {
		request.open(method, url, true)
    	request.setRequestHeader('Content-type', headers)
    	request.send(data)
	} 
    if(method.toUpperCase() === 'GET') {
		request.open(method, url+"?"+data, true)
		request.send(null)
	}
    request.onload = function(progressEvent) {
        let response = progressEvent.currentTarget
        let {status, statusText, responseText, responseUrl} = response
        if(status > 199 && status < 400) {
            if(success) success(responseText)
        } else {
            if(error) error(statusText)
        }
    }
    request.onerror = function(error) {
        console.error(error)
    }
}

AJAX的基本原理与步骤

1、创建请求 - var xhr = new XMLHttpRequest()
2、确定发送方式和发送地址 - xhr.open('get/post', 'url', false/true)
3、发送 - xhr.send(null/数据)
4、服务器收到(前端等待请求响应) - xhr.onload = function() {}
5、服务器返回数据(前端收到数据) - xhr.responseText。返回类型为字符串类型

感谢读者指出问题。就这样了,欢迎继续吐槽

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值