利用XMLHttpRequest 通过HTTP POST向ABAP backend发送数据

Jerry Wang

发布于 2019-06-24 10:13:20

9690

发布于 2019-06-24 10:13:20

Created by Jerry Wang, last modified on Aug 19, 2014

Javascript source code：

<html>
<head>
<script type="text/javascript">
var xmlhttp;
function GetXmlHttpObject()
{
    if (window.XMLHttpRequest) {
       return new XMLHttpRequest();
    }
    if (window.ActiveXObject) {
       return new ActiveXObject("Microsoft.XMLHTTP");
    }
    return null;
}
function stateChanged()
{
   if (xmlhttp.readyState == 4) {
       document.getElementById("result").innerHTML = xmlhttp.responseText;
       document.getElementById("result").style.border = "1px solid #A5ACB2";
  }
}
function getRequestURL(str)
{
    var url = <use your own url here>+ str;
    url = url + "&sid=" + Math.random();
    return url;
}
function showResult(str)
{
if (str.length == 0 ) {
  document.getElementById("result").innerHTML = "";
  document.getElementById("result").style.border = "0px";
  return;
}
xmlhttp = GetXmlHttpObject();
if (xmlhttp == null ){
  alert ("Your browser does not support XML HTTP Request");
  return;
  }
var requesturl = getRequestURL(str);
xmlhttp.onreadystatechange = stateChanged ;
if ("withCredentials" in xmlhttp) {
 console.log("Great!!!!!");
}
xmlhttp.open("POST",requesturl,true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var data = [];
data.push( escape("firstname=Jerry 1"));
data.push( escape("lastname=Wang 2")); 
xmlhttp.send(data.join("&"));
}
</script>
</head>
<body>
<input type="text" id="fname" onkeyup="showResult(this.value)" />
<div id = "result" ></div>
</body>
</html>

设置Content-Type为form-urlencoded, 即需要通过http post发送到server端的数据通过name-value pair的形式加到post url中去。在ABAP 端能够成功还原出发送的firstname和lastname的数据:

在Chrome里观察到的form data:

如果content type改成text/plain:

xmlhttp.setRequestHeader("Content-Type", "text/plain");
var data = [];
data.push( escape("firstname=Jerry 1"));
data.push( escape("lastname=Wang 2")); 
xmlhttp.send(data.join("\r\n"));

则发送的firstname和lastname将不会出现在form fields里:

此时firstname和lastname只能通过request->get_cdata() 来读取:

server->request->get_header_fields( CHANGING fields = lt_header ).
  server->request->get_form_fields( CHANGING fields = lt_form ).
  lv_data = server->request->get_cdata( ).
  SPLIT lv_data AT cl_abap_char_utilities=>cr_lf INTO TABLE lt_result.