PHP ajax example_PHP tutorial-PHP Tutorial-php.cn

[Introduction to AJAX]

Ajax is a Web application development method that uses client-side scripts to exchange data with a Web server. Web pages can be updated dynamically without interrupting the interaction process to be re-tailored. Using Ajax, users can create direct, highly available, richer, and more dynamic Web user interfaces that are close to native desktop applications.

Asynchronous JavaScript and XML (AJAX) is not a new technology, but uses several existing technologies - including Cascading Style Sheets (CSS), JavaScript, XHTML, XML, and Extensible Style Language Transformations (XSLT) to develop look and action Web application software similar to desktop software.

[AJAX execution principle]

An Ajax interaction starts with a JavaScript object called XMLHttpRequest. As the name implies, it allows a client-side script to perform HTTP requests and will parse an XML-formatted server response. The first step in Ajax processing is to create an XMLHttpRequest instance. Use the HTTP method (GET or POST) to handle the request and set the target URL to the XMLHttpRequest object.

When you send an HTTP request, you don't want the browser to hang and wait for a response from the server. Instead, you want to continue responding to the user's interface interactions through the page and process the server responses once they actually arrive. To accomplish this, you can register a callback function with XMLHttpRequest and dispatch the XMLHttpRequest request asynchronously. Control is immediately returned to the browser, and when the server response arrives, the callback function will be called.

[Practical application of AJAX]

1. Initialize Ajax

Ajax actually calls the XMLHttpRequest object, so first we must call this object. We build a function that initializes Ajax:
/**
* Initialize an xmlhttp object
*/
function InitAjax()
{
var ajax=false;
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
ajax = false;
}
}
if (!ajax && typeof XMLHttpRequest!='undefined') {
ajax = new XMLHttpRequest();
}
return ajax;
}

You may say that because this code calls the XMLHTTP component, it can only be used by IE browser. No, after my test, Firefox can also be used.
Then before we perform any Ajax operations, we must first call our InitAjax() function to instantiate an Ajax object.

2. Use Get method

Now our first step is to execute a Get request and add the data we need to get /show.PHP?id=1, so what should we do?

Suppose there is a link: News 1. When I click on the link, I can see the content of the link without any refresh. So what should we do? Woolen cloth?
//Change the link to:
＜a href="#" onClick="getNews(1)"＞News 1＜/a＞

//And set a layer to receive news, and set it not to display:
＜div id="show_news"＞＜/div＞

At the same time, construct the corresponding JavaScript function:

function getNews(newsID)
{
//If the parameter newsID is not passed in
if (typeof(newsID) == 'undefined')
{
return false;
}
//URL address required for Ajax
var url = "/show.php?id="+ newsID;

//Get the position of the news display layer
var show = document.getElementById("show_news");

//Instantiate Ajax object
var ajax = InitAjax();

//Use the Get method to make a request
ajax.open("GET", url, true);

//Get execution status
ajax.onreadystatechange = function() {
//If the execution status is normal, then assign the returned content to the layer specified above
if (ajax.readyState == 4 && ajax.status == 200) {
show.innerHTML = ajax.responseText;
}
}
//Send empty
ajax.send(null);
}

Then, when the user clicks the "News 1" link, the obtained content will be displayed in the corresponding layer below, and the page will not be refreshed. Of course, we omitted the show.php file above. We just assumed that the show.php file exists and can extract the news with ID 1 from the database normally.

This method is suitable for any element on the page, including forms, etc. In fact, in applications, there are many operations on forms. For forms, the POST method is more commonly used, which will be described below.

3. Use POST method

In fact, the POST method is similar to the Get method, but it is slightly different when executing Ajax. Let’s briefly describe it.

Suppose there is a form for users to enter information. We save the user information to the database without refreshing and give the user a success prompt.
//Construct a form. There is no need for attributes such as action and method in the form. All is done by ajax.
＜form name="user_info"＞
Name: ＜input type="text" name="user_name" /＞＜br /＞
Age:＜input type="text" name="user_age" /＞＜br /＞
Gender: ＜input type="text" name="user_sex" /＞＜br /＞

＜input type="button" value="Submit form" onClick="saveUserInfo()"＞
＜/form＞
//Build a layer that accepts return information:
＜div id="msg"＞＜/div＞

We see that there is no need to submit target and other information in the form above, and the type of submit button is only button, so all operations are performed by the saveUserInfo() function in the onClick event. Let’s describe this function:
function saveUserInfo()
{
//Get the acceptance return information layer
var msg = document.getElementById("msg");

//Get the form object and user information value
var f = document.user_info;
var userName = f.user_name.value;
var userAge = f.user_age.value;
var userSex = f.user_sex.value;

//The URL address of the receiving form
var url = "/save_info.php";

//Need POST value, connect each variable through &
var postStr = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;

//Instantiate Ajax
var ajax = InitAjax();

//Open the connection through Post method
ajax.open("POST", url, true);

//Define the transferred file HTTP header information
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//Send POST data
ajax.send(postStr);

//Get execution status
ajax.onreadystatechange = function() {
//If the execution status is successful, then write the return information to the specified layer
if (ajax.readyState == 4 && ajax.status == 200) {
msg.innerHTML = ajax.responseText;
}
}
}

The process of using the POST method is roughly like this. Of course, the actual development situation may be more complicated, which requires developers to think about it slowly.

4. Asynchronous callback (pseudo-Ajax method)

Under normal circumstances, we can solve the current problem using Ajax in Get and Post methods, but the application complexity is limited. Of course, during development we may encounter times when Ajax cannot be used, but we need to simulate the effect of Ajax, so then We can use pseudo-Ajax to achieve our needs.

The general principle of pseudo-Ajax is that we still submit a normal form, or something else, but we target the submitted value to a floating frame, so that the page will not be refreshed, but we need to see our Of course, JavaScript can be used to simulate prompt information for execution results. However, this is not real, so we need our execution results to be called back asynchronously to tell us what the execution results are like.

Suppose our requirement is to upload a picture, and we need to know the status of the picture after uploading, for example, whether the upload is successful, whether the file format is correct, whether the file size is correct, etc. Then we need our target window to return the execution result to our window, so that we can successfully simulate the process of an Ajax call.

The following code is a little longer and involves Smarty template technology. If you don’t know much about it, please read the relevant technical information.

Upload file: upload.html
//Upload form, specify target attribute as floating frame iframe1
＜form action="/upload.php" method="post" enctype="multipart/form-data" name="upload_img" target="iframe1"＞
Select the image to upload: ＜input type="file" name="image"＞＜br /＞
＜input type="submit" value="Upload pictures"＞
＜/form＞
//Layer to display prompt information
＜div id="message" style="display:none"＞＜/div＞

//Floating frame used as target window
＜iframe name="iframe1" width="0" height="0" scrolling="no"＞＜/iframe＞

Process the uploaded PHP file: upload.php
＜?php

/* Define constants */

//Define the MIME formats allowed for uploading
define("UPLOAD_IMAGE_MIME", "image/pjpeg,image/jpg,image/jpeg,image/gif,image/x-png,image/png");
//Allow image size, bytes
define("UPLOAD_IMAGE_SIZE", 102400);
//The image size is expressed in KB units
define("UPLOAD_IMAGE_SIZE_KB", 100);
//Picture upload path
define("UPLOAD_IMAGE_PATH", "./upload/");

//Get allowed image formats
$mime = explode(",", USER_FACE_MIME);
$is_vaild = 0;

//Loop through all allowed formats
foreach ($mime as $type)
{
if ($_FILES['image']['type'] == $type)
{
$is_vaild = 1;
}
}

//If the format is correct and does not exceed the size, upload it
if ($is_vaild && $_FILES['image']['size']0)
{
if (move_uploaded_file($_FILES['image']['tmp_name'], USER_IMAGE_PATH . $_FILES['image']['name']))
{
$upload_msg ="Uploaded picture successfully!";
}
else
{
$upload_msg = "Failed to upload image file";
}
}
else
{
$upload_msg = "Failed to upload the image, maybe the file exceeds". USER_FACE_SIZE_KB. "KB, or the image file is empty, or the file format is incorrect";
}

//Parse template file
$smarty-＞assign("upload_msg", $upload_msg);
$smarty-＞display("upload.tpl");

?＞

Template file: upload.tpl

{if $upload_msg != ""}
callbackMessage("{$upload_msg}");
{/if}

//Callback JavaScript function, used to display information in the parent window
function callbackMessage(msg)
{
//Open the layer where the parent window displays messages
parent.document.getElementById("message").style.display = "block";
//Write the message obtained in this window
parent.document.getElementById("message").innerHTML = msg;
//And set to automatically close the parent window’s message after 3 seconds
setTimeout("parent.document.getElementById('message').style.display = 'none'", 3000);
}

The process of using asynchronous callbacks is a bit complicated, but it basically implements the functions of Ajax and information prompts. If there are many information prompts in the accepted template, you can also handle it by setting layers. Let's adapt to the situation.