用原生JS&PHP简单的AJAX实例
Posted l_____py
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用原生JS&PHP简单的AJAX实例相关的知识,希望对你有一定的参考价值。
功能介绍:
1)file.html 使用 xmlhttp 请求服务器端文件 text ,并更新 file.html 的部分内容
2)update.html 使用 xmlhttp 通过 filewrite.php 更改服务器端文件 text 的内容
3)filewrite.php 接收 update.html 中 xmlhttp 提交的数据更新 text 内容
file.html
<!DOCTYPE html> <html> <head> <meta charset=‘utf-8‘> <title>ajax</title> <style> body { background:whitesmoke; } * { margin: 0 0 0 0; padding: 0 0 0 0; } .header { height:100px; width:100%; text-align: center; font-size: 80px; color:gray; } .container { text-align: center; } .ipttag { display: inline-block; width:100px; color: brown; } #responseContent { color : rgb(20, 104, 214); } </style> </head> <body> <div class="header">FILE Learning</div> <div class="container"> <form> <input type=‘button‘ value=‘获取text内容‘ id="submit"/> <p id="responseContent"></p> </form> </div> </body> <script> document.getElementById(‘submit‘).onclick = function() { //id = document.getElementById(‘id‘).value; //passwd = document.getElementById(‘passwd‘).value; var xmlhttp; xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) { //alert(xmlhttp.responseText); document.getElementById(‘responseContent‘).innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", "./text", true); xmlhttp.send(); } //document.getElementById(‘submit‘).onclick = showHints; //document.getElementById(‘id‘).onkeyup = showHints; </script> </html>
update.html
<!DOCTYPE html> <html> <head> <meta charset=‘utf-8‘> <title>UPDATE</title> <style> body { background:whitesmoke; } * { margin: 0 0 0 0; padding: 0 0 0 0; } .header { height:100px; width:100%; text-align: center; font-size: 80px; color:gray; } .container { text-align: center; } #responseContent { color : rgb(20, 104, 214); } .text { width : 500px; height: 300px; text-align: left; } </style> </head> <body> <div class=‘header‘>FILE Learing</div> <div class=‘container‘> <textarea class=‘text‘ type="area" id=‘text‘></textarea> <br> <input type=‘button‘ value=‘更新text内容‘ id=‘updateButton‘> <p id="responseContent"></p> </div> </body> <script> document.getElementById(‘updateButton‘).onclick = function () { var text = document.getElementById(‘text‘).value; var postContent = ‘text=‘ + text; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //document.getElementById(‘responseContent‘).innerHTML = "更新成功"; alert(‘更新成功‘); } } xmlhttp.open(‘POST‘, ‘./filewrite.php‘, true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(postContent); } </script> </html>
filewrite.php
<?php $text = $_POST[‘text‘]; $file = fopen(‘./text‘, ‘w‘) or exit(‘无法打开文件‘); fwrite($file, $text); fclose($file); ?>
以上是关于用原生JS&PHP简单的AJAX实例的主要内容,如果未能解决你的问题,请参考以下文章