Shulou(Shulou.com)06/03 Report--

What are the application skills of AJAX development technology in PHP development? I believe many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problems. Through this article, I hope you can solve this problem.

[introduction to AJAX]

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

Asynchronous JavaScript and XML (AJAX) are not new technologies, but use several existing technologies-including cascading stylesheets (CSS), JavaScript, XHTML, XML, and Extensible style language transformations (XSLT)-to develop Web applications that look and operate like desktop software.

[AJAX implementation principle]

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

When you send a HTTP request, you don't want the browser to hang and wait for a response from the server. Instead, you want to continue to respond to the user's interface interaction through the page and process them after the server response actually arrives. To do this, you can register a callback function with XMLHttpRequest and dispatch XMLHttpRequest requests 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, and we build a function that initializes the Ajax:

/ * *

* initialize 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 xMLHttpRequestrated undefined) {

Ajax = new XMLHttpRequest ()

}

Return ajax

}

You might say, because this code wants to call XMLHTTP components, only IE browsers can make, no, after my experiments, Firefox can also be used.

Then we must call our InitAjax () function to instantiate an Ajax object before performing any Ajax operation.

two。 Use Get mode

Now let's take the first step to execute a Get request to 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 do not want to refresh to see the contents of the link, then what should we do?

/ / 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

}

/ / the URL address where Ajax is required

Var url = "/ show.php?id=" + newsID

/ / get the location of the news display layer

Var show = document.getElementById ("show_news")

/ / instantiate Ajax object

Var ajax = InitAjax ()

/ / use Get to make requests

Ajax.open ("GET", url, true)

/ / get the 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) {

Rao [XSS _ clean] = ajax.responseText

}

}

/ / send empty

Ajax.send (null)

}

Then, when the user clicks the "News 1" link, the acquired content will be displayed in the corresponding layer below, and the page will not be refreshed. Of course, we omit the show.php file above, we just assume that the show.php file exists and can extract the news with an id of 1 from the database.

This method is suitable for any element on the page, including the form, etc., in fact, in the application, the operation of the form is more, for the form, more use of the POST way, which will be described below.

3. Use POST mode

In fact, the POST mode is similar to the Get mode, except that there is a slight difference in the implementation of Ajax. Let's talk about it briefly.

Suppose there is a form in which the user enters data, and we save the user's data to the database without refreshing and give the user a successful hint.

/ / build a form that does not require attributes such as action or method, and is all handled by ajax.

Name:

Age:

Gender:

/ / build a layer that accepts the returned information:

We see that there is no need to submit target and other information in the form 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 information layer of receiving and returning

Var msg = document.getElementById ("msg")

/ / get form objects and user information values

Var f = document.user_info

Var userName = f.user_name.value

Var userAge = f.user_age.value

Var userSex = f.user_sex.value

/ / receive the URL address of the form

Var url = "/ save_info.php"

/ / the value of POST is required, and each variable is joined by &

Var postStr = "user_name=" + userName + "& user_age=" + userAge + "& user_sex=" + userSex

/ / instantiate Ajax

Var ajax = InitAjax ()

/ / Open the connection via Post

Ajax.open ("POST", url, true)

/ / define the HTTP header information of the transferred file

Ajax.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded")

/ / send POST data

Ajax.send (postStr)

/ / get the execution status

Ajax.onreadystatechange = function () {

/ / if the execution status is successful, the return information is written to the specified layer

If (ajax.readyState = = 4 & & ajax.status = = 200) {

MSG [XSS _ clean] = ajax.responseText

}

}

}

This is roughly the process of using the POST approach, but of course, the actual development situation may be more complex, which requires developers to figure it out.

4. Asynchronous callback (pseudo-Ajax mode)

In general, using Get, Post way of Ajax we can solve the current problem, but the application complexity, of course, we may encounter in the development can not use Ajax, but we also need to simulate the effect of Ajax, then we can use pseudo-Ajax way to achieve our requirements.

The general principle of pseudo-Ajax is that we are still ordinary form submissions or something, but we target the value of the submission as a floating frame so that the page does not refresh, but, uh, we need to see our execution result, of course, we can use JavaScript to simulate the prompt message, but this is not true, so we need our execution result to call back asynchronously Tell us what the result of the implementation is.

Suppose our requirement is to upload a picture, and we need to know the status of the picture after upload, such as whether the upload is successful, whether the file format is correct, whether the file size is correct, and so on. 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 more and involves Smarty template technology. If you don't know much about it, please read the relevant technical materials.

Upload file: upload.html

/ / upload the form and specify that the target attribute is floating frame iframe1

Select the picture to upload:

/ / the layer that displays the prompt

/ / floating frame used to make the target window

Handling uploaded PHP files: upload.php

Template file: upload.tpl

{if $upload_msg! = ""}

CallbackMessage ("{$upload_msg}")

{/ if}

/ / callback JavaScript function, which is 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 down the messages obtained in this window

Parent.document.getElementById ("message") [xss_clean] = msg

/ / and set to automatically turn off the message display of the parent window after 3 seconds

SetTimeout ("parent.document.getElementById ('message'). Style.display =' none'", 3000)

}

The process of using asynchronous callback is a bit complicated, but it basically implements the functions of Ajax and information prompts. If you accept more information prompts from the template, you can also deal with it by setting a layer.

After reading the above, have you mastered the application skills of AJAX development technology in PHP development? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.