I have two PHP files to manage my files on a server:
list.php
delete.php
The file "list.php" shows a list of files in a specific directory of server. It uses a table to list the files. One of the columns in the table is named "Delete this file". If you click on that column in a row, the file "delete.php" with an argument will be called. It will delete the file passed to it through address bar arguments.
This is an easy example of "list.php" - <html>
-
<head>
-
<script type="text/javascript">
-
<!--
-
function KillFile(delFile) {
-
var answer = confirm("Delete this file? \n <?php echo $_GET["fname"]; ?>")
-
if (answer){
-
alert("File was deleted!");
-
window.location = "Delete.php?fname=" + delFile ;
-
window.location = "list.php";
-
}
-
else{
-
window.location = "list.php";
-
}
-
}
-
//-->
-
</script>
-
</head>
-
<body>
-
<form>
-
<input type="button" onclick="KillFile(fileName)" value="Delete">
-
<input type="button" onclick=window.location="list.php" value="Cancel">
-
</form>
-
</body>
-
</html>
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.
I know nothing about AJAX. It's too complicated for me.
How can I do this with AJAX or JQuery?
Thank you in advance.
11  2179  Dormilich 8,658
Recognized Expert Moderator Expert
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)
I think the following function should be included in the <HEAD> tag of the page: - 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 8,658
Recognized Expert Moderator Expert
it’s a start, but won’t bring you further. (it has something to do with scope).
a slightly more advantageous function* would be: - 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)
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": - <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: - 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 8,658
Recognized Expert Moderator Expert
more or less. it should be xmlhttp.open("GET", 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)
What's the difference between: - xmlhttp.open("POST",delURL,true);
and - 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("GET", 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.
@Dormilch: why not user jQuery? makes things a bit easier for a beginner...
list.html: -
<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: -
<?php
-
if(isset($_GET['file'])){
-
//delete it
-
echo "ok";
-
}else{
-
echo "error";
-
}
-
?>
-
 Dormilich 8,658
Recognized Expert Moderator Expert
@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("GET", delURL, false); in your last post.
[ICODE] /* some code here */ [/ICODE]
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 8,658
Recognized Expert Moderator Expert
inhowfar differ IE and FF in handling AJAX besides creating the XHR object?
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:
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('file1')" 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.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Yarco |
last post by:
I want to use "Ajax" to create my web for hobby.
But i don't know whether "Ajax" is mature...
And what about with php? Someone have experience on it?
....
|
by: bobzimuta |
last post by:
I'm creating a simple AJAX library. It's an object that will return an
array containing the response text or xml. I'm trying to find a way to
assign the response as a property of the object, but...
|
by: Alex |
last post by:
Example uploaded to:
http://www.clickatus.com/ajax/
BTW - This is for FIREFOX, won't work in IE.
I don't know why but when it is executed the browser still in loading
state... Even though...
|
by: melledge |
last post by:
Ajax Developers' Day added to XTech 2006 agenda
XTech 2006 - 17-19 May - Hotel Grand Krasnopolsky - Amsterdam, The
Netherlands
|
by: Steve |
last post by:
I need to build a very dynamic client and would be interested in knowing the pros and
cons of using JSF and Ajax to accomplish this.
Thanks.
Steve
| | |
by: Thirsty Traveler |
last post by:
Peter Bromberg has an interesting article eggheadcafe discussing AJAX
libraries. He prefers ANTHEM.NET over AJAX.NET because it doesn't break the
stateful page model. Our developers are currently...
|
by: Free Ebooks |
last post by:
81 AJAX and 24 JavaScript Ebooks
Here are some of the AJAX topics and areas covered by these ebooks:
Rails and AJAX
Building Ajax Web Applications
Creating Ajax Web Pages
Ajax Patterns
Ajax...
|
by: Nathan Sokalski |
last post by:
I am moving my website from my machine to my webhost, and need some help
with what extra files I need to include due to the fact that I used AJAX in
my site. Everything on the site is obviously...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| | |
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...
| |
