Ajax 入门

lb20309 · 发表于 2017-4-9 12:43:05

Getting started with AJAX using PHP : Tutorial
By : Mamun Zaman

Translated by: garcon1986

AJAX stands for Asynchronous JavaScript AndXML. Any server side technology that supports JavaScript also supports AJAX.AJAX is a browser technology, and is therefore independent of web serverplatforms.
AJAX代表了异步Javascript和XML。任何支持Javascript的服务器端技术也同样支持AJAX。AJAX是一种浏览器技术，因此也独立于网络服务器平台。

In this article we will learn about whatAJAX is, how it works, and how can we use AJAX with PHP. Please remember, AJAXis not a programming language, so you don’t have to learn any new technology.AJAX can be implemented by using existing standards (JavaScript and XML) in adifferent way.
在这篇文章中，我们会了解到什么是AJAX，AJAX如何工作以及在PHP中如何使用AJAX。请牢记：AJAX不是一门编程语言，因此你并不需要学习任何一门新技术。AJAX能通过现行的标准（Javascript和XML）以另一种方式来实现。

If we are using PHP or any server sidetechnology and need to extract data from storage on a server (eg a database ora file), we will have to make an HTTP request (either POST or GET) to get thedata. Once the data is received the web page will need to be reloaded to show thedata. Using AJAX technology we can request and receive the data from server inbackground and then display it on the page without a reload. AJAX uses HTTPrequests for this. With AJAX, JavaScript communicates directly with the server,through the JavaScript XMLHttpRequest object (XML over HTTP). With an HTTPrequest, a web page can make a request to, and get a response from a web serverwithout reloading the page.
如果我们使用PHP或者其他任何服务器端技术，并需要从一个服务器存储（数据库或文件）中提取数据，我们就必须通过一个HTTP 请求（POST或GET）来获得这些数据。一旦接收完数据，网页需要重新载入来显示数据。通过AJAX技术我们能从服务器端请求并接收数据，然后无需重载就能在页面中显示出来。这个过程中，AJAX使用HTTP请求。通过AJAX, Javascript使用XMLHttpRequest对象（XML over HTTP）直接和服务器交流。通过HTTP请求，网页不需重载就能从服务器端请求并返回结果。

The XMLHttpRequest object is supported inInternet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, andNetscape 7. But the creation of XMLHttpRequest object is different in InternetExplorer than the other browsers. I will discuss this later. To use AJAX torequest a data from the server we need to do the following.
IE 5.0+, Safari 1.2, Mozilla 1.0/Firefox,Opera 8+以及Netscape7都支持XMLHttpRequest对象。但IE中XMLHttpRequest对象的创建不同于其他浏览器。这一点在下面会讨论到。为了从服务器端请求数据，我们需要做以下的工作：

Create an XMLHttpRequest object.
2. Then using this object, request datafrom the server.
3. JavaScript will then monitor for thechanging of state of the request.
4. If the response is successful, then thecontent from the data store requested will be returned as response (responsecan be in the form of a String or XML).
5. Use the response in your web page.
创建一个XMLHttpRequest对象
使用这个对象从服务器请求数据
Javascript会监控请求状态的改变
如果响应成功，向数据库请求的内容将被返回，返回的形式是字符串或XML
网页中调用响应结果

1. Create an XMLHttpRequest object

JavaScript has a built-in XMLHttpRequestobject. You can use that for Firefox, Safari, and Opera. For Internet Exploreruse the ActiveXObject, there is also a difference between IE 5.0 and IE 6.0+ inhow to create the object. The following codes create an XMLHttpRequest for allbrowsers:
Javascript有一个内置的XMLHttpRequest对象，它能在Firefox, Safari, 和 Opera中使用。IE使用ActiveXObject, 但IE5.0和IE6.0+在创建XMLHttpRequest对象时也有所不同。以下代码适用于所有浏览器：

var req;

if(window.XMLHttpRequest){
//For Firefox, Safari, Opera
req = new XMLHttpRequest();
}
else if(window.ActiveXObject){
//For IE 5
req = newActiveXObject("Microsoft.XMLHTTP");
} else if(window.ActiveXObject){
//For IE 6+
req = new ActiveXObject("Msxml2.XMLHTTP");
}
else{
//Error for an old browser
alert('Your browser is not IE 5 or higher,or Firefox or Safari or Opera');
}

Here, first we are using the built-inJavaScript function XMLHttpRequest() for creating an XMLHttpRequest for Firefox,Safari and Opera. If the browser does support window.ActiveXObject, then it isInternet Explorer. For IE versions 5.0+, use newActiveXObject("Microsoft.XMLHTTP") and for IE 6.0+ use newActiveXObject("Msxml2.XMLHTTP"). If the browser does not support thebuilt-in JavaScript function XMLHttpRequest() or ActiveXObject, then it doesnot support AJAX. You can also use JavaScript try-catch blocks for the sameoutput.
首先，我们使用一个内置的Javascript 函数XMLHttpRequest()来为FF, Safari和opera创建一个XMLHttpRequest请求。如果这个浏览器支持window.ActiveXObject，则它是IE。对于IE5.0+版本，使用 newActiveXObject(“Microsoft.XMLHTTP”)；对于IE6.0+版本，使用 new ActiveXObject(“Msxml2.XMLHTTP”)。如果浏览器不支持XMLHttpRequest()or ActiveXObject, 则无法支持AJAX。你也能使用Javascript try-catch 块来得到相同的输出结果。
如下：
var req;
try
{
// Firefox, Opera, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert('Your browser is not IE 5 or higher,or Firefox or Safari or Opera');
}
}
}

In JavaScript, if statements within a trysection fail, then the execution resumes from the corresponding catch block.Here first we are trying to get create a XMLHttpRequest using the built-infunction, and if it fails then we will try usingActiveXObject("Msxml2.XMLHTTP"), and if it fails also we will tryActiveXObject("Microsoft.XMLHTTP"). If all these fail, then we willalert the user that his/her browser does not support AJAX.
在Javascript中，如果try部分的语句失败，则执行相对应的catch块。首先，我们试着用内置函数创建XMLHttpRequest对象，如果失败，我们试着使用ActiveXObject("Msxml2.XMLHTTP")，如果再失败，我们试着使用ActiveXObject("Microsoft.XMLHTTP")。如果以上都失败了，我们显示一个警告来告知用户他/她的浏览器不支持AJAX。

2. Request for a web page

After creating the XMLHttpRequest we nowneed to send the web request using the open method. We also need to specify theHttpRequest method, GET or POST. Use the following code to send the request.
创建XMLHttpRequest之后，我们使用open()方法来发送网页请求。必须指定HttpRequest方法，GET或者POST。使用以下代码发送请求：

req.open(“GET”,”somedata.php”);
req.send(null);

Here, req is the XMLHttpRequest object. Itwill request to the server for somedata.php using GET method. The open functionalso has a third parameter, an optional boolean parameter. You should set thatto true :
这里req是XMLHttpRequest对象。它会通过GET方法向服务器请求somedata.php的数据。Open()函数可以包含第三个参数，一个可选的布尔值(boolean)参数,并且应该把它设为真(true)。

req.open(“GET”,”somedata.php”,true);
req.send(null);

Both of the above is correct.
以上两个例子都是正确的。

3. Monitor for the response of the request

You will need to monitor for the state ofthe request. For doing this you can assign a function to req.onreadystatechange(Here, req is the XMLHttpRequest object), like below.
为了监控请求的状态，你需要赋给req.onreadystatechange一个函数，就像下面：
req.onreadystatechange=function()
{
if(req.readyState==4 && req.status ==200)
{
var resp = req.responseText;
}
}

Or like this,
或者：
req.onreadystatechange = handleResponse;

function handleResponse(){
if(req.readyState == 4 &&req.status == 200){
//returned text from the PHP script
var response = req.responseText;
}
}

The readyState property holds the status ofthe server's response. Each time the readyState changes, the onreadystatechangefunction will be executed. Here are the possible values for the readyStateproperty:
readyState属性持有服务器响应的状态。每次readyState改变，onreadystatechange函数都会执行。以下是readyState的几种值：
State Description
0 The request is not initialized
1 The request has been set up
2 The request has been sent
3 The request is in process
4 The request is complete

And status is the status of the HTTPRequest, like 500 Internal Server Error, 400 Bad Request, 401 Unauthorized, 403Forbidden, 404 Not Found etc. 200 means no error.
这里的状态是指HTTP请求的状态，就像500是内部服务器错误，400是坏的请求，401是未验证，403禁止，404未发现等等。200意味着ok。

4. Get the response

The response will be as string or as XML.The data sent back from the server can be retrieved with the responseTextproperty as string. Use responseXML for getting the response as XML.
响应将以字符串或XML的形式出现。从服务器发回来的数据能通过responseText以字符串的形式获得，或者通过responseXML以XML的形式获得。
5. Use the response on your web page

You can use the response you got from theXMLHttpRequest in your web page/application. You can either set a value of atext field or use the returned HTML from the web request as innerHTML for a<div></div> tag or <span></span> tag (See below for theimplementation of this)
你能将从XMLHttpRequest得到的响应运用到网页或应用程序中。你能设置文本区域的值或者使用请求返回的HTML作为div或span 标签的innerHTML内容。（请看下面的实现方法）

Using AJAX with PHP

I usually place all the AJAX relatedfunctions in one JavaScript (ajax.js), and later add the JavaScript in my PHPpages. My ajax.js looks like below.
我经常把关于AJAX的函数放到一个Javascript文件(ajax.js)里，之后加到php页面里。

function createRequestObject(){

var req;

if(window.XMLHttpRequest){
//For Firefox, Safari, Opera
req = new XMLHttpRequest();
}
else if(window.ActiveXObject){
//For IE 5+
req = newActiveXObject("Microsoft.XMLHTTP");
}
else{
//Error for an old browser
alert('Your browser is not IE 5 or higher,or Firefox or Safari or Opera');
}

return req;
}

//Make the XMLHttpRequest Object
var http = createRequestObject();

function sendRequest(method, url){
if(method == 'get' || method == 'GET'){
http.open(method,url,true);
http.onreadystatechange = handleResponse;
http.send(null);
}
}

function handleResponse(){
if(http.readyState == 4 &&http.status == 200){
var response = http.responseText;
if(response){
document.getElementById("ajax_res").innerHTML= response;
}
}
}

Now I add a <script></script>tag in my PHP pages like following to access the JavaScript functions.
现在我添加一个<script>标签到PHP页面来访问javascript函数。

Then I create a function called sendReq()as shown above for preparing the URL to the PHP page to get some data from thedatabase. If you look into the ajax.js, you will see that I’m assigning theoutput of the PHP page to a <div> tags innerHTML. My div tag has the id=’ajax_res’.
然后，我创建一个叫做sendReq()的函数来准备php页面的URL从数据库中获得数据。如果你仔细看ajax.js,你会发现我付给了php页面的输出给了一个div标签。这个div标签的id是ajax_res。

<div align="center"class="black" id="ajax_res">
<img src="wt_bg.jpg">
</div>

After calling the sendReq function with avalue of ‘success’, it will connect to the server for sending a request to theURL get_lcm.php?status=success, then get the data from the database using thevalue ‘success’, and set the innerHTML attribute of the div tag whose id is‘ajax_res’ according to the response. Initially my div tag shows an image, butafter AJAX responds successfully this image will be replaced with the response.You can also get the response as the value of an input text.
通过success值成功调用sendReq函数之后，它会由发送请求到URLget_lcm.php?status=success连接到数据库，然后使用success值从数据库中获得数据，并根据响应设置id是ajax_res的div标签的innerHTML属性。最初我的div标签显示一张图片，但是AJAX响应成功之后，这张图片会被响应代替。你也能获得响应作为输入文本的值。

My get_lcm.php looks like this.

<?php
include_once("create_table.php");

if(!empty($status)){
echo "<strong>Search Result forStatus: ".$status."</strong><br><br>";

$ct = new createtable("select * fromlcm where state=$status");

$ct->table_viewer();
}
?>

I used one of my PHP classes‘create_table.php’ for creating a table from SQL queries. ‘create_table.php’has a function, table_viewer(), to print the SQL output as a HTML table. I willdiscuss about this class and some other data abstraction classes I used in somelater articles, if necessary.
我使用了我的一个php类create_table.php 来通过sql语句创建一个表格。Create_table.php有一个函数，table_viewer(), 以一个HTML表格的形式打印SQL输出。如果需要的话，我会讨论到我在其他文章中用过的类和其他数据抽象类。
I had the following HTML code for callingthe AJAX function using the sendReq() as described earlier.
像上面所描述的，我通过sendReq() 来调用AJAX函数。
<a class="none"href="#" >ACTIVE</a>

If a user clicks the above hyperlink, thenthe JavaScript function sendReq is invoked using the value of status equal to1. After that the webpage with URL get_lcm.php?status=1 will be invoked. ThisPHP will get the information from database and shows the result as table. Thisresult will then be displayed within the <div> tag.
如果一个用户点击了上面的超链接，然后通过status的值等于1，这个javascript函数sendReq被调用。PHP会从数据库中获得信息并显示将结果在表格中。这个结果会在div标签中显示。
Using AJAX from PHP is very easy asdescribed here. All you need is the JavaScript functions for sending the XMLHttpRequestand then handle the Http Response. It will simplify development is you placeall your AJAX related code in a single JavaScript file and reference it fromanywhere you need AJAX.
就像这里描述的一样，使用AJAx是非常简单的。你只需要javascript 函数来发送XMLHttpRequest然后处理Http响应。它会简化开发过程，因为你把所有Ajax相关的代码放到一个单独的javascript文件，并能在任何需要Ajax的地方引用它。
There is another way of getting the sameresult from PHP without using the XMLHttpRequest object. But I personally donot like the concept, because it is missing one of the main ingredients ofAsynchronous JavaScript And XML (AJAX), XML. This concept is good for the oldbrowsers with no supports for XMLHttpRequest object, but as all the newerversions are supporting XMLHttpRequest object you can use AJAX for the commonbrowsers.
还有另外一种方式从php中得到数据，但不是使用XMLHttpRequest对象。但是我个人不喜欢这个概念，因为他缺少了一个很重要的AJAX成分，XML。这个概念对于不支持XMLHttpRequest对象的旧浏览器很好，但是所有的新版本都支持XMLHttpRequest对象。

账号		自动登录	找回密码
密码			立即注册

HERE 使用 AWS EF 和 JFrog Artifactory 打

wirelessnetview好用的无线分析工具

Red Hat RHCE 8 (EX294) Cert Guide

亿图图示专家(EDraw Max) V7.9 中文破解版

zabbix3.4.1安装部署+微信推送信息+大屏显

Red Hat OpenShift I: Containers & Kubern

2025 年，C++ 还能“硬核”多久？

[经验分享] Ajax 入门

浏览过的版块

扫码加入运维网微信交流群