How to Ajax-Enable this Code?

**Dormilich** · Apr 16 '12, 05:27 PM

How can I do this with AJAX or JQuery?

jQuery is just a predefined set of JavaScript functions (= library). other than that there is no difference between jQuery and JavaScript.

AJAX is merely a kind of Design Pattern (which uses a special object), but that’s it. you can imagine it as a background HTTP Request.

How can I change this code to an Ajax-enabled one. I wish to click on the "Delete" column. It should then run "delete.php " with its arguments behind the scene without refreshing the current "list.php" page. When the file was deleted, I can use a JavaScript function to delete the current row of the current column.

that’s exactly how you would do it. just read some not too old AJAX tutorials to get the hang of it.

note: I’d use headers to communicate the deletion success (i.e. HTTP 200 or 204 if the deletion succeeded and a HTTP 500 if the deletion failed)

**nicebasic** · Apr 16 '12, 06:29 PM

I think the following function should be included in the <HEAD> tag of the page:

Code:

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");
  }
}
</script>

Is this a good start to enable AJAX for this task?

Which file should be AJAX-enabled?
"delete.php " or "list.php"?

Thank you for your attention.

**Dormilich** · Apr 16 '12, 07:31 PM

it’s a start, but won’t bring you further. (it has something to do with scope).

a slightly more advantageous function* would be:

Code:

var Ajax = {
    createXHRObject : function() {
        var methods = [
            function() { 
                return new XMLHttpRequest(); 
            },
            function() { 
                return new ActiveXObject("MSXML2.XMLHTTP"); 
            },
            function() { 
                return new ActiveXObject("Microsoft.XMLHTTP"); 
            }
        ];
        for (var i = 0, l = methods.length; i < l; i++) {
            try {
                methods[i]();
            }
            catch (e) {
                continue;
            }
            Ajax.createXHRObject = methods[i]; // that’s called memoization
            return methods[i];
        }
        throw new Error("Could not create XHR object.");
    }
};

// create an AJAX object:
var xhr = Ajax.createXHRObject();

* - adapted from R. Harmes, D. Diaz, "Pro JavaScript Design Patterns" (2008)

**nicebasic** · Apr 16 '12, 08:37 PM

I studied some pages about AJAX, but I don't understand it yet. However, I used the following easy and short technique to do this task. By adding the following code to "list.php":

Code:

<script type="text/javascript">
function loadXMLDoc(delURL)
{
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.open("POST",delURL,true);
xmlhttp.send();
}
</script>

amd calling "loadXMLDoc " function using the following method:

Code:

onClick=loadXMLDoc(delURL)

it works with no problem.

But I have a question. Is this a standard way of using AJAX? Is it compatible with other browsers?

**Dormilich** · Apr 17 '12, 05:11 AM

more or less. it should be xmlhttp.open("G ET", delURL, false); (since you don’t send data (see next line), there is no reason to use POST and since you don’t process the response, there is no need to make it asynchronous)

**nicebasic** · Apr 18 '12, 02:44 PM

What's the difference between:

Code:

xmlhttp.open("POST",delURL,true);

and

Code:

xmlhttp.open("GET", delURL, false);

?

Does the 2nd code run faster?

And about your comment: (since you don’t process the response, there is no need to make it asynchronous), I still don't understand it.

I have a file "list.php" that lists the files of a specific directory. I wish to call "delete.php " by putting code in "onClick" Event of a <td> or <div> or <a> without leaving or refreshing "list.php".

Does it work if I change it to "false"?

Please help me understand this better. I still don't get the difference between synchronous and asynchronous in this case.

Thank you for helping me.

By the way, you have highlighted xmlhttp.open("G ET", delURL, false); in your last post. How did you do it? I think you have more options in the editor since you're a moderator. Am I right? We don't have such options in the editor.

**0nth3l3ft** · Apr 18 '12, 05:03 PM

@Dormilch: why not user jQuery? makes things a bit easier for a beginner...

list.html:

Code:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
function deleteFile(filename){

	$.get("deletefile.php",{"file":filename},function(response){

		//data given by your deletefile.php

		if(response == "ok") {

						alert("File '"+filename+"' is deleted!");
			$("#"+filename).remove();
		}else{

			alert("Error!");

		}

	});

}
</script>
</head>

<body>
<li id="file1">File1 <input type="button" value="Delete" onclick="deleteFile('file1')"></li>
<li id="file2">File2 <input type="button" value="Delete" onclick="deleteFile('file2')"></li>
<li id="file3">File3 <input type="button" value="Delete" onclick="deleteFile('file3')"></li>
<li id="file4">File4 <input type="button" value="Delete" onclick="deleteFile('file4')"></li>
</body>
</html>

deletfile.php:

Code:

<?php
if(isset($_GET['file'])){
	//delete it
	echo "ok";
}else{
	echo "error";
}	
?>

**Dormilich** · Apr 18 '12, 07:24 PM

@Dormilch: why not user jQuery? makes things a bit easier for a beginner...

does it help him understand how AJAX works? I don’t think so. he doesn’t even know the difference between GET & POST or synchronous and asynchronous. does jQuery make that easier to understand? (despite the fact that jQuery uses Functional Programming, which is IMHO way over his head).

back to topic:

Does the 2nd code run faster?

yes and no. it’s the difference in intention.

POST is absolutely pointless if you don’t send data (leave the .send() method empty). further, POST is used to send data for saving on the server (e.g. SQL INSERT/UPDATE). GET is used to request a resource identified by one or more identifiers (SQL SELECT).

And about your comment: (since you don’t process the response, there is no need to make it asynchronous), I still don't understand it.

in Client-Server communication via HTTP there are 2 steps:
1) the client makes a request to the server
[server processes the request]
2) the server sends a Response to the client
[the client processes the response]

since all you do is send the delete request and do nothing more, why should do an asynchronous (= do something when the response comes) call?

personally I recommend to not skip the client response processing. it might be that the deletion on the server failed! (for whatever reason)

By the way, you have highlighted xmlhttp.open("G ET", delURL, false); in your last post.

[ICODE] /* some code here */ [/ICODE]

**0nth3l3ft** · Apr 18 '12, 07:44 PM

does it help him understand how AJAX works?

No it doesn't. Your right.

does jQuery make that easier to understand? (despite the fact that jQuery uses Functional Programming, which is IMHO way over his head).

In my opinion yes. using jQuery you don't have to deal with the whole browser compatibly crap...

**Dormilich** · Apr 18 '12, 07:46 PM

inhowfar differ IE and FF in handling AJAX besides creating the XHR object?

**nicebasic** · Apr 18 '12, 08:49 PM

Thank you, 0nth3l3ft, for paying attention to this matter.

Your submission is really helpful. It inspired me to think about jQuery. The code you have given here is excellent.

I'm trying to understand it.

As a matter of fact, when I run the file "delete.php " for the onClick Event, I pass it this way:

Code:

confirmDelete(delURL)

I have a reason to call it this way. I have written another page for moving files from one directory to another directory. When you click on the name of a file in a list, it will be moved to another folder. Passing delURL or moveURL this way makes the job easier for me.

So, I need to call your "deleteFile('fi le1')" inside "confirmDelete( delURL)".

I don't know how to modify your code to be used this way. Your useful submission needs that the user passes different arguments separately to it.

Thank you again for you attention.

How to Ajax-Enable this Code?

How to Ajax-Enable this Code?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment