使用DHTML和PHP可以与AJAX进行深度链接
沈旻
我一直在一个全AJAX / DOM网站上工作，该网站今天将投入使用，我想我将与大家一起分享我的发现，当我在此过程中遇到不同的问题时，他们对我有帮助。
首先，完全基于AJAX的网站本质上根本就不在同一页面上，因此它并不是完全AJAX网站应该能够做到的事情。 那么，一个人如何深入链接到一页上的内容？
当我几乎完全完成了完全由AJAX / DOM驱动的网站时，这个问题出现了，当时我的老板提醒我，我们在Internet上有指向该网站特定部分的广告，这使我开始思考。
我知道Flash与PHP可以使用旧的PHP技巧进行深层链接-
http://www.mywebsite.com/db.php?someVar=home&someVar=1 ，然后会将这些争论发送到数据库，数据库随后将返回一个网页。 很简单，但是您将回到具有多个页面的传统网站。 嗯，如果您必须为每个广告创建一个不同的页面，而不考虑内容的动态性，那将使整个AJAX一页网站的整个概念遭到破坏。是的，它仍然可以完成，但是后来我想到了XMLHttpRequest对象和一个古老的DHTML技巧，该技巧自2005年以来就出现了，在那里您使用XMLHttpRequest对象将某些文本字段的值发送到php页面，这反过来，将sql字符串中的这些变量发送到db，该db返回一个值，您可以将其回显到handleResponsePost以显示结果集-您可以阅读由James Dam撰写的有关使用此方法作为简单登录过程的出色教程2005。对不起，我没有链接，但是我敢肯定您可以在网络上搜索它。
无论如何，我使用的代码：
首先，我使用PHP回显一个驻留在index.php上大横幅后面的表单，如下所示：
<?php
echo' <div id="post_comment" class="post_comment">
<form name="myForm" id="myForm" class="myForm" method="get" action="index.php">
<input type="text" name="session" id="session" value="'.$_REQUEST[session].'" tabindex="1" onchange="sendRequestPost();"/>
<input type="text" name="id" id="id" style="width:5px" value="'.$_REQUEST[id].'" tabindex="2" onfocus="sendRequestPost();" />
</form>
<DIV id="response" class="response"></DIV>
</div>
<!--
Created: 28 Jan 2005.
Last updated: 1 Dec 2005. Copyright © 2005 James Dam.
Modified: 19 July 2007
Tarik Monem
--> ';
?> 在index.php页面的正文中，我已按如下所示onload提交表单：
<body onload="javascript:myFooterFunction();javascript:InitialiseScrollableArea5();document.forms['myForm'].submit();"> 现在，提交表单后会发生什么？ 它调用一个javascript脚本来使用xmlhttprequest对象：
// Set path to PHP script
var phpscript = 'js_files/login.php';
function createRequestObject()
{
var req;
if(window.XMLHttpRequest)
{
// Firefox, Safari, Opera...
req = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
// Internet Explorer 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
// There is an error creating the object,
// just as an old browser is being used.
alert('There was a problem creating the XMLHttpRequest object');
}
return req;
}
// Make the XMLHttpRequest object
var http = createRequestObject();
function sendRequestPost()
{
var id = document.getElementById('id').value;
var session = document.getElementById('session').value;
// Open PHP script for requests
http.open('post', phpscript);
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.onreadystatechange = handleResponsePost;
http.send('id='+ id +'&session='+ session);
}
}
<?php
$session = $_POST['session'];
$id = $_POST['id'];
echo 'javascript:writeMyHtmlFunction("'.$session.'","'.$id.'");';
?>
function handleResponsePost()
{
if(http.readyState == 1)
{
document.getElementById("response").innerHTML = "Please wait, loading... " ;
}
else if(http.readyState == 4 && http.status == 200)
{
// Text returned from PHP script
var response = http.responseText;
document.forms.myForm.id.focus();
window.onload = eval(response);
if(response)
{
// Update ajaxTest2 content
document.forms.myForm.id.focus();
window.onload = eval(response);
}
}
function writeMyHtmlFunction(someSectionParam, someSubSectionParam)
{
if(someSectionParam == 'home')
{
if(someSubSectionParam == '1')
{
if(navigator.appName == 'Microsoft Internet Explorer')
{
var theDiv = document.getElementById('contentDiv');
theDiv.innerHTML = '';
var theDiv2 = document.getElementById('contentDiv2');
theDiv2.innerHTML = '';
var theDiv5 = document.getElementById('contentDiv3');
theDiv5.innerHTML = '';
}
else
{
var theDiv = document.getElementById('contentDiv');
theDiv.innerHTML = '';
}
var theDiv2 = document.getElementById('contentDiv2');
theDiv2.innerHTML = '';
var theDiv3 = document.getElementById('extraDetails');
theDiv3.innerHTML = '';
var theDiv4 = document.getElementById('extraDetails2');
theDiv4.innerHTML = '';
loadXMLDoc('xml/rw.xml');
var newsvar=xmlDoc.getElementsByTagName('news');
var urlvar=xmlDoc.getElementsByTagName('url');
var photovar=xmlDoc.getElementsByTagName('photo');
var newsitemvar=xmlDoc.getElementsByTagName('newsitem');
for (i=0;i<newsitemvar.length;i++)
{
if (newsitemvar[i].nodeType==1)
{
theDiv.innerHTML += '<div id="real_world_module_home" class="real_world_module_home"><img src=' + photovar[i].childNodes[0].nodeValue + ' width=300px>' + newsitemvar[i].childNodes[0].nodeValue + '<a onclick=' + urlvar[i].childNodes[0].nodeValue + ' style="cursor:pointer; cursor:hand;">Click to see more</a></div>';
}
}
theDiv.innerHTML += '<div id="this_week_module_home" class="this_week_module_home"><img src="global_images/thisweek_realworldrecap.gif" width="220px" valign="top" alt="This Week"><br><iframe id="dataframe" src="http://www.tvgasm.com/shows/export/real_world_export.htm" srctype="text/html" width="215px" height="270px" scrolling="auto"></iframe></div>';
theDiv.innerHTML += '<div id="news_module_home" class="news_module_home"><img src="global_images/news.gif" width="220px" alt="News" valign="top" alt="News"><br> <iframe id="dataframe" src="http://www.tvgasm.com/shows/export/tvgasm_export.htm" srctype="text/html" width="215px" height="270px" scrolling="auto"></iframe></div>';
loadXMLDoc('xml/after_show.xml');
var newsvar2=xmlDoc.getElementsByTagName('news');
var urlvar2=xmlDoc.getElementsByTagName('url');
var photovar2=xmlDoc.getElementsByTagName('photo');
var newsitemvar2=xmlDoc.getElementsByTagName('newsitem');
for (j=0;j<newsitemvar2.length;j++)
{
if (newsitemvar2[j].nodeType==1)
{
theDiv.innerHTML += '<div id="after_show_module_home" class="after_show_module_home"><img src="global_images/logo_inferno3.jpg" width="200px" height="75px" valign="top" alt="inferno3"><font size=2px>' + newsitemvar2[j].childNodes[0].nodeValue + '<a onclick=' + urlvar2[j].childNodes[0].nodeValue + ' style="cursor:pointer; cursor:hand;"> <br><font color=#FFFFFF>Click here to see more</font></a></font><img src=' + photovar2[j].childNodes[0].nodeValue + ' width=200px><br></div>';
}
}
loadXMLDoc('xml/music.xml');
var newsvar3=xmlDoc.getElementsByTagName('news');
var urlvar3=xmlDoc.getElementsByTagName('url');
var photovar3=xmlDoc.getElementsByTagName('photo');
var newsitemvar3=xmlDoc.getElementsByTagName('newsitem');
for (k=0;k<newsitemvar3.length;k++)
{
if (newsitemvar3[k].nodeType==1)
{
theDiv.innerHTML += '<div id="music_module_home" class="music_module_home" style="white-space: normal;"><img src="global_images/spot3_music.gif" width="199px" valign="top" alt="This Week"><br> <div><a onclick=' + urlvar3[k].childNodes[0].nodeValue + ' style="cursor:pointer; cursor:hand;">Click to see more</a><br>' + newsitemvar3[k].childNodes[0].nodeValue + '<br><img src=' + photovar3[k].childNodes[0].nodeValue + ' style="position:absolute; bottom:0px; width:200px;"><br> <br></div></div>';
}
}
loadXMLDoc('xml/casting.xml');
var newsvar4=xmlDoc.getElementsByTagName('news');
var urlvar4=xmlDoc.getElementsByTagName('url');
var photovar4=xmlDoc.getElementsByTagName('photo');
var newsitemvar4=xmlDoc.getElementsByTagName('newsitem');
for (l=0;l<newsitemvar4.length;l++)
{
if (newsitemvar4[l].nodeType==1)
{
theDiv.innerHTML += '<div id="casting_module_home" class="casting_module_home"><img src="global_images/spot4_castingcalls.gif" width="199" valign="top" alt="Casting"><br> <div style="color: #000000;"><img src=' + photovar4[l].childNodes[0].nodeValue + ' height=200px width=200px><br><a onclick=' + urlvar4[l].childNodes[0].nodeValue + ' style="cursor:pointer; cursor:hand;">Click to see more</a><br><a onclick="http://www.bunim-murray.com/registration/casting_registration.php" style="cursor:pointer; cursor:hand;">' + newsitemvar4[l].childNodes[0].nodeValue + '</a><br> <br></div>';
}
}
myFooterFunction('0');
}
}
} 检查链接：
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=home&id=1
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=aboutus&id=1
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=aboutus&id=2
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=2
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=3
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=4
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=5
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=6
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=shows&id=7
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=1
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=2
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=3
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=4
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=5
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=6
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=music&id=7
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=2
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=3
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=4
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=5
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=6
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=7
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=8
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=casting&id=9
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=hr&id=1
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=2
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=3
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=4
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=5
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=6
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=extras&id=7
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=bmpfilms&id=1
http://www.bunim-murray.com/beta.bunim_murray.com/index.php?session=bmpfilms&id=2 希望这对尝试完成AJAX网站深链接的任何人有帮助：-)
From: https://bytes.com/topic/javascript/insights/683787-deep-linking-ajax-made-possible-use-dhtml-php
类似资料：