Антон Щербаков

На сколько я понимаю вы собираетесь с помощью AJAX-POST вызывать запрос к БД через самописный код или в ином случае использовать для этого Rest Api? Тогда объективного ответа по разнице нагрузки вы не сможете получить. Ответ вы только сами себе сможете дать, путем тестирования и замеров.

Если Вам не нужно методично долбить сервер (например раз в три секунды) запросами на получение новых данных, то лучше всего использовать старый и ламповый AJAX, с которым не будет проблем по поддержке.

Если вы заранее знаете количество частей (т.е. известно когда произойдет последний запрос), то:
1. Узнайте ширину прогресс-бара
var ProgressBarWidth = $('.ProgressBar').width();
2. Разделите на количество запросов:

var QtyRequest = 9;
var StepProgressBar = Math.round(ProgressBarWidth / QtyRequest);

3. Делайте анимацию с задержкой между запросами на прогресс-бар.

$('.ElementIntoProgressBar').animate({"width":StepProgressBar},750);

Даже при очень быстром выполнении запроса, анимации встанут в очередь и отработают положенное время (в приведенном примере 9*750 мс).

Кстати, можно рассчитывать время от запроса до ответа и на основе него принимать решение, какая будет скорость анимации (для быстрых запросов сократить время, для долгих увеличить).

<div class="wrapper">
	<div class="leftSidebar">
		Left
	</div>
	<div class="rightSidebar">
		Right
	</div>
	<div class="element">
		
	</div>
</div>

html, body {
	display: block;
	width: 100%;
	height:100%;
	margin: 0;
	padding: 0;
}
.wrapper {
	display: block;
	width: 100%;
	height: 100%;
	background-color: red;
	overflow: hidden;
}
.leftSidebar, .rightSidebar {
	display: inline-block;
	float:left;
	width: 50%;
	height: 100%;
	text-align: center;
}
.leftSidebar {
	background-color: #C0C0C0;
}
.rightSidebar {
	background-color: #E0E0E0;
}
.element {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	width: 30px;
	border: 1px solid #000000;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.75);
	margin: 0 0 0 -16px;
}
.selectOff {
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

$(document).ready(function(){
	$('html').on('mousedown','.element',function() {
		$(this).css('cursor','e-resize').addClass('elementMove');
		$('.leftSidebar, .rightSidebar').addClass('selectOff');
		$('.wrapper').on('mousemove',function(e) {
			console.log('run');
			var CursorPosition = e.pageX - $('body').offset().left;
			var WrapperWidth = $('.wrapper').width();

			$('.elementMove').css('left',CursorPosition);
			$('.leftSidebar').css('width',CursorPosition);
			$('.rightSidebar').css('width',WrapperWidth - CursorPosition);
		});
	});

	$('html').on('mouseup','.element',function() {
		$(this).css('cursor','default').removeClass('elementMove');
		$('.leftSidebar, .rightSidebar').removeClass('selectOff');
		$('.wrapper').unbind('mousemove');
	});
});

В data: fdx что передаете?

$.ajax({ type: 'POST', url: '/api/customer/test', data: fdx, processData: false, containType: false, dataType: "json"});
console.log(fdx);

<div class="content"></div>
<span class="loadMore">Тырк!</span>

$('html').on('click','.loadMore',function() {
	// 1. запрашиваем сервер $.ajax методом
	// 2. что-то получаем от сервера, заносим в переменную (если сервер отдает HTML)
	$('.content').append('переменная с ответом от сервера'); // 3. вставляем результат
});

Если перебором - то так.

$('.element').each(function () {
	var CurrentVal = $this.text();
	if (CurrentVal == 3) {
		console.log('нашли');
	}
});

Либо как Ingush Archakov посоветовал.

$('.element').load('URL.php', function(response, status, xhr) {
	console.log(status);
	if (status == '') {

	} else {

	}
});

RequestBlock = true; // в глобале разрешаем запрос

if (RequestBlock == false) {
	console.log('ничего не делаем');

} else if (RequestBlock == true) {
	RequestBlock = false; // блокируем следующий запрос пока не отработает $.ajax

	$.ajax({
		type: 'POST',
		url: 'URL',
		data: {},
		cache: false,
		dataType: 'JSON',
		timeout: 15000,
		success: function(r) {
			RequestBlock = true;
			console.log(r);
		},
		error: function(jqXHR, textStatus, errorThrown) {
			RequestBlock = true;
		}
	});
}

Кросс-доменный запрос. В .htaccess пропишите:

<ifmodule mod_headers.c>
  Header always set Access-Control-Allow-Origin: "*"
  Header always set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
  Header always set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With"
  Header always set Access-Control-Allow-Credentials "true"
</ifModule>

Access-Control-Allow-Headers и Access-Control-Allow-Methods настройте под себя

В скайп стукнитесь, дам Вам пример.
wttdgp

Решение со сменой кадров - не рационально в двум обстоятельствам:
- захотят скопировать - скопируют из кеша и соединят, как уже сказали.
- высокая нагрузка на клиенте, т.е. ваша страница будет лагать на средненьком железе.

Sratimon правильную наводку дал на счет превью, так же правильную наводку давали на сильное сжатие JPEG.
Но наводка на перехват PrentScreen, не верна. Можно поиграться:

$(document).on('keydown','body',function(e) {
		if (e.which == 44) {
			console.log('Тырк!');
		} else {
			console.log('Не тырк!');
		}
	});

JS напрочь не реагирует на 44 код. А даже если бы и реагировал, легко можно было бы изменить фокус окна браузера.

var data =  {
	param1: {
		0:'val1',
		1:'val2'
	}, 
	param2: {
		0:'val1'
	}
};

var data = JSON.stringify(data);

$.ajax({
	type: 'POST',
	url: 'URL.php',
	data: data ,
	cache: false,
	dataType: 'json',
	timeout: 15000,
	success: function(request) {
	},
	error: function(jqXHR, textStatus, errorThrown) {
	}
});

$request = json_decode(file_get_contents("php://input"));
	echo ($request->param1->0);

https://jsfiddle.net/es7t1xob/

<div class="bl"></div>

.bl {
position: fixed; 
z-index:999;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
background-color: black;
}