I have an arduino wifi shield which is running the standard code that is provided in the tutorial (http://arduino.cc/en/Tutorial/WiFiWebServer). Then I go on chrome and access the ip address that arduino server is running on. Here is prints out the data that is required, so I see the page being updated and everything.
Now I want to access that data from my computer through an html page. I used the following to "GET" the data from that address however this is giving me problems. I am unable to get this to work. I can't get the status to ever be 200. I always get a 0.
<div id="myDiv"></div>
<script>
alert(window.location.host);
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() {
//alert(xmlhttp.readyState);
alert(xmlhttp.status);
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "http://192.168.0.101/", true);
xmlhttp.send();
</script>
My computer and the shield are both on the same network as I am connecting to them through the same router. I can't seem to have any luck trying to configure this correctly.
Related
I'm a beginner in Javascript , and I want to understand what the method XMLHttpRequest does.
This is the code that I was reading, and I was wondering if someone could explain what it is doing:
var xhttp;
xhttp=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP"),xhttp.open("GET","script.php",!0),xhttp.send();
Hi I am not really good in explanations, but I will try to explain this in details as I see and understand this.
The XMLHttpRequest is an object. It is used for exchanging of data with a server. So with its use you can send some data to the script on the server(request) and get some data back from it(response). That response data can be displayed instantly on the page without page reloading. So this process call AJAX.
I would read your provided code as
//define a variable
var xhttp;
/*assign a XMLHttpRequest object to this variable
check if the global object window has a XMLHttpRequest object already
if not and user have a newer browser, create one (new XMLHttpRequest - for IE7+, Firefox, Chrome, Opera, Safari browsers) or user have an older browser (ActiveXObject("Microsoft.XMLHTTP") - for IE6, IE5 browsers)
xhttp.open method specifies the type of request(method GET, Script on server, asynchronous)
xhttp.send method sends the request to a server*/
xhttp=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP"),xhttp.open("GET","script.php",!0),xhttp.send();
But you have to check the readyState property of the XMLHttpRequest object as well
xmlhttp.onreadystatechange = function() {
//4: request finished and response is ready
//200: "OK"
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//display of returned data from the server
//it is available in this property - xmlhttp.responseText
}
}
The whole peace of code should look like:
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest(); // code for IE7+, Firefox, Chrome, Opera, Safari
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//display of returned data from the server
//jquery example
$('div').html(xmlhttp.responseText);
}
}
xmlhttp.open("GET", "script.php", true);
xmlhttp.send();
Hopefully this helped, good luck!
It's a reference to an AJAX request.
See more at the MDN site.
In a nutshell, it is sending a GET request to script.php.
An XMLHttpRequest is a JavaScript object made for making AJAX request. I am not fully sure that code is correct. Usually you make an instance of the XMLHttpRequest object. Then you check the window ready state to make the request. Finally you make the request. This is an example of that:
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
callback(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
I hope that helps!
Happy coding!
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://
I used Webrequest in c# to get url Content. Then how to get url content using JavaScript/ Jquery please help to get url content...
WebRequest request = WebRequest.Create ("https://api.pcpartpicker.com/api/2015.1/part/categories/?apikey=XXXXXXXXXXXXXX");//Any Other Google Https Address
WebResponse response = request.GetResponse ();
This code is working and i got data from that url and how we write this code in Javascript
It is not possible to get external webpages content in your site with javascript.
only js,images formats are allowed from external source into your site
You can try this code
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();
}
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
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.