XMLHttpRequest sometimes doesn't send string - javascript

I'm not sure why this is happening but I will try to explain as much as I already know.
I have a website that allows you to log in with an account stored on a database. Each user can update their own set of data that is also in the same database.
When a user changes data Javascript will post an XMLHttpRequest to a php file on the server. The data is JSON encoded and is decoded in the php file and then stores the data on the database.
The problem is whenever I log into a specific account no data is sent. The string is empty after the request is sent. The post works and the php file runs but no data is present. Here is my code for sending the request in JS:
function sendXMLHttpRequest(data, phpfile){
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
else {
throw new Error("Ajax is not supported by this browser");
}
xhr.open('POST', phpfile, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
if (this.responseText !== null)
document.getElementById('saveresponse').innerHTML = xhr.responseText;
else
alert("Ajax error: No data received");
}else alert("Ajax error: " + this.status);
}
};
xhr.send(data);
}
On the php side:
session_start();
$mysql = new Mysql();
$data = json_decode($_POST['stringData']);
echo 'Data: ' . $data . "<br />";
Normally when I echo the data is returns Array which is what I want but it doesn't echo anything when ever I log into this one specific account, the data sent is just a string where stringData is a JSON. Is there a way to see if anything IS stored there? Also if nothing is being sent why could this be? Any suggestions for my code?

Make sure the request doesn't get cached by adding a random parameter:
querystring = 'validate=' + validate+ "&rand=" + new Date().getTime();

Related

I can't get a response from the server

I followed some guides on how to send json objects to the server(written using node.js) and it doesn't work, I have no idea what is wrong. I know that my server works fine since I tested it on postman so it's my js code that's the problem, all the tutorials I see follow a similar XMLHttpRequest format.
this is my code
var ing = new Ingredient(name, date, qty, rp);
var url = "http://localhost:8081/addIngredient";
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
//Send the proper header information along with the request
// application/json is sending json format data
xhr.setRequestHeader("Content-type", "application/json");
// Create a state change callback
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// Print received data from server
result.innerHTML = this.responseText;
}
};
// Converting JSON data to string
var data = JSON.stringify(ing);
document.write(data);
// Sending data with the request
xhr.send(data);
I used document.write to check where the code stops working but everything passes (since the document.write prints something), I suspect that there is something wrong/missing from xhr.send(data) but I can't tell what. Finally, nothing gets printed from the callback.
It's better to use onload instead of onreadystatechange
xhr.onload = function() {
if (xhr.status == 200) {
console.log(`Response length = ${xhr.response.length}`);
// store xhr.response here somewhere
}
};

Ajax call failing

I am using Ajax to send information to a server and return a JSON string. This is the code I am using:
function getRequests(folder, mode) {
xhr = new XMLHttpRequest();
xhr.onreadystatechange = singleBook(folder, mode);
xhr.open("GET", "bestreads.php?mode=" + mode + "&title=" + folder, true);
xhr.send(null);
}
function singleBook(folder, mode) {
alert(xhr.responseText);
if (mode == "info") {
var json = JSON.parse(xhr.responseText);
}
}
I have tested my PHP script and I am 100% certain that it properly prints out the correct JSON string for every possible folder name. I have validated the JSON string it creates to confirm this.
However, this code leaves xhr completely empty. I have tried checking the status with xhr.stats but it returns 0, which doesn't make sense to me since I thought it is supposed to return 404 or 200.
This is a school project and I am not allowed to use JQuery, so I need a solution to this that does not use it. I make an Ajax call earlier in my call the same way and it works without any issues, but returns an XML string instead of JSON which makes me think I need to do something else to return the JSON string, but I have no idea what that may be.
PHP code:
function createJson($folder) {
$path = "books/" . $folder . "/info.txt";
$infoFile = file($path);
$info = '{"title":"' . $infoFile[0] . '","author":"' . $infoFile[1] . '","stars":"' . $infoFile[2] . '"}';
print $info;
}
You need to assign a function reference to onreadystatechange instead you are invoking the singleBook function and is assigning the value returned by that to onreadystatechange.
Also need to wait for the ajax request before processing it
function getRequests(folder, mode) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = singleBook(xhr, folder, mode);
xhr.open("GET", "bestreads.php?mode=" + mode + "&title=" + folder, true);
xhr.send(null);
}
function singleBook(xhr, folder, mode) {
return function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText);
if (mode == "info") {
var json = JSON.parse(xhr.responseText);
}
}
}
}

XMLHTTPrequest sending empty post

I've done a lot of times before, so I'm honestly confused why this is failing to pass anything. I've tried printing results (script gets a response and prints the file).
function submit_form_inpage(path, data, watchForChange){
alert(data);
watchForChange = watchForChange || false;
var request = new XMLHttpRequest();
request.open('POST', path, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
if (watchForChange == true) {
request.onreadystatechange = function () {
if (request.readyState == 4) {
document.write(request);
if (request.status==200 && request.status < 400){
var xmldata=request.responseText //retrieve result as an XML object
alert("XML:" + xmldata);
}
else{
alert("An error has occured making the request:" + request.status );
}
}
}
}
var temp_string = array_to_string_for_post(data);
var temp = JSON.stringify(data);
alert(temp);
request.send(temp);
}
My php is
print_r($_POST);
and my result is
XML: Array ()
Despite the fact that data passed in (which is double-checked right before being sent by my alert) is
{"reason":"get_stuff","build_name":"test"}
You said you were sending form encoded data.
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
Then you sent:
temp = JSON.stringify(data);
JSON is application/json not application/x-www-form-urlencoded (and isn't natively supported by PHP anyway).
Either encode your data as application/x-www-form-urlencoded or correct your content-type and parse it manually in PHP.

How do i correctly format parameters passed server-side using javascript?

I cannot figure out how to get the following code working in my little demo ASP.NET application, and am hoping someone here can help.
Here is the javascript:
function checkUserName() {
var request = createRequest();
if (request == null) {
alert("Unable to create request.");
} else {
var theName = document.getElementById("username").value;
var userName = escape(theName);
var url = "Default.aspx/CheckName";
request.onreadystatechange = createStateChangeCallback(request);
request.open("GET", url, true);
request.setRequestHeader("Content-Type", "application/json");
//none of my attempts to set the 'values' parameter work
var values = //JSON.stringify({userName:"userName"}); //"{userName:'temp name'}"; //JSON.stringify({ "userName":userName });
request.send(values);
}
}
Here is the method in my *.aspx.cs class:
[WebMethod]
[ScriptMethod(UseHttpGet=true)]
public static string CheckName(string userName)
{
string s = "userName";
return s + " modified backstage";
}
When this code runs I receive this exception:
---------------------------
Message from webpage
---------------------------
{"Message":"Invalid web service call, missing value for parameter: \u0027userName\u0027.","StackTrace":" at System.Web.Script.Services.WebServiceMethodData.CallMethod(Object target, IDictionary`2 parameters)\r\n at System.Web.Script.Services.WebServiceMethodData.CallMethodFromRawParams(Object target, IDictionary`2 parameters)\r\n at System.Web.Script.Services.RestHandler.InvokeMethod(HttpContext context, WebServiceMethodData methodData, IDictionary`2 rawParams)\r\n at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.InvalidOperationException"}
---------------------------
OK
---------------------------
I started searching here, then went on to several threads on SO, trying quite a few combinations of quotation marks and key-value pairs, but nothing I've tried has worked.
When I remove the parameter from the C# method and request.send(), I get a response in my JS callback that I can work with. But as soon as I try to do something with parameters, I get the above exception. I'd like to know how to do this without using jQuery, if possible.
Thanks in advance.
FINAL VERSION
Using Alexei's advice, I ended up with the following, which works. The URL was missing the apostrophes on either end of the parameter value; this was keeping the call from going through.
function checkUserName() {
var request = createRequest();
if (request == null) {
alert("Unable to create request.");
} else {
var theName = document.getElementById("username").value;
var userName = encodeURIComponent(theName);
var url = "Default.aspx/CheckName?name='" + theName + "'";
request.onreadystatechange = createStateChangeCallback(request);
request.open("GET", url, true);
request.setRequestHeader("Content-Type", "application/json");
request.send();
}
}
request.send(values);
This won't work with a "GET". Try
request.open("POST", url, true);
http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
You need to:
decide whether you want GET or POST. For GET request you need all parameters to be in Url (and body to be empty), for POST you can use both. As of current code you are expecting GET, but sending POST.
properly add query parameter - name and encoded value. encodeUriComponent is JavaScript function of choice, see Build URL from Form Fields with Javascript or jquery for details
if using POST you need to properly encode parameters there too as well specify correct "content-type" header.
if sending JSON you need to decode JSON server side.
Alternatively you can use hidden form to perform POST/GET as covered in JavaScript post request like a form submit
Side note: jQuery.ajax does most of that for you and good source to look through if you want to do all yourself.
Like Alan said, use the POST method. Or pass your arguments in your URL before opening it, e.g.
var url = "Default.aspx/CheckName?userName=" + values;
EDIT : no, it's probably a bad idea since you want to send JSON, forget what I said.
If you need to go for POST, then you need to send it like this.
var values = JSON.stringify({"'userName':'"+ userName+ "'"});
And you have to change HttpGet to HttpPost
Given that your server side method asks for GET, you need:
request.open("GET", url + "?username=" + userName, true);
request.send();
The works for me:
function checkUserName() {
var request = new XMLHttpRequest();
if (request == null) {
alert("Unable to create request.");
} else {
var userName = "Shaun Luttin";
var url = '#Url.RouteUrl(new{ action="CheckName", controller="Home"})';
request.onreadystatechange = function() {
if (request.readyState == XMLHttpRequest.DONE ) {
if(request.status == 200){
document.getElementById("myDiv").innerHTML = request.responseText;
}
else if(request.status == 400) {
alert('There was an error 400')
}
else {
alert('something else other than 200 was returned')
}
}
}
request.open("GET", url + "?username=" + userName, true);
request.send();
}
}
With this on the server side:
[HttpGet]
public string CheckName(string userName)
{
return userName + " modified backstage";
}

Sending a JSON to server and retrieving a JSON in return, without JQuery

I need to send a JSON (which I can stringify) to the server and to retrieve the resulting JSON on the user side, without using JQuery.
If I should use a GET, how do I pass the JSON as a parameter? Is there a risk it would be too long?
If I should use a POST, how do I set the equivalent of an onload function in GET?
Or should I use a different method?
REMARK
This question is not about sending a simple AJAX. It should not be closed as duplicate.
Sending and receiving data in JSON format using POST method
// Sending and receiving data in JSON format using POST method
//
var xhr = new XMLHttpRequest();
var url = "url";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
console.log(json.email + ", " + json.password);
}
};
var data = JSON.stringify({"email": "hey#mail.com", "password": "101010"});
xhr.send(data);
Sending and receiving data in JSON format using GET method
// Sending a receiving data in JSON format using GET method
//
var xhr = new XMLHttpRequest();
var url = "url?data=" + encodeURIComponent(JSON.stringify({"email": "hey#mail.com", "password": "101010"}));
xhr.open("GET", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var json = JSON.parse(xhr.responseText);
console.log(json.email + ", " + json.password);
}
};
xhr.send();
Handling data in JSON format on the server-side using PHP
<?php
// Handling data in JSON format on the server-side using PHP
//
header("Content-Type: application/json");
// build a PHP variable from JSON sent using POST method
$v = json_decode(stripslashes(file_get_contents("php://input")));
// build a PHP variable from JSON sent using GET method
$v = json_decode(stripslashes($_GET["data"]));
// encode the PHP variable to JSON and send it back on client-side
echo json_encode($v);
?>
The limit of the length of an HTTP Get request is dependent on both the server and the client (browser) used, from 2kB - 8kB. The server should return 414 (Request-URI Too Long) status if an URI is longer than the server can handle.
Note Someone said that I could use state names instead of state values; in other words I could use xhr.readyState === xhr.DONE instead of xhr.readyState === 4 The problem is that Internet Explorer uses different state names so it's better to use state values.
Using new api fetch:
const dataToSend = JSON.stringify({"email": "hey#mail.com", "password": "101010"});
let dataReceived = "";
fetch("", {
credentials: "same-origin",
mode: "same-origin",
method: "post",
headers: { "Content-Type": "application/json" },
body: dataToSend
})
.then(resp => {
if (resp.status === 200) {
return resp.json()
} else {
console.log("Status: " + resp.status)
return Promise.reject("server")
}
})
.then(dataJson => {
dataReceived = JSON.parse(dataJson)
})
.catch(err => {
if (err === "server") return
console.log(err)
})
console.log(`Received: ${dataReceived}`)
You need to handle when server sends other status rather than 200(ok), you should reject that result because if you were to left it in blank, it will try to parse the json but there isn't, so it will throw an error

Categories

Resources