常用代码与插件 - 原生代码发送ajax请求 ¶

• 作者：KK

• 发表日期：2018.8.11

需求 ¶

有时候要做一个简单的页面测试，但觉得引入jQuery又麻烦，还要去复制地址回来构建script:src，上网复制别人的基本也可以，这里自己整理一段代码，自己平时需要的时候就回来复制一下改参数发送。

以下代码可以直接复制到浏览器控制台执行测试，由于我们往往只在 Chrome 或 火狐 浏览器下测试，所以下面的代码并没有兼容 IE 浏览器，有更多需求就自己改造代码吧。

GET 请求代码 ¶

function ajaxGet(url){
	var request = new XMLHttpRequest();
	request.open('get', url);
	request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
	request.onreadystatechange = function () {
		if (request.readyState == 4 && request.status == 200) {
			console.log(request.responseText);
		}
	}
	request.send();
}

ajaxGet('/xxx?param1=yyy&param2=zzz');

POST 请求代码 ¶

function ajaxPost(url, params){
	var request = new XMLHttpRequest();
	request.open('post', url);
	request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
	
	var paramStr = '';
	if(111){
		//切换到else那里发送urlencode格式的body参数，现在的接口一般都发送json格式参数了
		request.setRequestHeader('Content-type', 'application/json');
		paramStr = JSON.stringify(params);
	}else{
		request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
		for(var name in params){
			paramStr += '&' + name + '=' + params[name];
		}
		paramStr = paramStr.substr(1);
	}


	request.onreadystatechange = function () {
		if (request.readyState == 4 && request.status == 200) {
			console.log(request.responseText);
		}
	}
	request.send(paramStr);
}

ajaxPost('/xxx', {param1: 111, param2: 222});