功能介绍：

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实例的更多相关文章

  1. 使用原生JS实现简单的ajax

    Ajax是一种使用javascript内置对象向服务器发送请求/接收响应的技术.它可以再页面已经完全显示出来之后再和服务器进行少量的数据交互,所以可以实现局部内容的刷新. ajax的实现,主要是靠ja ...

  2. thinkphp5最最最最简单的ajax实例

    thinkphp5最最最最简单的ajax实例 一.总结 一句话总结:页面端使用$.get()方法传递ajax请求,服务器端判断是不是ajax请求,是的话接受参数,进行逻辑处理之后向客户端返回值. 1. ...

  3. 原生js，jquery通过ajax获得后台json数据动态新增页面元素

    一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...

  4. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  5. 原生JS实现简单富文本编辑器2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 原生JS实现简单富文本编辑器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  8. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

  9. 简单的Ajax实例

    由于刚刚接触Ajax,所以在网上搜了一下如何实现简单的Ajax,在此写下来,也方便自己以后学习 什么是Ajax? 通过在后台与服务器进行少量的数据交换,Ajax可以使网页实现异步更新,这意味着可以在不 ...

随机推荐

  1. Java入门 - 语言基础 - 03.基础语法

    原文地址:http://www.work100.net/training/java-basic-syntax.html 更多教程:光束云 - 免费课程 基础语法 序号 文内章节 视频 1 第一个Jav ...

  2. [洛谷P4707] 重返现世

    Description 为了打开返回现世的大门,\(Yopilla\) 需要制作开启大门的钥匙.\(Yopilla\) 所在的迷失大陆有 \(n\) 种原料,只需要集齐任意 \(k\) 种,就可以开始 ...

  3. Windows和Linux换行的区别

    Linux下的换行符是: "\n" Windows的换行符 : "\r\n" r = return n = newline TODO 原因: 根据平台自己转化的 ...

  4. Dynamics email的subject标题出现 CRM:0000xxxx

    怎样移除email subject标题中出现的CRM:0000xxxx Settings->Administration->System Settings->Email->Un ...

  5. mysql数据库my.ini配置文件中文详解

    mysql数据库my.ini配置文件中文详解 mysqld程序–目录和文件 basedir = path 使用给定目录作为根目录(安装目录). character-sets-dir = path 给出 ...

  6. Web自动化测试项目搭建（一） 需求与设计

    一.项目需求 测试/生产环境更新后,自动化回归测试 项目易于维护和运行 支持多种测试策略 支持可视化测试报告 运行结果,支持多种方式通知相关人员 可定时/触发的方式运行自动化测试用例 二.设计 2.1 ...

  7. delphiXE开发蓝牙BLE4.0程序时遇到的notification问题

    IDE环境delphiXE8 蓝牙硬件ST17H26 service:0xfee7 chareter:0xfec9 const u16 my_OEMServiceUUID=0xfee7;const u ...

  8. IIS发布网站常见MIME扩展类型添加

    # This file maps Internet media types to unique file extension(s). # Although created for httpd, thi ...

  9. SpringBoot高级篇Ⅸ --- 热部署与监控管理

    一.热部署 在开发中我们修改一个Java文件后想看到效果不得不重启应用,这导致大量时间花费,我们不希望重启应用的情况下,程序可以自动部署(热部署). 1.1 模板引擎 在SpringBoot中开发情况 ...

  10. 【编程的乐趣-用python解算法谜题系列】谜题一 保持一致

    谜题一 保持一致 谜题 假设有一大群人排队等待观看棒球比赛.他们都是主场球迷,每个人都戴着队帽,但不是所有人都用同一种戴法,有些人正着戴,有些人反着戴. 假定你是保安,只有在全组球迷帽子戴法一致时才能 ...