Develop Reference

400 error while making http request in javascript

I ctrl+c the part of Max Payne Wiki article(it's just an exmaple of any text):
just a screenshot of how I copy part of the article
Then I ctrl+v this stuff into <textarea> in my site(not in the code, but literally in the site-rendered <textarea>)
The the runs the next javascript code:
SomeParagraphElement.innerText=document.getElementById('my_txtarea').value;
requestp("aga.php?data="+SomeParagraphElement.innerText, callback_function);
where requestp is
function requestp(path, run)
{
var request = new XMLHttpRequest();
request.open('GET', path, true);
request.addEventListener('readystatechange' ,function()
{
if ((request.readyState==4) && (request.status==200))
run( request.responseText);
}
);
request.send(null);
}
After this there should be a data uploaded to sever, but it doesn't happen and if I just write stuff from keyboard by my fingers and even insert emojis - all works fine.
Google Chrome debug window says, that I make a 400 HTTP error. I tried
var str= SomeParagraphElement.innerHTML.replace(/(?:\r\n|\r|\n)/g, '%0A'); and another %blahblah symbol, but it doesn't change anything.
If I make a new line by myself by pressing 'enter', via keyboard it works fine.
What should I do?

Yeah, if I pass data more the 2048 bytes, I have to use POST request. Here is a function, maybe it will be helpfull for someone
function requestp(path, data, callback)
{
var request = new XMLHttpRequest();
request.open('POST', path, true);
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');//specify this!
request.addEventListener('readystatechange' ,function()
{
if ((request.readyState==4) && (request.status==200))
callback( request.responseText);
}
);
request.send(data);
}

Awesomplete plugin go to url on select

I have Awesomplete plugin and it returns me value from API. That's all working but I want to have possibility go to url on select, I was trying with windos loaction but without success. So far my code looks like this:
var ajax = new XMLHttpRequest();
ajax.open("GET", "http://localhost/wp-json/wp/v2/alljobs/", true);
ajax.onload = function() {
var list = JSON.parse(ajax.responseText).map(function(i) {return i.title.rendered; i.acf.link; window.location.href= i.acf.link});
new Awesomplete(document.querySelector("#list"),{ list: list });};
ajax.send();
Any ideas, help :-)
Thank you all

I solve this, here is the code:
var input=$("#list")[0]; new Awesomplete(input, {list: list});$("#list").on('awesomplete-selectcomplete',function(){
window.location.href = this.value;});

JavaScript: How to "refresh" data from same URL?

Having this API:
http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1
How can I write using pure JS request that downloads me different data after button click event?
All I get from this code is the same quote all the time:
function getQuote (cb) {
var xmlhttp = new XMLHttpRequest();
var quoteURL = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand"
xmlhttp.onreadystatechange = function() {
if (xmlhttp.status == 200 && this.readyState==4) {
cb(this.responseText);
}
};
xmlhttp.open("GET", quoteURL, true);
xmlhttp.send();
}
document.querySelector('button').addEventListener("click", function() {
getQuote(function(quote) {
console.log(quote);
});
})
I tried xmlhttp.abort() and stuff but it didnt want to cooperate.
Thanks in advance!

Your response is being cached by the browser. A common trick to avoid this is to perform a request to
http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&r={random_number}
Notice how the r={random_number} will make the URL different each time.

This is a caching problem. Add a timestamp as a query parameter and you should be able to bust the cache.

Recursively calling the web service not executing completely

I am working on Titanium Appcelerator to develop iphone application. I need to call a web service with different parameters about more than 1250 times. I have place the xhr.send() method inside the xhr.onload function. It working fine about 3-8 times but stop calling after that. No error or any issues displaying there. Please suggest.
function(e){
var xhr = Titanium.Network.createHTTPClient();
var Request = "<RefId>"+idArray[e.index]"</RefId>";
xhr.open("POST", url);
xhr.setRequestHeader("WWW-Authenticate","Basic");
xhr.setRequestHeader("Content-Type","text/xml", "charset=utf-8");
xhr.setRequestHeader("Content-Length", Request.length);
xhr.setRequestHeader("SOAPAction", "http://example.com");
xhr.onload = function() {
var doc = Titanium.XML.parseString(this.responseText);
var type = doc.getElementsByTagName("studentName");
Ti.API.info(type.item+';'+type.item.length);
if(type.item.length<1){
file = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, "textfile.txt");
}
doc=null;
type=null;
if(idArray.length>e.index){
//alert('Calling API');
var url="http://example.com";
var Request = "<RefId>"+idArray[e.index++]"</RefId>";
xhr.setTimeout(2500);
xhr.open("POST", url);
xhr.send(Request);
}
};
xhr.onerror = function(){
alert('Error')
};
xhr.send(Request);
}

I would try recreating the client each time not just calling send again

With javascript, how do you get final result URL after 302 redirect on img src?

If there is an img tag in a page whose final image it displays comes after a 302 redirect, is there a way with javascript to obtain what that final URL is after the redirect? Using javascript on img.src just gets the first URL (what's in the page), not what it was redirected to.
Here's a jsfiddle illustration: http://jsfiddle.net/jfriend00/Zp4zG/

No, this is not possible. src is an attribute and it does not change.

I know this question is old, and was already marked answered, but another question that I was trying to answer was marked as a duplicate of this, and I don't see any indication in any of the existing answers that you can get the true URL via the HTTP header. A simple example (assuming a single image tag on your page) would be something like this...
var req = new XMLHttpRequest();
req.onreadystatechange=function() {
if (req.readyState===4) {// && req.status===200) {
alert("actual url: " + req.responseURL);
}
}
req.open('GET', $('img').prop('src'), true);
req.send();

If you are open to using third party proxy this can be done. Obviously not a javascript solution This one uses the proxy service from cors-anywhere.herokuapp.com. Just adding this solution for people who are open to proxies and reluctant to implement this in backend.
Here is a fork of the original fiddle
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$.ajax({
type: 'HEAD', //'GET'
url:document.getElementById("testImage").src,
success: function(data, textStatus, request){
alert(request.getResponseHeader('X-Final-Url'));
},
error: function (request, textStatus, errorThrown) {
alert(request.getResponseHeader('X-Final-Url'));
}
});

based on http://jsfiddle.net/jfriend00/Zp4zG, this snippets works in Firefox 17.0:
alert(document.getElementById("testImage").baseURI)
It doesn't work in Chrome. Not tested anything else-

Here is a workaround that I found out. But it works only if the image on the same domain otherwise you will get an empty string:
var img = document.getElementById("img");
getSrc(img.getAttribute("src"), function (realSrc) {
alert("Real src is: " + realSrc);
});
function getSrc(src, cb) {
var iframe = document.createElement("iframe"),
b = document.getElementsByTagName("body")[0];
iframe.src = src;
iframe.className = "hidden";
iframe.onload = function () {
var val;
try {
val = this.contentWindow.location.href;
} catch (e) {
val = "";
}
if (cb) {
cb(val);
}
b.removeChild(this);
};
b.appendChild(iframe);
}
http://jsfiddle.net/infous/53Layyhg/1/