Как переписать jQuery на нативный JavaScript

http://youmightnotneedjquery.com/

зачем заново изобретать велосипед?

Чтобы не тянуть почти 100 кб jquery...

Тяните с code.jquery.com - у многих пользователей он уже в кеше.

Мой вопрос изложен выше, если вам нечего сказать по сути - проходите мимо.

Как-то так:

<script language="JavaScript">

function f1() {

var $like = document.getElementById("like").innerHTML;

document.getElementById("like").innerHTML = "<img src=\"loader.gif\" >";

/* здесь видимо какая-то обработка... */

document.getElementById("like").innerHTML = $like;

document.getElementById("thanks").innerHTML = "Спасибо";

document.getElementById("like").title = "Вы уже голосовали";

}

</script>

<div id="for_votes">  

	<div id="like" title="Нравится?">

		<span class="btn btn-success ajax_links" onclick="f1();">+2964 <span class="glyphicon glyphicon-thumbs-up"></span></span>

		<br />

		<br />

		<span class="btn btn-danger ajax_links" onclick="f2();"><span class="glyphicon glyphicon-thumbs-down"></span> -167</span>

	</div>

	<div id="thanks"></div>

</div>

Переписал вот так, но данные по request все-равно не передаются. Гуру JavaScript'а, что я делаю неправильно?:

[].forEach.call(document.querySelectorAll('span.ajax_links'), function (el) {
	el.addEventListener('click', function() {
		var action = this.getAttribute('data-action');
		document.getElementById('like').innerHTML = '<img src="/ajax-loader.gif" style="height:16px; width:16px;">';
		
		
		/* с этим - работает
		$.post(document.location.href, {action: action}, function(data) {		
			document.getElementById('like').innerHTML = data;
			document.getElementById('like').setAttribute('title','Вы уже голосовали');
			document.getElementById('thanks').innerHTML = 'Спасибо';
		})
		*/
		
		/* а с этим - нет */		
		request = new XMLHttpRequest();
		request.open('POST', document.location.href, true);
		request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
		request.send({action:action});
		request.onreadystatechange=function(data){
		//	if(request.readyState==4 && request.status==200){
			document.getElementById('like').innerHTML = data;
			document.getElementById('like').setAttribute('title','Вы уже голосовали');
			document.getElementById('thanks').innerHTML = 'Спасибо';
		//	}
		}
		
		
		
	}, false);
});

1) Метод send принимает в качестве аргумента строку http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp там не может быть JSON данных.

2) Сперва надо определить onreadystatechange а после вызывать send метод

request.onreadystatechange=function(data) {

    // foo

}

request.send(string_param);

И вот ссылочка еще http://stackoverflow.com/questions/9516019/send-json-data-to-php-using-xmlhttprequest-w-o-jquery как отправить JSON данные

вот и вот в помощь минимизации кода

Спасибо, переписал вот так, но все-равно данные в скрипт не передаются:

[].forEach.call(document.querySelectorAll('span.ajax_links'), function (el) {
	el.addEventListener('click', function() {
		var action = this.getAttribute('data-action');
		document.getElementById('likevote').innerHTML = '<img src="/ajax-loader.gif" style="height:16px; width:16px;">';		
		request = new XMLHttpRequest();
		request.open('POST', document.location.href, true);
		request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
		request.onreadystatechange=function(){
			if(request.readyState==4 && request.status==200){
				document.getElementById('likevote').innerHTML = request.responseText;
				document.getElementById('likevote').setAttribute('title','Вы уже высказали свое мнение о статье');
				document.getElementById('thanks').innerHTML = 'Спасибо';
			}
		}
		request.send('action=up');
	}, false);
	//return false;
});

В PHP-скрипте строка обрабатывается так:

if (($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest')||(newisipvoted($ip) == 1)) {
		return;
	} else {
		$action = isset($_POST['action']) ? $_POST['action'] : '';
		switch ($action) {
			case 'up': ............

Вы предлагаете этими сервисами сжать jQuery ? 🤪

Повторюсь - вопрос в том, чтобы полностью отказаться от всяких jQuery, mootools и т.п. Ведь для реализвации данного функционало достоточно пару строк кода на нативе (это пара-тройка килобайт). Вопрос только в том, что я не особый знаток javascripta...