README

所有AJAX功能一手掌握。

状态

摘要

状态
摘要
介绍
用户手册
摘要

介绍

英语：首先，这份手册是用法语编写的，以简化并节省迁移文档的时间。

法语：首先，这份手册是用法语编写的，以简化并节省迁移文档的时间。

AJAX，或更确切地说，XMLHttpRequest API，如今已成为为用户提供动态应用不可或缺的工具。我们很快就会在各个角落实现AJAX代码片段。其中大部分代码是重复的。在这种情况下，这意味着可以创建一个类、一个函数、一个引擎，以简化其使用。xhrQuery类提供了这种简便性。以下是使用手册。它会让你的生活变得更简单。不再需要在IE和其他浏览器之间进行可用性测试。不再需要在XMLHttpRequest对象上重新声明回调函数！

用户手册

`xhrQuery`对象初始化

与面向对象的任何语言一样，要创建一个新实例，必须使用以下描述的构造函数new。

var moteur_ajax = new xhrQuery();

如你所见，没有任何参数需要指定。xhrQuery类的目的正是简化生活。有一个专门的方法来做任何事情。只需记住方法，而不是参数的顺序。此外，以这种方式可以更容易地省略可选参数！

定义目标

为了使AJAX请求正确进行，至少需要有一个处理我们请求的目标。在英语中，这个词可以翻译为target。我们有定义目标的方法。以下是完整代码：

var moteur_ajax = new xhrQuery();
moteur_ajax.target('script_cible.php');

请注意，目标不一定是脚本。它可以是文本文件、XML文件或JSON文件。然而，只有脚本才有权处理发送的数据。

请注意，参数是字符串类型string。

发送AJAX请求

现在我们已经定义了请求的目标，我们剩下的事情就是发出它。仍然借助英语，发送可以翻译为send。我们有第二个方法！

var moteur_ajax = new xhrQuery();
moteur_ajax.target('script_cible.php');
moteur_ajax.send();

在这个阶段，请求已经发出，但没有表明将处理响应。请注意，不一定需要处理请求的响应。

send方法不接受任何参数。

方法连续性

在更深入介绍方法和它们的角色之前，我想强调一些使xhrQuery类更加易于使用的因素。

方法可以连续执行。这意味着可以一次性在单行上指定所有元素。因此，不再必须使用变量来调用方法。

以下代码与前面的代码以同样的方式工作。

new xhrQuery().target('script_cible.php').send();

方法的调用顺序不重要，除了send必须在最后，因为它是触发请求的方法。你说得对！

此外，你现在明白为什么很容易省略可选参数，因为我们不需要它们时就不会调用方法！

使用回调函数处理响应

为了处理请求的响应（AJAX），我们需要一个处理函数。这个函数通常称为回调或回调函数。因此，你可以猜到方法的名称吗？没错，它是callbacks（结尾有一个s），因为确实可以定义多个处理函数。当然，它们将处理相同的数据，但也许在某些情况下这是必要的。

new xhrQuery().target('script_cible.php').callbacks(ma_fonction_1, ma_fonction_2).send();

callbacks接受的参数类型是函数。不要以字符串格式输入函数名称。

如果你的处理函数接受多个参数，那么你需要使用binder。

function afficherReponse(couleur, message){
	var output = '<span style="color: '+color+'">'+message+'</span>';
	document.write(output);
}

new xhrQuery().target('script_cible.php').callbacks(afficherReponse.bind('', 'red')).send();

请求的响应总是最后一个参数。

在我们的例子中，我们接受两个参数并绑定两个。然而，第一个参数''定义了函数中的this引用。在这里我们不需要它，但是如果你在JavaScript类中使用xhrQuery引擎，那么你需要将''替换为this，除非你已经创建了一个局部变量self（或等效）或者使用箭头函数。绑定的第二个参数是red。因此，它与函数afficherMessage的颜色参数相对应。AJAX响应将位于消息参数上。

发送数据

AJAX在发送需要处理的脚本数据时才有意义。有几种发送数据的方式。第一种是定义variable=valeur类型的键值对。第二种是发送以下类型之一的HTML对象。它必须具有与标准表单中相同的name属性。

HTLMInputElement.
HTLMSelectElement.
HTLMTextAreaElement.

最后一种发送数据的方式是发送完整的表单。这有一个优点，就是可以以最少的代码发送大量数据。

直接通过`variable=valeur`对发送数据进行

要将以variable=valeur形式发送的数据，只需使用values方法。你已经明白了，values接受多个参数。更确切地说，它接受所需的任何数量的参数。它会处理一切。

var moteur = new xhrQuery();
moteur.target('script_cible.php');
moteur.values('nom=DUPRE', 'prenom=nicolas', 'age=27');
moteur.callbacks(ma_fonction_1);
moteur.send();

如果你将这些数据发送到PHP脚本，你会得到以下结果

print_r($_REQUEST);

Array
(
    [nom] => DUPRE,
    [prenom] => nicolas,
    [age] => 27
)

通过HTML对象`HTML____Element`发送数据

在你没有特定的键值对variable=valeur，而是有HTML对象的情况下，对象类型为HTML____Element，那么你需要使用inputs方法。显然，该方法接受你想要的任何数量的参数。重要的是要知道，该方法接受，要么是直接接受HTML对象（引用），要么是字符串格式的标识符。在这种情况下，函数将尝试获取相关的对象。否则，它将被忽略。

让我们看看以下HTML代码

<form onsubmit="send_form(); return false;" id="prez">
	<input type="text" name="nom" placeholder="Nom">
	<input type="text" name="prenom" placeholder="Prénom">
	<input type="text" name="age" placeholder="Age">
	<input type="submit" value="Envoyer">
</form>

在send_form()函数中，例如，你会看到这样

function send_form(){
	/** Création du moteur AJAX **/
	var AJAX = new xhrQuery();
		AJAX.target('script.php');
		AJAX.callbacks(my_callback);
		
	/** Récupérer les informations du formulaire 'prez' **/	
	var inputs = document.querySelectorAll('#prez input');
	
	/** Parcourir tout les inputs obtenu **/
	for(var i = 0; i < inputs.length; i++){
		/** Ajouter l input i au moteur **/
		AJAX.inputs(inputs[i]);
	}
	
	/** Envoyer la requêtes **/	
	AJAX.send();
}

这个例子稍微复杂一些，因为它是更完整的。实际上，它并不复杂。这里有一个循环，它“自动化”了获取，因为我们的输入没有标识符。

var AJAX = new xhrQuery();
	AJAX.inputs(input_A);
	AJAX.inputs(input_B);
	AJAX.inputs(input_C);
	
/** Est identique à **/
new xhrQuery().inputs(input_A, input_B, input_C);

/** C'est aussi valable pour la méthode 'values' et 'callbacks' **/

在脚本方面，我们得到的结果与通过variable=valeur对的数据对传完全相同。

print_r($_REQUEST);

Array
(
    [nom] => DUPRE,
    [prenom] => nicolas,
    [age] => 27
)

发送表单`form`

使用HTML对象发送数据的表示方法可能更加简化。只需发送HTML表单HTMLFormElement。向xhrQuery引擎附加数据集添加表单的相应方法为forms，始终为多个，允许传入所需的参数数量。

让我们回顾一下前面的表单。

<form onsubmit="send_form(); return false;" id="prez">
	<input type="text" name="nom" placeholder="Nom">
	<input type="text" name="prenom" placeholder="Prénom">
	<input type="text" name="age" placeholder="Age">
	<input type="submit" value="Envoyer">
</form>

数据发送方式如下。

var prez_form = document.querySelector('#prez');

var moteur = new xhrQuery();
moteur.target('script_cible.php');
moteur.forms(prez_form);
moteur.callbacks(ma_fonction_1);
moteur.send();

目前，该方法仅接受HTMLFormElement类型的对象。在未来的版本中，forms方法将像inputs方法一样工作，并尝试识别与指定格式string的标识符相对应的潜在表单。

数据发送方法

在最后两个例子中，我们通过一个PHP脚本来显示使用$_REQUEST接收到的数据。我故意没有指定我保留的发送方法。

事实上，存在两种数据发送方式。有GET方法，有POST方法。这和常规表单的工作方式相同。默认使用的方法是POST方法。但如果你想要切换到GET方法，那么你需要使用method方法。

在下面的例子中，我们请求使用GET方法。注意，数据的大小有限制。在此字段之前，通过GET方法的数据大小限制为255个字符。

new xhrQuery('script.php').values('nom=DUPRE').callbacks(ma_function).method('GET').send();

为了在PHP中显示数据

print_r($_GET);

Array
(
    [nom] => DUPRE
)

方法对大小写不敏感，并且仅接受GET或POST作为值。

如果你想使用AJAX发送文件，你将必须使用POST方法。

发送文件时的进度条

当你发送文件时，你可以指定一个函数来显示发送进度。显示进度的方法是progress。

<form onsubmit="send_file(); return false;" id="import">
	<input type="file" multiple="" id="fichiers">
	<input type="submit" value="Envoyer">
</form>

<div id="cadre" style="border: 1px solid black; height: 20px; width: 200px;">
	<div id="barre" style="width: 0%;">
	
	</div>
</div>

function send_file(){
	var file_input = document.getElementById('fichiers');
	
	xhrQuery().target('script.php').inputs(file_input).callback(ma_callback).progress(uploadProgress.bind('', 'barre')).send()
}

function uploadProgress(HTML, uploaded, totalSize){
	var barre = document.getElementById(HTML);
	var progression = (uploaded * 100) / totalSize; 
	
	barre.setAttribute('style', 'width: '+progression+'%');
}

再次强调，这个例子非常完整。实际上，这个想法是表明也可以将数据传递给进度函数，就像传递给处理响应的函数一样。在进度函数的情况下，最后两个参数对应于通过AJAX接收到的数据。在这两个最后参数中，第一个对应于已发送的数据大小，第二个对应于要发送的数据总大小。

总结

总之，xhrQuery类允许你非常简单地做这些事情。

AJAX请求只代表函数中的一行。
方法连续，顺序不重要，除了send方法必须放在最后。
方法target指示处理数据的目标脚本。
方法callbacks指示处理响应的函数。
方法values指示要发送到脚本的variable=valeur数据对。
方法inputs指示包含要发送到脚本的数据的HTML对象HTMLI____Element。
HTML对象HTML____Element必须必须有name属性。
方法method定义数据发送方法（这是适当的术语）。
它对大小写不敏感，并且仅接受GET或POST。
要发送文件，必须使用POST方法。
要显示文件发送的进度，必须使用progress方法。
默认的响应格式是 responseText，因为 responseXML 格式处理起来比较重。
处理 AJAX 请求的响应不一定需要。

neooblaster / xhrquery

维护者

详细信息

README

状态

摘要

介绍

用户手册

`xhrQuery`对象初始化

定义目标

发送AJAX请求

方法连续性

使用回调函数处理响应

发送数据

直接通过`variable=valeur`对发送数据进行

通过HTML对象`HTML____Element`发送数据

发送表单`form`

数据发送方法

发送文件时的进度条

总结

neooblaster / xhrquery

维护者

详细信息

README

状态

摘要

介绍

用户手册

xhrQuery对象初始化

定义目标

发送AJAX请求

方法连续性

使用回调函数处理响应

发送数据

直接通过variable=valeur对发送数据进行

通过HTML对象HTML____Element发送数据

发送表单form

数据发送方法

发送文件时的进度条

总结

`xhrQuery`对象初始化

直接通过`variable=valeur`对发送数据进行

通过HTML对象`HTML____Element`发送数据

发送表单`form`