AJAX 实时读取输入文本(php)
客户端与服务器端的字符串交互:流畅体验的实现
在web应用中,我们时常需要实现客户端与服务器端的实时交互,下面的示例就是一种简单但高效的方式,涉及两个文件:客户端的String.php以及服务器端的String_check.php。
客户端代码
呈现的是一个简单的HTML页面,结合了JavaScript来实现AJAX功能。页面的DOCTYPE声明以及HTML头部设置,确保了其在不同浏览器中的兼容性。页面的主体部分包含一个文本输入框以及一个用于显示服务器响应的跨度元素。
当用户在这个文本框中输入文本时,JavaScript会捕获这个事件并通过XMLHttpRequest对象向服务器发送一个GET请求。请求的URL是String_check.php,并带有用户输入的字符串作为参数。设置一个回调函数来处理服务器的响应。
代码示例:
```html
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")nerHTML = "您输入的字符串为"+ xmlHttp.responseText;
}
}
}
AJAX测试