The simple use of Ajax in PHP

Ajax is undoubtedly one of the hottest web development technologies to fry in the 2005, and of course, this credit cannot be separated 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:

/**
* 初始化一个xmlhttp对象
*/
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: News 1 , when I click on the link, I don't want any refreshing to see the link content, so what do we do?

//将链接改为：
＜a href="http://cms.cnblogs.com/index.php#" onClick="getNews(1)"＞新闻1＜/a＞
//并且设置一个接收新闻的层，并且设置为不显示：
＜div id="show_news"＞＜/div＞

Construct the corresponding JavaScript function at the same time:

function getNews(newsID)
{
　//如果没有把参数newsID传进来
　if (typeof(newsID) == 'undefined')
　{
　　return false;
　}
　//需要进行Ajax的URL地址
　var url = "/show.php?id="+ newsID;
　//获取新闻显示层的位置
　var show = document.getElementById("show_news");
　//实例化Ajax对象
　var ajax = InitAjax();
　//使用Get方式进行请求
　ajax.open("GET", url, true);
　//获取执行状态
　ajax.onreadystatechange = function() {
　　//如果执行是状态正常，那么就把返回的内容赋值给上面指定的层
　　if (ajax.readyState == 4 && ajax.status == 200) {
　　　show.innerHTML = ajax.responseText;
　　}
　}
　//发送空
　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.