शुद्ध जावास्क्रिप्ट

Question

में AJAX पोस्ट कार्यान्वयन शुद्ध जावास्क्रिप्ट में AJAX पोस्ट का कोई कार्यान्वयन है (शायद xmlhttprequest का उपयोग कर रहा है)?

उदाहरण के लिए अगर मैं इस तरह एक रूप है:

<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> 

और इस 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 */ 

}); 

मैं jQuery के उपयोग के बिना एक ही कर सकते हैं ? यदि यह संभव है, कैसे क्या मैं उपरोक्त jQuery कोड को शुद्ध/सादा जावास्क्रिप्ट कोड में कार्यान्वित कर सकता हूं?

Answer 1

हाँ और पाठ्यक्रम है कि संभव है :)

<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> 

जे एस के

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 
    $firstName = $_POST["first_name"]; 
    $lastName = $_POST["last_name"]; 
    echo $firstName." ".$lastName; 
    //enter name and lastname into your form and onclick they will be alerted 
?> 

स्पष्टीकरण: फ़ंक्शन उनके वर्ग के नामों से तत्व तत्व लेता है और उन्हें सरणी में संग्रहीत करता है। फिर हम प्रत्येक तत्व के लिए तत्व सरणी के माध्यम से FormData ऑब्जेक्ट और लूप बनाते हैं और फॉर्मडाटा ऑब्जेक्ट में अपना नाम और मान जोड़ते हैं। इसके बाद हम XMLHttpRequest() ऑब्जेक्ट बनाते हैं जो अनुरोध के दौरान राज्य और स्थिति परिवर्तन पर नज़र रखता है और के साथ डेटा भेजता है सर्वर.php पर विधि जब यह खत्म हो जाता है और तैयार हो जाता है तो 4 के बराबर होता है और स्थिति 200 के बराबर होती है, हम सर्वर से प्रतिक्रिया को सतर्क करते हैं .php, जिसे हम प्रतिक्रिया में सहेजते हैं XMLHttpRequest ऑब्जेक्ट की टेक्स्ट विशेषता।

Answer 2

हां, यह है।

जैसा कि आपने कहा था, यह XMLHttpRequest के साथ काम करता है।

var http = new XMLHttpRequest(); 
var postData = serialize(arr); 
var params = "postdata=" + postData; 
http.open("POST", url, true); 
http.send(params); 

एक धारावाहिक कार्य के लिए जेएस this page देखें।

function serialize(mixed_value) { 
    // discuss at: http://phpjs.org/functions/serialize/ 
    // original by: Arpad Ray (mailto:arpad@php.net) 
    // 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; 
} 

Answer 3

निश्चित रूप से, आप Ajax only Reqwest lib का उपयोग कर सकते हैं।

कुछ की तरह:

reqwest({ 
    url: 'path/to/json' 
    , type: 'json' 
    , method: 'post' 
    , error: function (err) { } 
    , success: function (resp) { 
     qwery('#content').html(resp.content) 
    } 
}) 

और उनके README के ​​अनुसार आप का उपयोग कर सकते हैं:

$(form).serialize()