纯 Javascript 中的 AJAX 后期实现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30414372/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AJAX Post Implementation in Pure Javascript
提问by Fariz Luqman
is there any implementation of AJAX Post in Pure Javascript (maybe using xmlhttprequest)?
是否有纯 Javascript 中的 AJAX Post 实现（可能使用 xmlhttprequest）？
For example if I have a form like this:
例如，如果我有这样的表格：
<form action="request.php" id="register_form">
<input type="text" name="first_name" placeholder="First Name">
<input type="text" name="last_name" placeholder="LastName">
<input type="submit" value="submit_now">
</form>
and this is my implementation of the AJAX in jQuery
这是我在 jQuery 中的 AJAX 实现
$('#register_form').submit(function(e) {
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
/* start ajax submission process */
$.ajax({
url: formURL,
type: "POST",
data: postData,
success: function(data, textStatus, jqXHR) {
alert('Success!');
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Error occurred!');
}
});
e.preventDefault(); //STOP default action
/* ends ajax submission process */
});
Can I do the same WITHOUTthe use of jQuery? If it is possible, howcan I implement the above jQuery code into pure/plain Javascript code?
我可以在不使用 jQuery 的情况下做同样的事情吗？如果可能，我如何将上述 jQuery 代码实现为纯/纯 Javascript 代码？
回答by DDeme
Yes and of course that's possible :)
是的，当然这是可能的:)
<form action="request.php" id="register_form">
<input class='formVal' type="text" name="first_name" placeholder="First Name">
<input class='formVal' type="text" name="last_name" placeholder="LastName">
<input type="submit" value="submit_now" onclick="myFunction(); return false;">
</form>
JS
JS
function myFunction()
{
var elements = document.getElementsByClassName("formVal");
var formData = new FormData();
for(var i=0; i<elements.length; i++)
{
formData.append(elements[i].name, elements[i].value);
}
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
alert(xmlHttp.responseText);
}
}
xmlHttp.open("post", "server.php");
xmlHttp.send(formData);
}
server.php
服务器.php
<?php
$firstName = $_POST["first_name"];
$lastName = $_POST["last_name"];
echo $firstName." ".$lastName;
//enter name and lastname into your form and onclick they will be alerted
?>
Explanation:Function takes form elements by their class names and stores them in array. Then we create FormData object and loop through elements array for each element and append their name and value to FormData object. After that we create XMLHttpRequest() object that monitors state and status change during request and also sends data with postmethod to server.php When it's over and readystate equals to 4 and status equals to 200, we alert response from server.php, that we save in responseText attribute of XMLHttpRequest object.
说明：函数通过它们的类名获取表单元素并将它们存储在数组中。然后我们创建 FormData 对象并遍历每个元素的元素数组，并将它们的名称和值附加到 FormData 对象。之后，我们创建 XMLHttpRequest() 对象，该对象在请求期间监视状态和状态变化，并使用post方法将数据发送到 server.php 当它结束并且 readystate 等于 4 且 status 等于 200 时，我们从 server.php 发出警报响应，即我们保存在 XMLHttpRequest 对象的 responseText 属性中。
回答by Jonatas Walker
For sure, you can use Ajax only Reqwestlib.
当然，您只能使用Ajax 的 Reqwest库。
Something like:
就像是：
reqwest({
url: 'path/to/json'
, type: 'json'
, method: 'post'
, error: function (err) { }
, success: function (resp) {
qwery('#content').html(resp.content)
}
})
And according to their README you can use:
根据他们的自述文件，您可以使用：
$(form).serialize()
回答by Richard
Yes, it is.
是的。
As you said, it works with XMLHttpRequest.
正如您所说，它适用于XMLHttpRequest。
var http = new XMLHttpRequest();
var postData = serialize(arr);
var params = "postdata=" + postData;
http.open("POST", url, true);
http.send(params);
For a serialize function is JS see this page.
对于序列化函数是 JS，请参阅此页面。
function serialize(mixed_value) {
// discuss at: http://phpjs.org/functions/serialize/
// original by: Arpad Ray (mailto:[email protected])
// improved by: Dino
// improved by: Le Torbi (http://www.letorbi.de/)
// improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net/)
// bugfixed by: Andrej Pavlovic
// bugfixed by: Garagoth
// bugfixed by: Russell Walker (http://www.nbill.co.uk/)
// bugfixed by: Jamie Beck (http://www.terabit.ca/)
// bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net/)
// bugfixed by: Ben (http://benblume.co.uk/)
// input by: DtTvB (http://dt.in.th/2008-09-16.string-length-in-bytes.html)
// input by: Martin (http://www.erlenwiese.de/)
// note: We feel the main purpose of this function should be to ease the transport of data between php & js
// note: Aiming for PHP-compatibility, we have to translate objects to arrays
// example 1: serialize(['Kevin', 'van', 'Zonneveld']);
// returns 1: 'a:3:{i:0;s:5:"Kevin";i:1;s:3:"van";i:2;s:9:"Zonneveld";}'
// example 2: serialize({firstName: 'Kevin', midName: 'van', surName: 'Zonneveld'});
// returns 2: 'a:3:{s:9:"firstName";s:5:"Kevin";s:7:"midName";s:3:"van";s:7:"surName";s:9:"Zonneveld";}'
var val, key, okey,
ktype = '',
vals = '',
count = 0,
_utf8Size = function (str) {
var size = 0,
i = 0,
l = str.length,
code = '';
for (i = 0; i < l; i++) {
code = str.charCodeAt(i);
if (code < 0x0080) {
size += 1;
} else if (code < 0x0800) {
size += 2;
} else {
size += 3;
}
}
return size;
},
_getType = function (inp) {
var match, key, cons, types, type = typeof inp;
if (type === 'object' && !inp) {
return 'null';
}
if (type === 'object') {
if (!inp.constructor) {
return 'object';
}
cons = inp.constructor.toString();
match = cons.match(/(\w+)\(/);
if (match) {
cons = match[1].toLowerCase();
}
types = ['boolean', 'number', 'string', 'array'];
for (key in types) {
if (cons == types[key]) {
type = types[key];
break;
}
}
}
return type;
},
type = _getType(mixed_value);
switch (type) {
case 'function':
val = '';
break;
case 'boolean':
val = 'b:' + (mixed_value ? '1' : '0');
break;
case 'number':
val = (Math.round(mixed_value) == mixed_value ? 'i' : 'd') + ':' + mixed_value;
break;
case 'string':
val = 's:' + _utf8Size(mixed_value) + ':"' + mixed_value + '"';
break;
case 'array':
case 'object':
val = 'a';
/*
if (type === 'object') {
var objname = mixed_value.constructor.toString().match(/(\w+)\(\)/);
if (objname == undefined) {
return;
}
objname[1] = this.serialize(objname[1]);
val = 'O' + objname[1].substring(1, objname[1].length - 1);
}
*/
for (key in mixed_value) {
if (mixed_value.hasOwnProperty(key)) {
ktype = _getType(mixed_value[key]);
if (ktype === 'function') {
continue;
}
okey = (key.match(/^[0-9]+$/) ? parseInt(key, 10) : key);
vals += this.serialize(okey) + this.serialize(mixed_value[key]);
count++;
}
}
val += ':' + count + ':{' + vals + '}';
break;
case 'undefined':
// Fall-through
default:
// if the JS object has a property which contains a null value, the string cannot be unserialized by PHP
val = 'N';
break;
}
if (type !== 'object' && type !== 'array') {
val += ';';
}
return val;
}
