javascript - 在 "vanilla"javascript 中发布 AJAX 请求，没有 jQuery，在 Rails 4 中

Question

我已经完成了我的谷歌搜索并寻找了我的问题的解决方案，但没有找到可靠的解决方案，部分原因是我的项目很奇怪。

我正在尝试仅使用“vanilla”javascript(不允许使用 jQuery 或 Rails 助手)制作一个带有 Rails 4 后端的简单聊天应用程序。我有一个 GET Ajax 请求在工作，它收集所有植入的消息数据并将其显示在聊天中。但是，当我尝试向我的 Rails 后端写入 POST 请求时，我遇到了两个主要问题。它们可能彼此相关，也可能不相关。

我暂时解决的第一个问题是 422 状态错误(无法处理的实体)。我相信这是因为我的 xmlhttp.setRequestHeader 值有误？
但是，我不知道它们还应该是什么。我通过在我的 Rails MessagesController 中放置一个 skip_before_filter :verify_authenticity_token 来暂时绕过这个问题。
有没有更优雅的方法来解决这个问题？

这导致我遇到下一个问题，即 400 状态错误(错误请求)。当我在运行我的服务器时在终端上查看我的错误时，问题看起来像......

Started POST "/messages" for 127.0.0.1 at 2014-11-26 17:32:48 -0800
Processing by MessagesController#create as */ *
Parameters: {"user"=>"namechatsample", "content"=>"messsagechatsample"}
Completed 400 Bad Request in 4ms

ActionController::ParameterMissing (param is missing or the value is empty: message): app/controllers/messages_controller.rb:17:in message_params' app/controllers/messages_controller.rb:9:increate'

如有任何指导和帮助，我们将不胜感激!

这是我的代码。

Ajax 调用

var getRequest = function(callback) {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
      if (xmlhttp.status == 200) {
        data = JSON.parse(xmlhttp.responseText);
        callback(data.messages)
      } else if (xmlhttp.status == 400) {
        alert('There was an error 400 for GET')
      } else {
        alert('something else other than 200 was returned for GET! This status is ' + xmlhttp.status)
      }
    }
  }
  xmlhttp.open("GET", "/messages", true);
  xmlhttp.send();
}


var postRequest = function(user, message) {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
      if (xmlhttp.status == 200) {
        data = JSON.parse(xmlhttp.responseText);
        alert('Post ajax call was a success')
      } else if (xmlhttp.status == 400) {
        alert('There was an error 400 for POST')
      } else {
        alert('something else other than 200 was returned for POST! The status is ' + xmlhttp.status)
      }
    }
  }
  xmlhttp.open("POST", "/messages", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("user=" + user + "&content=" + message + "");
}

postRequest("namechatsample", "messsagechatsample")

Rails 4 消息 Controller

class MessagesController < ApplicationController
 skip_before_filter  :verify_authenticity_token

 def index #returns last 10 messages
   render :json => Message.last(10)
 end

 def create #makes a new message
   msg = Message.new(message_params)
   msg.save
   render :json => msg
 end


 private
  def message_params
    params.require(:message).permit(:user, :content)
  end
end

如果您认为其他文件或代码位置存在问题，请告诉我!

Answer 1

422 状态错误

422 错误是因为默认情况下 Rails 添加了 Cross Site Request Forgery (CSRF) prevention measures通过真实性 token 。如果 token 在 422 状态下无效(或不存在)，则 POST/PUT/DESTROY 请求返回错误。要解决此问题，您可以禁用真实性检查(就像您所做的那样)，或者您可以按照 this answer. 中所述在 ajax 请求中发送所需的 token 。

400 状态错误

这是因为 strong parameters您已在 Controller 中定义 require 要求消息参数成为发送的参数的一部分 (params.require(:message)...) 并且它允许将“内容”值作为嵌套参数。例如，所需的结构需要是:

:message => {:content => 'message data'}

在 javascript 中，您已将消息的参数名称作为“content”发送，参数名称需要为“message[content]”。例如:

xmlhttp.send("message[user]=" + user + "&message[content]=" + message + "");