功能介绍：

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. Kaggle竞赛丨入门手写数字识别之KNN、CNN、降维

    引言 这段时间来,看了西瓜书.蓝皮书,各种机器学习算法都有所了解,但在实践方面却缺乏相应的锻炼.于是我决定通过Kaggle这个平台来提升一下自己的应用能力,培养自己的数据分析能力. 我个人的计划是先从 ...

  2. javaweb-codereview 学习记录-3

    Class类加载流程 实际上就是ClassLoader将会调用loadclass来尝试加载类,首先将会在jvm中尝试加载我们想要加载的类,如果jvm中没有的话,将调用自身的findclass,此时要是 ...

  3. [校内训练20_01_22]ABC

    1.给出序列A,求序列B,使得bi|ai,lcm(b1,b2,...,bn)=lcm(a1,a2,...,an)且字典序最小. 可以发现,对于某个质数p,它有一个最大的次数k,将pk放在尽可能靠后且能 ...

  4. 基于django的会议室预订系统

    会议室预订系统 一.目标及业务流程 期望效果: 业务流程: 用户注册 用户登录 预订会议室 退订会议室 选择日期:今日以及以后日期 二.表结构设计和生成 1.models.py(用户继承Abstrac ...

  5. PTA笔记 堆栈模拟队列+求前缀表达式的值

    基础实验 3-2.5 堆栈模拟队列 (25 分) 设已知有两个堆栈S1和S2,请用这两个堆栈模拟出一个队列Q. 所谓用堆栈模拟队列,实际上就是通过调用堆栈的下列操作函数: int IsFull(Sta ...

  6. 使用springboot Admin 2.0.6版本 集成监控springcloud微服务应用

    一 新建 添加依赖 <dependencies> <dependency> <groupId>de.codecentric</groupId> < ...

  7. Redis异常 | DENIED Redis is running in protected mode because protected mode is enabled

    背景 今天重新搭了个redis环境,用简单的代码去测试下是否正常, @RunWith(SpringRunner.class) @SpringBootTest public class Springbo ...

  8. Flutter开发之Widget学习

    一.Text 组件 属性  textAlign: TextAlign.left,                           -----文本对齐方式  maxLines: 1,        ...

  9. VirtualBox桥接网络，设置虚拟机联网，连接VirtualBox虚拟系统中的数据库等

    由于最近搭建一个项目自己的阿里云的服务器内存不足,自己笔记本使用VitrualBox电脑虚拟linux系统来搭建,把这次使用过程遇到的问题记录下来也能帮助遇到同样的小伙伴. 软件: VirtualBo ...

  10. 如何快速搭建一个 Node.JS 项目并进入开发？

    了解:如何快速搭建一个项目并进入开发? 在此不概述 Node.JS 的历史以及发展过程. 因为之前接触过通过 Java 开发语言,所以明确地知道一个服务器所需的文件,以及一个服务器所需要的操作. 那么 ...