The simple use of Ajax in PHP

Source: Internet
Author: User
Tags http request php file

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="" onClick="getNews(1)">新闻1</a>
<div id="show_news"></div>

Construct the corresponding JavaScript function at the same time:

function getNews(newsID)
 if (typeof(newsID) == 'undefined')
  return false;
 var url = "/show.php?id="+ newsID;
 var show = document.getElementById("show_news");
 var ajax = InitAjax();
 //使用Get方式进行请求"GET", url, true);
 ajax.onreadystatechange = function() {
  if (ajax.readyState == 4 && ajax.status == 200) {
   show.innerHTML = ajax.responseText;

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.