AJAX 實時讀取輸入文本(php)
更新時間：2009年11月27日 17:04:01 作者：
客戶端String.php,服務(wù)器端String_check.php，很簡單的實現(xiàn)。
客戶端代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
</head>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function sendRequest(){
createXMLHttpRequest();
var name = document.getElementById("name").value;
url = "String_check.php?page="+name;
xmlHttp.onreadystatechange = callback;
xmlHttp.open('GET',url,true);
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
document.getElementById("show").innerHTML = "您輸入的字符串為："+ xmlHttp.responseText;
}
}
}
</script>
<body>
<p>AJAX test;</p>
<p><br/>
<input type="text" id="name" onkeyup="sendRequest();" />
<br/>
<span id="show"></span>
</p>
</body>
</html>
服務(wù)器端代碼：
<?php
header('Content-type: text/html;charset=GB2312');
$ename = $_GET["page"];
if ($ename == "") {
$ename = "請輸入：";
}
echo ($ename);
exit(0);
?>
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
</head>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function sendRequest(){
createXMLHttpRequest();
var name = document.getElementById("name").value;
url = "String_check.php?page="+name;
xmlHttp.onreadystatechange = callback;
xmlHttp.open('GET',url,true);
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
document.getElementById("show").innerHTML = "您輸入的字符串為："+ xmlHttp.responseText;
}
}
}
</script>
<body>
<p>AJAX test;</p>
<p><br/>
<input type="text" id="name" onkeyup="sendRequest();" />
<br/>
<span id="show"></span>
</p>
</body>
</html>
服務(wù)器端代碼：
復(fù)制代碼 代碼如下:
<?php
header('Content-type: text/html;charset=GB2312');
$ename = $_GET["page"];
if ($ename == "") {
$ename = "請輸入：";
}
echo ($ename);
exit(0);
?>
您可能感興趣的文章:
- php+ajax實時刷新簡單實例
- php+ajax實時輸入自動搜索匹配的方法
- 值得分享的php+ajax實時聊天室
- PHP實現(xiàn)的消息實時推送功能【基于反ajax推送】
- PHP Ajax實現(xiàn)表格實時編輯
- PHP+Ajax實時自動檢測是否聯(lián)網(wǎng)的方法
- php+ajax實現(xiàn)無刷新動態(tài)加載數(shù)據(jù)技術(shù)
- php采用ajax數(shù)據(jù)提交post與post常見方法總結(jié)
- ajax處理php返回json數(shù)據(jù)的實例代碼
- php+jQuery ajax實現(xiàn)的實時刷新顯示數(shù)據(jù)功能示例
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了如何簡單實現(xiàn)ajax獲取跨域數(shù)據(jù)的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
天楓AJAX天氣預(yù)報系統(tǒng)V1.0...2007-02-02
Ajax?請求隊列解決方案并結(jié)合elementUi做全局加載狀態(tài)
這篇文章主要介紹了Ajax?請求隊列解決方案并結(jié)合elementUi做全局加載狀態(tài),使用 消息隊列 制作 請求防抖，防止重復(fù)請求印象服務(wù)器，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
選擇一部著作，會通過 Ajax 實時獲得相關(guān)的名字，一個簡單的不涉及服務(wù)器的Ajax實例,需要的朋友可以參考下2014-05-05
今天閑著沒事做個一個ajax小練習(xí)，困擾了我很長時間，我寫的ajax代碼在ie、360、火狐瀏覽器上運行都是正常的，而在google chrome下無法正常運行，搞的我焦頭爛額，最終找到解決辦法，在此分享給大家，幫助那些遇到和我一樣問題的朋友2015-10-10
零基礎(chǔ)學(xué)習(xí)AJAX之AJAX框架
本文是零基礎(chǔ)學(xué)習(xí)AJAX系列教程的第二篇，我們介紹點不一樣的知識，學(xué)習(xí)下ajaxLib和ajaxGold兩款框架，方便我們更好的理解ajax.2015-01-01
這篇文章主要為大家詳細(xì)介紹了ajax實現(xiàn)數(shù)據(jù)分頁查詢的相關(guān)資料，以及ajax實現(xiàn)對數(shù)據(jù)庫的查詢，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
本文主要是給大家總結(jié)了一下Ajax的核心內(nèi)容XMLHttpRequest的相關(guān)知識，十分的詳細(xì)，推薦給大家，需要的小伙伴參考下。2015-02-02
這篇文章主要介紹了ajax調(diào)用簡單實例,結(jié)合實例形式分析了基于ajax調(diào)用講URL返回數(shù)據(jù)填充到指定div的功能,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了Ajax異步上傳文件實例代碼，非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06