AJAX Request Too Long / Bad Request - javascript

Greetings Everyone
I am using the following code to send data to update to a php file. The problem is I get a Request Too Long issue. I have used the 'POST' method I believe if thats the right way. Yes the data I am sending is quiet huge. So what can I do?
var link = 'updateFirstPost.php?post_id='+id+'&first_post='+encodeURIComponent(text);
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
refreshPost(div_post, thread_id , id);
}
}
xmlhttp.open("POST",link,true);
xmlhttp.send();
The problem is I get a Request Too Long issue. I have used the 'POST' method I believe if thats the right way. So what can I do?

You are putting the data into the URL, which will always cause them to be sent as GET data. GET requests have natural length limitations on both the server's and the browser's side.
To send the data through POST, you need to put the parameters like so:
var params = 'first_post='+encodeURIComponent(text);
....
http.send(params);
(stolen from here)
If this is not for learning purposes, consider using a JS framework like jQuery. It makes stuff like this much, much easier and less code-intensive.

Related

Javascript get plain text from server

I want to receive a plain text(or any document) from my server as a string variable and for example show it in alert I tried this solution
wordsurl = "http://alpha/test";
function ButtonClicked() {
showsentence(wordsurl)
}
function httpGet(theUrl)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
return xmlhttp.responseText;
}
}
xmlhttp.open("GET", theUrl, false );
xmlhttp.send(); // NS_ERROR_FAILURE is here
}
function showsentence(generatorurl) {
alert(httpGet(generatorurl));
}
but i'm getting NS_ERROR_FAILURE. Which is referring to the send.
Here is a
How to get plain text from a server?
Here is Server code
Ah, now I see..
You should serve your html page from a http:// server.. Not as a file file://
So setup a simple http server, and try to access it again. You could also serve it from the same server, like your app logic
URL not found.(Is http://alpha/test in your computer?)
Maybe you can change file:// to http://

How can javascript return a query parameter to client

Can javascript act like a web service and return a parameter value received in a query string to the client that posted the query? I am trying to return a query parameter in C# with no success. For example, if the query string is http://www.mypage/service?hubchallenge=1234 what javascript code would be used to return the value 1234 to the client without returning the web page itself?
You should have to you AJAX for it in your page. It cannot be done without passing a request from the client.
The below javascript code has to be placed in the page which send request.
function test()//the function can be called on events
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for other browsers
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET"," http://www.mypage/service?hubchallenge=1234",true);
xmlhttp.send();
}
In javascript, you can get the url into a string like this:
var urlString=document.URL;
then you can parse out parameters like
var qs=urlString.split("?")[1];
var qsArray=qs.split("&");

Is there any data limit size for ajax xmlhttprequest post method my xhr get cut off?

I am trying to send some html data to php script using ajax xmlhttprequest post method. But for some reason My XHR POST REQUEST is cut off and not all data get transferred to my doit.php script. However the same html data from textarea form get passed to doit.php script correctly via normal form post method! could you guys help me overcome this problem and be able to pass this html data via xhr request ?
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","http://www.mysite.com/doit.php?Name=test&Id=12345",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("outputtext="+siteContents);
I think you should also encodeURIComponent() your siteContents string:
xmlhttp.send("outputtext=" + encodeURIComponent(siteContents));
That's because POST variables are delimited by an ampersand (&). The problem probably is that your string is also containing an ampersand which will be interpret as the beginning of a new POST variable.
You could easily check this if you output all received POST variables in your PHP script:
var_dump($_POST);
This looks like a GET request to me, because of the question mark and name/value pairs in the URL:
http://www.mysite.com/doit.php?Name=test&Id=12345
Here's how to make a POST request with AJAX:
http://www.javascriptkit.com/dhtmltutors/ajaxgetpost2.shtml

Why is my basic Ajax script not working?

I have been playing around with Javascript and now I came to Ajax. I am trying to write very simple script that would get the file contents - print the txt file contents in the div with id=test. This is the script :
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET" , url ,false);
xmlhttp.send(null);
document.getElementById('test').innerHTML = xmlhttp.responseText;
}
when I use it on this website :
<div id="test" name="test"> HELLo </div>
<button type="button" onclick="loadXMLDoc('test1.txt')">ClickMe1</button>
With this script HELLo is substituted by nothing - the script empties the container.
Maybe I am missing something trivial but do I need PHP installed ? I don't think so but... I am not sure what is happening in here. When I am debugging the xmlhttp is empty the whole time. Why ?
You'll need to check for readyState and the HTTP response status before replacing the text;
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("test").innerHTML=xmlhttp.responseText;
}
example on http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp
Please let me know if it works.
For browsers other than IE
IE's active X object seems not to care much about the ready state, other browsers may not have the text loaded quickly enough at the time you run your function (hence why you are getting the blank instead of file contents). IE's active X seems to handle this automatically and ignores the ready state, so you have to break up the code differently as below. Normally you check the status of the request to see if it's been fully read or not before accessing the responseText.
Add onreadystatechange you cannot check the status attribute since there is no HTTP requests being made on a file system request. (The status will always be 0 for request not made via HTTP) The best I can offer is this:
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
document.getElementById('test').innerHTML = xmlhttp.responseText;
}
xmlhttp.open( "GET", url );
xmlhttp.send(null);
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open( "GET", url );
xmlhttp.send(null);
document.getElementById('test').innerHTML = xmlhttp.responseText;
}
}
For CHROME
If you are using CHROME you must start chrome up with the --allow-file-access-from-files switch. Otherwise, it will refuse file system ajax requests. (You will have to set this even if using a so-called "easier" library such as jQuery).
Running AJAX apps on File System In General
Not usually a good idea, a lot of caveats to this route. Typically local development is done with a web server installed to localhost on your development machine.
Today its old fashion to call ajax like xmlhttp = new XMLHttpRequest();
You have many other options for this.
http://api.jquery.com/jQuery.ajax/
http://www.w3schools.com/jquery/jquery_ref_ajax.asp
http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
Firstly, you have to fight with Same Origin Policy.
A simple working code for a synchronous request is following:
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (req.status == 200 && req.readyState == 4) {
...
}
req.open('GET', url, true);
req.send(null);
Note this is working for Firefox/Opera/Chrome. If IE, use:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
You need a server to listen up to requests. Your regular file system will not be able to respond to AJAX requests.
You don't need PHP, however you'll need apache or a similar web server.
Try with jQuery. Download the last version here and write this code snippet:
function loadXMLDoc(url) {
$("#test").load(url);
}
It's much simpler and less error prone

Load specific XML content to HTML

I'm trying to load specific content from a XML to a HTML div. I'm using a function with parameters to do this.
This my call to function:
loadDoc("news.xml","destak-article","article");
this should send a request for the xml file, get the content of «article» tag and put it on the «destak-article» div.
Here's my function body:
function loadDoc(url,id,tagname){
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest(); // code for IE7+, Firefox, Chrome, Opera, Safari
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5
}
xmlhttp.open("GET",url,false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
document.getElementById(id).innerHTML = xmlDoc.getElementsByTagName(tagname)[0].childNodes[0].nodeValue;
}
But this doesn't seem to work.
On Chrome js console I get this error: Cannot call method 'getElementsByTagName' of null
On Firebug I get: xmlDoc.getElementsByTagName(tagname)[0] is undefined
Any help is much appreciated.
Did you verify the server response? Use some error checking in your code. For example:
if (xmlhttp.status == 200) {
document.getElementById(id).innerHTML = xmlDoc.getElementsByTagName(tagname)[0].childNodes[0].nodeValue;
}
else {
alert('error');
}
You need to register a handler function that will be called once the request is complete. You can see an example of how to do that here.
What's happening in your case is that you're trying to get the xmlDoc immediately after sending the request and the server hasn't had time to process the request and respond yet.

Categories