Ajax+php's application tutorial sample source code

Tutorials | Sample |ajax Ajax is undoubtedly one of the hottest web development technologies to fry in the 2005, and of course, this credit is inseparable from Google. I am just an ordinary developer, the use of Ajax is not very much, I simply put the experience I used to say. (This article assumes that users already have basic web development capabilities such as JavaScript, HTML, CSS, etc.)

　　 [Ajax Introduction]

Ajax is a Web application development method that uses client script to exchange data with a Web server. Web pages can be updated dynamically without interrupting the interactive process. With Ajax, users can create a direct, highly available, richer, more dynamic Web user interface that is close to local desktop applications.

asynchronous JavaScript and XML (AJAX) are not new technologies, but use several existing technologies-including cascading style sheets (CSS), JavaScript, XHTML, XML, and Extensible Style Language Transformations (XSLT), Develop Web applications that look and operate like desktop software.

　　 [AJAX implementation Principles]

An AJAX interaction begins with a JavaScript object called XMLHttpRequest. As the name implies, it allows a client script to execute the HTTP request and will parse an XML-formatted server response. The first step in the AJAX process is to create a XMLHttpRequest instance. Use the HTTP method (get or post) to process the request and set the target URL to the XMLHttpRequest object.

When you send an HTTP request, you do not want the browser to hang up and wait for the server to respond, instead, you want to continue to interact with the user's interface through the page and process them after the server response has actually arrived. To do this, you can register a callback function with XMLHttpRequest and distribute XMLHttpRequest requests asynchronously. Control is immediately returned to the browser, and the callback function is invoked when the server response arrives.

　　 [Ajax Practical Application]

1. Initialize Ajax

Ajax is actually calling the XMLHttpRequest object, so first we have to call this object, and we build a function that initializes Ajax:

/** * Initialization of a 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 this code because to call the XMLHTTP component, is not only IE browser can make, not by my experiment, Firefox can also be used.

So before we do any AJAX operation, we must first invoke our Initajax () function to instantiate an Ajax object.

2. Using Get method

Now the first step is to execute a GET request and join the data that we need to obtain/show.php?id=1, so what should we do?

Suppose there is a link: <a Href= "/show.php?id=1" > News 1 </a>, when I click on the link, I don't want any refreshing to see the link content, so what do we do?

Change the link to: News 1 and set a layer to receive the news, and set to not show:

Construct the corresponding JavaScript function at the same time:

function Getnews (NewsID) { If you don't pass the parameter NewSID in, if (typeof (NewsID) = = ' undefined ') { return false; } The URL address that needs to be Ajax var url = "/show.php?id=" + NewsID; Get the position of the news display layer var show = document.getElementById ("Show_news"); Instantiating an Ajax object var ajax = Initajax (); Request using Get method Ajax.open ("Get", url, True); Get Execution status Ajax.onreadystatechange = function () { If execution is normal, the returned content is assigned 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 corresponding layer below will display the content, and the page is not refreshed. Of course, we omitted the show.php file, and we just assumed that the show.php file existed and that it was able to extract the news ID 1 from the database correctly.

This way to adapt to any element of the page, including forms, and so on, in fact, in the application of the form of the operation is more, for the form, more use is the Post method, this will be described below.

3. Use POST method

In fact, the Post method is similar to get way, only slightly different in the implementation of Ajax , we simply tell.

If there is a user input form, we save the user data to the database without refreshing, and give the user a successful prompt.

Building a form that does not require attributes such as action, method, and so on, is all done by Ajax. Name: Age: Sex: Build a layer that accepts return information:

We see that there is no need to submit the target information in the form form above, and the type of the Submit button is just a button, then all operations are performed by the Saveuserinfo () function in the OnClick event. Let's describe this function:

function saveuserinfo () { //Get Accept return information layer var msg = Document.get Elementbyid ("msg"); //Get 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; //Receive form URL address var url = "/save_info.php"; ///The value to be post, join each variable via & var poststr = "User_name=" + Usernam E + "&user_age=" + userage + "&user_sex=" + usersex; //materialized Ajax var ajax = Initajax (), //Open connection by post Ajax.open ("post", url, True); //Defines the transmitted 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 execution status succeeds, Then write the return information to the specified layer if (ajax.readystate = 4 && Ajax.status = =) { msg.innerhtml = Ajax.responsetext; br>} }

This is how the post approach is used, and of course, the actual development situation can be more complex, which requires the developer to slowly ponder.

4. Asynchronous callback (pseudo Ajax method)

Under normal circumstances, using GET, post-style Ajax we are able to solve the current problem, but the application of complexity, of course, in development we may encounter can not use Ajax, but we need to simulate the effect of Ajax, then we can use the pseudo-Ajax way to achieve our needs.

Pseudo-Ajax general principle means that we are still ordinary form submission, or something else, but we're putting the value of the submission to a floating frame so that the page doesn't refresh, but then we need to see the results of our execution, and of course we can use JavaScript to simulate the hints, but This is not true, so we need our execution results to asynchronously callback and tell us what the result is.

Let's say we need to upload a picture, and we need to know the status of the image upload, such as whether the upload is successful, the file format is correct, the file size is correct, and so on. Then we need our target window to return the execution results to our windows so that we can simulate the process of an Ajax call smoothly.

The following code is slightly more and involves smarty templates Technology, if you do not understand, please read the relevant technical information.

Upload file: upload.html Upload form, specify target property as floating frame iframe1 Select the picture to upload: The layer that displays the cue message A floating frame used to make a target window

Handle the Uploaded PHPFile: upload.php

<?php /* Define constant * * To define a MIME format that allows uploads Define ("Upload_image_mime", "image/pjpeg,image/jpg,image/jpeg,image/gif,image/x-png,image/png"); Picture allowed size, byte Define ("Upload_image_size", 102400); The picture size is expressed in kilobytes. Define ("upload_image_size_kb", 100); The path of the picture upload Define ("Upload_image_path", "./upload/"); Get the allowed image format $mime = Explode (",", user_face_mime); $is _vaild = 0; Traverse all allowed formats foreach ($mime as $type) { if ($_files[' image '] [' type '] = = $type) { $is _vaild = 1; } } If the format is correct, and no more than the size of the upload up if ($is _vaild && $_files[' image ' [' Size ']<=user_face_size && $_files[' image '] [' Size ']>0) { if (Move_uploaded_file ($_files[' image '] [' tmp_name '], User_image_path. $_files[' image '] [' name ']) { $upload _msg = "Upload picture Success!" "; } Else { $upload _msg = "Upload image file failed"; } } Else { $upload _msg = "Upload image failed, may be file over". user_face_size_kb. " KB, or the picture file is empty, or the file format is not correct; } Parsing template files $smarty->assign ("Upload_msg", $upload _msg); $smarty->display ("Upload.tpl"); ? > Template file: Upload.tpl {if $upload _msg!= ""} Callbackmessage ("{$upload _msg}"); {/if} The JavaScript function of the callback used to display information in the parent window function Callbackmessage (msg) { Open the layer where the parent window displays the message Parent.document.getElementById ("message"). Style.display = "block"; Write the message from this window Parent.document.getElementById ("message"). InnerHTML = msg; and the message that automatically closes the parent window after 3 seconds is displayed settimeout ("Parent.document.getElementById"). Style.display = ' None ', 3000); }

The way to use asynchronous callback is a bit complicated, but the basic implementation of Ajax, as well as information prompts the function, if the template to receive more information, then you can set the layer of the way to deal with it.

　　 [Conclusion]

This is a very good web development technology, although the time is relatively long, but only slowly now, but also hope to bring a change in the web development community, let us towards the RIA (rich client) development, of course, anything beneficial also has drawbacks, if the excessive use of JavaScript, Then the client will be very bloated, not conducive to the user's browsing experience, how to achieve a fast pro premise, but also to do a good user experience, which requires web developers to work together.