功能介绍：

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. angular 构建可以动态挂载的配置服务

    angular 构建可以动态挂载的配置服务 Intro 在 angular 中可以指定 environment 来区分不同环境下的配置,然而 environment 中的配置会在打包时是固定的,想要像 ...

  2. SpringBoot配置国际化

    1).国际化 1).编写国际化配置文件: 2).使用ResourceBundleMessageSource管理国际化资源文件 3).在页面使用fmt:message取出国际化内容 步骤: 1).编写国 ...

  3. Python的小括号( )、中括号[ ]和大括号{}分别代表什么？

    python语言最常见的括号有三种,分别是:小括号( ).中括号[ ]和大括号也叫做花括号{ },分别用来代表不同的python基本内置数据类型. 1.python中的小括号( ):代表tuple元组 ...

  4. Java8 Stream用法详解

    1.概述 Stream 的原理:将要处理的元素看做一种流,流在管道中传输,并且可以在管道的节点上处理,包括过滤筛选.去重.排序.聚合等.元素流在管道中经过中间操作的处理,最后由最终操作得到前面处理的结 ...

  5. 谈谈 InnoDB引擎中的一些索引策略

    如果我们在工作能够更好的利用好索引,那将会极大的提升数据库的性能. 覆盖索引 覆盖索引是指在普通索引树中可以得到查询的结果,不需要在回到主键索引树中再次搜索 建立如下这张表来演示覆盖索引: creat ...

  6. 理解Javascript的柯里化

    前言 本文1454字,阅读大约需要4分钟. 总括: 本文以初学者的角度来阐述Javascript中柯里化的概念以及如何在工作中进行使用. 原文地址:理解Javascript的柯里化 知乎专栏: 前端进 ...

  7. SpringBoot消息篇Ⅲ --- 整合RabbitMQ

    知识储备:  关于消息队列的基本概念我已经在上一篇文章介绍过了(传送门),本篇文章主要讲述的是SpringBoot与RabbitMQ的整合以及简单的使用. 一.安装RabbitMQ 1.在linux上 ...

  8. DWZ框架-- Dialog点击保存后不能自动关闭

    案例 今天在用DWZ框架做添加功能时,发现在对话框保存成功后,后端返回正确的json格式,但对话框不能自动关闭窗口,而且保存后自动跳回主页,没有停留在当前用户列表页面,具体错误过程重现如下: 1.打开 ...

  9. 严重 [RMI TCP Connection(3)-127.0.0.1]

    学习Servlet时碰到的一个bug. Connected to server [2017-01-08 04:40:33,100] Artifact jspRun:war exploded: Arti ...

  10. 使用stringstream打破字符与其他类型之间的隔阂

    考虑这样一个问题:给您一行各位数字,计算它们的和.数字之间用空格隔开.只能使用字符串. 一般考虑使用getchar,但这对于不熟悉 ASCLL 码的同学十分困难.C++的sstream头文件中提供了十 ...