I'm new to Ajax. I'm writing two function in one file called home.php and make an Ajax call to members.php.
My problem is when I send an data with ajax call I fail to get response.
home.php
<script language="javascript" type="text/javascript">
var httpObject=false;
var httpObject1=false;
if(window.XMLHttpRequest){
httpObject = new XMLHttpRequest();
httpObject1 = new XMLHttpRequest();
}else if(window.ActiveXObject){
httpObject = new ActiveXObject("Microsoft.XMLHttp");
httpObject1 = new ActiveXObject("Microsoft.XMLHttp");
}
function logout(){
if(httpObject.readyState == 4 && httpObject.status == 200){
var response = httpObject.responseText;
if(response == "logout"){
window.location.href="index.php";
}
else{
error.innerHTML = "Sorry, Invalid Login.";
}
}
}
function get_Request_Member_List(type){
var member_Type = type;
var queryString = "?data1=" + member_Type ;
if(httpObject1.readyState == 4 && httpObject1.status == 200){
var response = httpObject1.responseText;
document.getElementById(type).innerHTML = response;
}
}
httpObject.open("GET", "logout.php" ,true);
httpObject.send(null);
httpObject1.open("GET", "members.php"+queryString ,true);
httpObject1.send(null);
</script>
members.php
<?php
echo "hello";
?>
Don't forget to add an onreadystatechange event handler to your XMLHTTPRequest, e.g.:
httpObject.onreadystatechange = logout;
Related
I am very new in programming websites I created a website already but am now attempting to add in a database. I have that all set up but ajax isnt working and I'm not sure what I'm doing wrong.
Here is my javascript code :
<script>
var ajax = new XMLHttpRequest();
var method = "Get";
var url = "data.php";
var asynch = true;
ajax.open(method, url, asynch);
ajax.send();
//recive ajax
ajax.onreadystatechange = function()
{
if(this.readyState == 4 && this.status == 200)
{
alert(this.responseText);
}
}
/*
function chbg(color, name) {
document.getElementById(name).style.backgroundColor = color;
document.getElementById(name + 'Chore').style.backgroundColor = color;
document.getElementById(name+ 'Bathroom').style.backgroundColor = color;
}
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
*/
</script>
Here's the php all I'm trying to do right now is get the 2 to connect.
<?php
echo "Hello World";
?>
I didn't understand what you're exactly trying to do but your php file just echo something and he does not return something so your responseText property is empty.
i am using php and ajax together to access data from user and insert into database.problem is that it works fine with small string but when i try to send data on 10000 characters browser prompts an error saying url to long.. i can make change in php but i want it to be dynamic so i have to it using this way only.. help me plz.
function submitQuestion(){
var x=document.forms['Ask']['title'].value;
var y=document.forms['Ask']['description'].value;
if(x.length == 0 || y.length == 0){
alert('Insufficient Data');
}else{
startLoading();
console.log(y);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status==200){
console.log(this.responseText);
if(this.responseText == "All Done"){
clearInterval(startLoadingClearInt);
alert("data Inserted");
// window.location.replace('../profile/userprofile.php');
}
}
};
//here x is very inn some cases and produces an error
xhttp.open("POST","./submitQuestion.php?title="+x+"&description="+y, true);
xhttp.send();
}
}
You cannot transfer large data via url (as messerbill said). You have to send them in the Body:
function submitQuestion(){
var x=document.forms['Ask']['title'].value;
var y=document.forms['Ask']['description'].value;
if(x.length == 0 || y.length == 0){
alert('Insufficient Data');
}else{
startLoading();
console.log(y);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status==200){
console.log(this.responseText);
if(this.responseText == "All Done"){
clearInterval(startLoadingClearInt);
alert("data Inserted");
// window.location.replace('../profile/userprofile.php');
}
}
};
//here x is very inn some cases and produces an error
xhttp.open("POST","./submitQuestion.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("title="+x+"&description="+y");
}
}
inside the PHP-Script you get the data via the $_POST Array, not via the $_GET Array!
I am trying to send a form data using POST method and xmlhttp.open
Please help find the error in my code
function submitChat() {
if (form1.msg.value == '' ) {
alert ('ALL FIELDS ARE MANDATORY');
return;
}
var xmlhttp = new XMLHttpRequest();
var msg = form1.msg.value;
var params = 'msg=helloooooooo';
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('POST', 'rtest.php?rid=14', true);
xmlhttp.send(params);
}
Everything is fine and it is working with GET method. but POST method is not working. Please help.
I have tried to get i connection to an php file but i don't recive any reponse from server is anything wrong?,
function request(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "http://people.dsv.su.se/~pierre/courses/05_ass/ip3/3/3.7.1/example.php";
var number1 = document.getElementById("number1").value;
var number2 = document.getElementById("number2").value;
var vars = "?number1="+number1+"&number2="+number2
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("result").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("result").innerHTML = "processing...";
}
I don't get any answer from the server were have i done wrong?
I have now tried to write it in jquery insteed but still no response from server
$(document).ready(function() {
// Skicka nummrerna vid klick på #calculate
$('#calculate').click(function() {
var url = "http://people.dsv.su.se/~pierre/courses/05_ass/ip3/3/3.7.1/example.php?";
var number1 = document.getElementById("number1").value;
var number2 = document.getElementById("number2").value;
var numbers = url + number1 + "&" + number2
if (window.XMLHttpRequest)
{// Kod för nya webbläsare
xmlhttp=new XMLHttpRequest();
}
else {//om det inte är en nyare webbläsare
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// Skriv ut svaret från servern i result
document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",numbers,true);
xmlhttp.send();
alert(numbers);
});
});
You're formatting your variables as if you're using them in a GET request, but then setting your request up for a POST.
[edit: to demonstrate comments]
Try changing these two lines.
hr.open("GET", url + vars, true);
hr.send();
[edit] Full original code with the changes
function request(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "http://people.dsv.su.se/~pierre/courses/05_ass/ip3/3/3.7.1/example.php";
var number1 =22;// document.getElementById("number1").value;
var number2 =22;// document.getElementById("number2").value;
var vars = "?number1="+number1+"&number2="+number2
hr.open("GET", url + vars, true);
// Set content type header information for sending url encoded variables in the request
//hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("result").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(); // Actually execute the request
document.getElementById("result").innerHTML = "processing...";
}
You need to send() your request with the data as the param. Something like:
params = "number1="+number1+"&number2="+number2;
hr.send(params);
Here is the complete code in jQuery format:
$(document).ready(function () {
$('#calculate').click(function () {
var url = "http://people.dsv.su.se/~pierre/courses/05_ass/ip3/3/3.7.1/example.php?number1=" + $("#number1").val() + "&number2=" + $("#number2").val();
$.ajax(url, {
complete: function (data, textStatus, jqXHR) {
//Put the code that handle the response here
$("#result").html(data.responseText);
}
});
});
});
I have some problems of calling a php file using Ajax in my
Mozilla Extension.
The javascript (Ajax) and php are both located at directory /myextension/content, I am call the php using
function ajaxFunction(){
var req = new XMLHttpRequest();
req.open('GET', 'myphp.php', true);
req.onreadystatechange = function (aEvt) {
if (req.readyState == 4) {
if(req.status == 200)
alert(req.responseText);
else
alert("Error\n");
}
};
req.send(null);
}
, and my php looks like
<? php
echo "Server Received with thanks!";
?>
I keep geting "alert("Error\n");".
Did i do anything wrong?
Well formatted Ajax code for Firefox:
var URL="http://yourdomain.com/Work.php?val=Test";
var objXmlHttp = null;
try
{
objXmlHttp = new XMLHttpRequest();
}
catch(e)
{return;}
objXmlHttp.onreadystatechange=function()
{
if ((objXmlHttp.readyState == 4 || objXmlHttp.readyState == "complete") && objXmlHttp.status == 200)
{
//Write code for success
}
else if (objXmlHttp.status == 404)
{
//OnError
}
else
{
//OnWait
}
}
objXmlHttp.open("GET", URL, true);
objXmlHttp.send(null);