在ajax中将jquery转换为纯javascript答案

【问题标题】：convert jquery to pure javascript in ajax在ajax中将jquery转换为纯javascript
【发布时间】：2015-06-29 11:10:57
【问题描述】：

我完全对 ajax 方法感到困惑。我是 ajax ajaj（异步 javascript 和 json）的新手。任何人都可以帮助我或提供任何想法如何在 javascript 中实现 ajax、GETajax、POSTajax，例如

$.ajax({
    method: "POST",
    url: "some.php",
    data: { name: "John", location: "Boston" }
}).done(function( msg ) {
     alert( "Data Saved: " + msg );
   }); // ajax


$.get( "ajax/test.html", function( data ) {
   $( ".result" ).html( data );
   alert( "Load was performed." );
 }); // getajax


$.post( "ajax/test.html", function( data ) {
   $( ".result" ).html( data );
}); //postajax

【问题讨论】：

那么 jQuery 源代码可以免费下载 - 您是否尝试阅读相关部分？
this site 提供了 vanillaJS 的示例，包括 AJAX。
XMLHttpRequest
@nnnnnn——你期待有 9 名代表的人从源代码中破译 jQuery 吗？当然，jQuery documentation 会是一个更好的起点。
@RobG - 低代表并不意味着低能力。 jQuery 文档没有解释这些函数是如何工作的，它只是解释了如何调用它们。

标签： javascript ajax

【解决方案1】：

是的，您应该尝试编写自己的 ajax 函数。不要从jQuery开始，从var http_request = new XMLHttpRequest();开始

把它放在一个函数中，添加功能...... 这是我的一个版本

<input type="button" onclick="button_click()" value="CLICK">
<div id="data"></div>
<script>
function button_click() {
  // example of use
  ajax({
    success: receiveNextLocations,
    url: 'ajax.php'
  });
  function receiveNextLocations(data) {
    document.getElementById('data').innerHTML = data;
  }
}

// ajax function that looks a bit like jQuery $.ajax
// minimal code for what I need; not dummy proof, no error handling ...
// feel free to extend this
var http_request = new XMLHttpRequest();
function ajax(options) {
  http_request.open(options.type || 'GET', options.url, true);
  http_request.send(options.data || null);
  http_request.onreadystatechange = function() {
    if (http_request.readyState == 4) {
      if (http_request.status == 200) {
        var type = options.dataType || '';
        switch (type.toLowerCase()) {
          default: 
            options.success(http_request.responseText);
            break;
          case 'json': 
            options.success(JSON.parse(http_request.responseText));
            break;
        }
      }
    }
  }
}
</script>

【讨论】：