PHP మరియు AJAX రెక్వెస్ట్
- ముంది పేజీ XMLHttpRequest
- తరువాతి పేజీ AJAX XML
AJAX 请求
在下面的 AJAX 例子中,我们将演示当用户向 web 表单中输入数据时,网页如何与在线的 web 服务器进行通信。
在下面的文本框中输入名字:
Suggestions:
这个例子包括三张页面:
- 一个简单的 HTML 表单
- 一段 JavaScript
- 一张 PHP 页面
HTML 表单
这是 HTML 表单。它包含一个简单的 HTML 表单和指向 JavaScript 的链接:
<html> <head> <script src="clienthint.js"></script> </head> <body> <form> First Name: <input type="text" id="txt1" onkeyup="showHint(this.value)"> </form> <p>Suggestions: <span id="txtHint"></span></p> </body> </html>
例子解释 - HTML 表单
正如您看到的,上面的 HTML 页面含有一个简单的 HTML 表单,其中带有一个名为 "txt1" 的输入字段。
该表单是这样工作的:
- 当用户在输入域中按下并松开按键时,会触发一个事件
- 当该事件被触发时,执行名为 showHint() 的函数
- 表单的下面是一个名为 "txtHint" 的 <span>。它用作 showHint() 函数所返回数据的占位符。
JavaScript
JavaScript 代码存储在 "clienthint.js" 文件中,它被链接到 HTML 文档:
var xmlHttp function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML="" return } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("బ్రౌజర్ HTTP అభ్యర్ధనను మద్దతు ఇవ్వలేదు") return } var url="gethint.php" url=url+"?q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } } function GetXmlHttpObject() { var xmlHttp=null; try { // ఫైర్ఫాక్స్, ఓపెరా 8.0+, సఫారీ xmlHttp=new XMLHttpRequest(); } catch (e) { // ఇంటర్నెట్ ఎక్స్ప్లోరర్ try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }
ఉదాహరణ వివరణం:
showHint() ఫంక్షన్
ఇన్పుట్ డొమెయిన్లో ప్రతి అక్షరం ఇచ్చినప్పుడు ఈ ఫంక్షన్ ఒకసారి పని చేస్తుంది.
టెక్స్ట్ బాక్స్ లో కంటెంట్ ఉన్నప్పుడు (str.length > 0), ఈ ఫంక్షన్ ఈ విధంగా పని చేస్తుంది:
- సర్వర్కు పంపించవలసిన URL (ఫైల్ పేరు)ను నిర్వచిస్తారు
- ఇన్పుట్ డొమెయిన్ కంటెంట్ను కలిగిన పారామీటర్ (q)ను ఈ URLకు జోడిస్తారు
- సర్వర్ క్యాచె ఫైల్ని ఉపయోగించకుండా ఒక సంఖ్యను జోడిస్తారు
- XMLHTTP ఆబ్జెక్ట్ను సృష్టించడానికి GetXmlHttpObject ఫంక్షన్ను కాల్ చేసి, సంఘటకం జరగినప్పుడు stateChanged అనే ఫంక్షన్ను పద్ధతిగా చెప్పండి
- ఇచ్చిన URL తో ఈ XMLHTTP ఆబ్జెక్ట్ను తెరుస్తారు
- సర్వర్కు HTTP అభ్యర్ధనను పంపుతారు
如果输入域为空,则函数简单地清空 txtHint 占位符的内容。
stateChanged() 函数
每当 XMLHTTP 对象的状态发生改变,则执行该函数。
在状态变成 4 (或 "complete")时,用响应文本填充 txtHint 占位符 txtHint 的内容。
GetXmlHttpObject() 函数
AJAX 应用程序只能运行在完整支持 XML 的 web 浏览器中。
上面的代码调用了名为 GetXmlHttpObject() 的函数。
该函数的作用是解决为不同浏览器创建不同 XMLHTTP 对象的问题。
这一点在上一节中已经解释过了。
PHP 页面
被 JavaScript 代码调用的服务器页面是一个名为 "gethint.php" 的简单服务器页面。
"gethint.php" 中的代码会检查名字数组,然后向客户端返回对应的名字:
జావాస్క్రిప్ట్ నుండి పంపబడిన పదబంధాన్ని ఉన్నట్లయితే ($q > 0), అప్పుడు:
- జావాస్క్రిప్ట్ పంపబడిన అక్షరాలకు సరిపోయే పేర్లను కనుగొనుతారు
- పలు పేర్లను కనుగొనినప్పుడు, అన్ని పేర్లను response స్ట్రింగ్ లో చేరుస్తారు
- పేర్లను కనుగొనినప్పుడు లేకపోతే, response ను "no suggestion" గా అనుసరిస్తారు
- ఒకటి లేదా పలు పేర్లను కనుగొనినప్పుడు, response ను ఆ పేర్లకు అనుసరిస్తారు
- response ను "txtHint" ప్లేస్ హాల్టర్కు పంపుతారు
- ముంది పేజీ XMLHttpRequest
- తరువాతి పేజీ AJAX XML