I have an html file and a .txt file in the same directory hosted on a webserver. The html file contains the following code:
<html>
<head>
<script>
window.onload = function() {
receiveMessage();
}
function receiveMessage() {
var xmlhttp = new XMLHttpRequest;
xmlhttp.open("GET", "message.txt", true);
xmlhttp.send();
xmlhttp.onreadystatechanged = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
}
</script>
</head>
<body>
</body>
</html>
Since the text file message.txt contains "hello world", a javascript alert box containing that message should pop up when the response is received, but it's not. What am I doing wrong?
The property you are looking for is onreadystatechange not onreadystatechanged. There is no d on the end.
reorder the request and change function onreadystatechanged to onreadystatechange:
function receiveMessage() {
var xmlhttp = new XMLHttpRequest;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","message.txt",true);
xmlhttp.send();
}
put the open and send calls after the onready statechanged event like in http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
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("GET","demo_get.asp",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>
Related
I have some modal in index.php and want to load content into my modal with ajax request to ajax.php.
when i try to load the content with ajax.php the response inner ajax.php has load normaly but my .js in index.php not load for example my datepicker is not loaded inside modals
Call Function :
AJAX Request :
<script>
function addProduct(str) {
if (str=="") {
document.getElementById("responseModal").innerHTML="";
return;
}
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("responseModal").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","SERVER/ajax.php?id="+str,true);
xmlhttp.send();
}
</script>
My Modal:
<div class="xx-modal" id="open-modal">
<div class="xx-modal-dialog">
<button class="xx-modal-close uk-close" type="button"></button>
<div id="responseModal">Waiting For AJAX to Load!</div>
</div>
</div>
And This My JavaScript Src that i want to included inside my modal
<script src="example.com/static/assets/js/xxxx.js"></script>
<script src="example.com/static/assets/js/xxxx.js"></script>
<script src="example.com/static/assets/js/xxxx.js"></script>
if (this.readyState == 4 && this.status == 200) {
document.getElementById("responseModal").innerHTML =
this.responseText;
}
You problems is THIS this.responseText
Hey guys am new to ajax I have a php file and a ajax file. I just want to detect the php file from the ajax so I have send a request in ajax like
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(xmlhttp.responseText);
} else {
console.log('file not fetched');
}
xmlhttp.open("GET","first.php?m=babe",true);
xmlhttp.send();
}
}
loadXMLDoc();
</script>
</head>
<body>
</body>
</html>
My php file
<?php
include("ajax.html");
$p = $_REQUEST['m'];
if($p == 'babe') {
echo true;
}
When I run the ajax.html on localhost it doesn't show me any message in the window nor in the console.
Can you guys tell me why is it like this?
Thanx for the help
Some of your brackets were wrong:
function loadXMLDoc(){
var xmlhttp;
if(window.XMLHttpRequest){ // This bracket was missing
xmlhttp=new XMLHttpRequest();
}
else{ // This bracket was missing
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
alert(xmlhttp.responseText);
}
else{
console.log('file not fetched');
}
} // This bracket was on the wrong place (it enclosed the .open() and .send())
xmlhttp.open("GET","first.php?m=babe",true);
xmlhttp.send();
}
loadXMLDoc();
Also, a simpler way of defining the callback function is:
xmlhttp.onload=function(){
if(xmlhttp.status==200){
alert(xmlhttp.responseText);
}
else{
console.log('file not fetched');
}
}
Currently I am working on static HTML website. Now I am using following javascript code to read server side text file:
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc() {
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("GET", "results.txt", true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>content</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Here on click event data is just displayed.But now I want to change the content of text file on click event.I want to increment the number by 1 which resides in the file as content.
Please help me to do this...Thank you so much in advance.!!
EDIT:
I am using windows hosting.
You may do it like this
This is the index page. I have done it in JSP.
index.jsp
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc() {
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("GET", "newjsp.jsp", true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv">
<h2>content</h2>
</div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Then the server side coding
newjsp.jsp
<%#page contentType="text/html" pageEncoding="UTF-8" import="java.io.*"%>
<%
try {
BufferedReader in = new BufferedReader(new FileReader("C:/Users/sar/Documents/NetBeansProjects/WebApplication1/web/results.txt"));
// change the path to the txt file
String line;
int a = 0;
if((line = in.readLine()) != null)
a = Integer.parseInt(line)+1;
else
a = 1;
PrintWriter pw = new PrintWriter(new FileOutputStream("C:/Users/sar/Documents/NetBeansProjects/WebApplication1/web/results.txt"));
// change the path to the txt file
pw.println(a);
pw.close();
out.println(a);
}
catch(Exception e)
{
e.printStackTrace();
}
%>
You will have to create a results.txt file at the location specified.
I'm a newbie in AJAX and so I am facing a lot of problems in making a simple AJAX program. I have a button on which I want to do is that when I will click it the text of the div below it changes. I tried so much times but still couldn't find the bug.
Here is my code:
<html>
<head>
<script>
function loadXMLDoc() {
var xmlhttp;
if(!window.XMLHttpRequest) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlhttp = new XMLHttpRequest();
}
xmlhttp.onReadyStateChange = function () {
if(xmlhttp.readyState==2 && xmlhttp.status==200) {
document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open('GET', 'textfile.txt', true);
xmlhttp.send();
}
</script>
</head>
<body>
<button type="button" value="Click!" onClick="loadXMLDoc();">Hello World</button>
<div id='myDiv'>hello!</div>
</body>
</html>
And here is the text file:
<p>My name is areeb siddiqui</p>
<p>My name is areeb siddiqui</p>
Any help would be appreciated
Thanks in advance :)
Also here is my webpage : http://mytestingsite.site90.net/ajax/
This should work for you.. this is how i make my ajax requests.. so very similar
function loadXMLDoc() {
var xmlhttp = null;
if(!window.XMLHttpRequest) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlhttp = new XMLHttpRequest();
}
xmlhttp.open('GET', 'textfile.txt', true);
xmlhttp.send();
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState != 4 || xmlhttp.status != 200){return;}
document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
}
}
The reason your function was not updating is because onreadystatechange must be all lowercase
Change this block:
if(xmlhttp.readyState==4 && xmlhttp.status==200)
checK onreadystatechange
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
}
};
Change the onReadyStateChange with onreadystatechange
and xmlhttp.readyState==2 with xmlhttp.readyState==4
I have a quick question, the following only works on IE 7 and above, how can I make it work on firefox and opera aswell?
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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("GET","http://www.tdsoft.se/index.html",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Edit
Thanks for all your answers, now I just have another question regarding the followng code
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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)
{
return xmlhttp.responseText;
}
}
xmlhttp.open("GET","index.html",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Now I want to search through the xmlhttp.responseText (in other words call the function loadXMLDoc()) for key words, like for example "testfile" and if it exists multiple example "testfile_1" and "testfile_2"....."testfile_n" then "doSomething"
like this
function searchADocument(wordToSearchFor){
int numberOfTimesWordOccurs=0;
var thePageToSearchThrough [] = loadXMLDoc();
for (i=0; i<thePageToSearchThrough.length; i++){
if(thePageToSearchThrough[i]==wordToSearchFor)
numberOfTimesWordOccurs++;
}
If (wordToSearchFor > 1)
document.write(" testfile_1" testfile_2 testfile_n
)
Else
window.location="http://selnc05.go.se:8080/component_test/build/testfile.html";
}
I don't know where to start since I don't know what type xmlhttp.responseText is, can I store it in an array and scan it using for loop etc?
Thanks in advance. =)
Try something like this:
ajax("http://www.tdsoft.se/index.html", function(data) {
document.getElementById("myDiv").innerHTML = data;
});
Code
function getXmlHttpObject() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function ajax(url, onSuccess, onError) {
var xmlHttp = getXmlHttpObject();
xmlHttp.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status != 200) {
if (typeof onError == 'function') {
onError(this.responseText);
}
}
else if (typeof onSuccess == 'function') {
onSuccess(this.responseText);
}
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
return xmlHttp;
}