Imagine using a simple HTML file to send a request to a server-side script, receive a custom XML file based on the request, and then display it to the user with almost no need to refresh the browser! The author of this article will explore with you how to combine PHP and AJAX technology in ordinary web applications to create real-time data transmission without the need for browser refresh.
Although this article uses PHP, please remember that any server-side language will work fine. In order to understand this article, I assume you have a basic understanding of JavaScript and PHP or a similar server-side language.
The example in this article uses AJAX to send a request from an RSS feed to a custom PHP object. This PHP object copies the feed on the local server and returns this path. The request object receives this path, parses it, and displays the data to the user in HTML form. This sounds like a lot of steps, but it actually consists of only 4 small files. The reason why four small files are used is to balance their specific strengths and make the entire system process extremely efficient.
I suppose some readers might ask why you would create a copy of the feed on your local server instead of simply parsing the original feed. The reason is that this allows bypassing the cross-origin restrictions imposed by the XML HTTP Request object. Later, I will explain how to create this custom PHP object; but first, let's start with form creation.
Create a form to make a request
The first thing you need to do is include any JavaScript and any CSS files you may want to use between the head tags of your HTML. I included a stylesheet to implement the final layout of the aggregator and a JavaScript file to make the requests and do the feed analysis:
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script src="js/request.js"></script> |
<script src="js/request.js"></script> |
Next, create a form that makes a request for an RSS feed of your choice. The form I created only consists of an input field and a button to submit the request. The query for this request is a string consisting of the feed input value and a password that will be verified on the server side; as an example, I used the following form:
This code makes a request every time the page loads; therefore, if the page is refreshed, the existing feed string in the input field will be requested when the page loads. Here is an example of form data, along with some div tags used to display specific nodes of the analyzed feed:
<body onload="javascript:makeRequest(request.php?request= + document.feedForm.feed.value + "password=mypassword);">
<form name="feedForm" method="post" action="javascript:makeRequest(request.php?request= + document.feedForm.feed.value + "password=mypassword);">
Enter a feed: <input type="text" name="feed" id="feed" size="20">
<input type="submit" name="submit" value="Add Feed">
</form>
<div id="logo"></div>
<hr/>
<div id="copy"></div>
<div id="details"></div>
</body> |
<form name="feedForm" method="post" action="javascript:makeRequest(request.php?request= + document.feedForm.feed.value + "password=mypassword);">
Enter a feed: <input type="text" name="feed" id="feed" size="20">
<input type="submit" name="submit" value="Add Feed">
</form>
<div id="logo"></div>
<hr/>
<div id="copy"></div>
<div id="details"></div>
</body> |
The three div tags I created are logo, copy, and details, each of which has a style associated with it in the layout style sheet. We will use them when we analyze the feed, but we first need to be able to access the feed we requested. This can be done using the PHP objects I mentioned earlier.
Create custom PHP objects
I created a small RSS class in PHP that creates a copy of the request feed on the local server so that it can be accessed by the XML HTTP Request object we will create later. Typically, you cannot request a file across domains, which means the file you are requesting needs to be on the local server. This class is a solution to the cross-origin problem because it creates a copy of the feed that is requested on the local server and returns the local path to the feed, which is then accessed by the Request object.
The only method in this class is a request method, which has only one parameter pointing to the URL of the requested RSS feed. Then, it checks whether a directory is located on the local server by the rss name. If it doesn't exist, create one and set its permission mode to 0666, which means the directory is readable and writable. When set as readable, the directory can be accessed later; when set as writable, a copy of the feed can be written to the directory on the local server:
//If the directory does not exist, create one
//如果不存在目录就创建一个
$dir = "rss";
if(!is_dir($dir))
{
mkdir($dir, 0666);
} |
$dir = "rss";
if(!is_dir($dir))
{
mkdir($dir, 0666);
} |
Attention
On a Windows machine, mode setting is not required for PHP 4.2.0 and above. However, if it exists, it will be ignored; therefore, I kept it in case the project was moved to a UNIX or Linux server.
//创建唯一的命名
$file=md5($rss_url);
$path="$dir/$file.xml"; |
Before copying the feed to this server, we need a unique file name. I'm using md5 encryption on the full URL to ensure all feed names are unique. With this new filename, it can be concatenated with a string describing the directory pointing to the file; this will be used when creating a copy of the feed:
//Create a unique name
//复制馈送到本地服务器
copy($rss_url,"$path");
return $path;
Following is the small, yet powerful RSS class in its entirety:
<?php
class RSS
{
function get($rss_url)
{
if($rss_url != "")
{
//如果不存在目录就创建一个
$dir = "rss";
if(!is_dir($dir))
{
mkdir($dir, 0666);
}
// 创建一个唯一的名字
$file = md5($rss_url);
$path = "$dir/$file.xml";
//复制馈送到本地服务器
copy($rss_url, "$path");
return $path;
}
}
}
?> |
$file=md5($rss_url);
$path="$dir/$file.xml"; |
We can now create a copy of the file by using the path defined above and a reference to the original requested feed URL. Finally, return the path to the new file in response to the request:
//Copy feed to local server
copy($rss_url,"$path");
return $path;
Following is the small, yet powerful RSS class in its entirety:
<?php
class RSS
{
function get($rss_url)
{
if($rss_url != "")
{
//If the directory does not exist, create one
$dir = "rss";
if(!is_dir($dir))
{
mkdir($dir, 0666);
}
//Create a unique name
$file = md5($rss_url);
$path = "$dir/$file.xml";
//Copy feed to local server
copy($rss_url, "$path");
Return $path;
}
}
}
?> |
In order to access the methods in this PHP class, there needs to be a request file that serves as an interface to the class, which is exactly the file we are requesting. This file first validates a password variable queried from the request, and either returns a message specifying that the requester is not an authorized user, or points to an RSS feed (which is copied to the local server after being processed by the request method). path to respond. In order to respond to the RSS feed, the RSS object needs to be included and instantiated, and the request method needs to be activated by using the URL of the requested feed as a parameter:
<?
if($password == "mypassword")
{
require_once(classes/RSS.class.php);
$rss = new RSS();
echo $rss->get($request);
}
else
{
echo "You are an unauthorized user";
}
?> |
<?
if($password == "mypassword")
{
require_once(classes/RSS.class.php);
$rss = new RSS();
echo $rss->get($request);
}
else
{
echo "You are an unauthorized user";
}
?>
Combining GET/POST with AJAX
In order to make a POST request, we first need to create the request object. If you have no experience creating request objects, you can read my article "How To Use AJAX" or simply study the sample source code of this article. Once the request object is created, the sendFeed method can be called and passed the URL created by the form:
http://www.bkjia.com/PHPjc/508480.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/508480.htmlTechArticleImagine using a simple HTML file to send a request to a server-side script and receive a Customize an XML file and display it to the user with little to no brushing...
|