功能介绍：

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. [3.0] 一个人开发一个App，小程序从0到1，删减添加

    在这个黄道吉日,咱们将要干一件,惊天地泣鬼神,妇孺皆知的大事,那就是删掉微信开发工具自动生成的源代码. 删掉pages下的index.logs目录,啥都不留: 删掉utils下的util.js,只流空 ...

  2. ajxa的TypeError: $.ajax is not a function的冲突问题

    在加载onclick的方法异步过程中,浏览器报错 首先自我检查 原因一:没有加载Jquery库,原因二:$.ajax没有在$(function(){$.ajax();})中. 发现都不是 原因三:有没 ...

  3. 之前见汤姆大叔 写过一系列的 js 深入理解 呢 很是感觉经典

    最近要把这些给翻个遍 加油  js 隐式全局变量 读后感 1:js 没有变量名称是否重复定义的检查,在cshrp里有这样的检查, 没有变量名称重复的检查,这样 当变量名称 重复定义的时候 相同命名的变 ...

  4. selenium常见的元素定位方法

    一.获取元素 1)通过谷歌浏览器自动的工具访问百度首页,我们可以看到,页面上的元素都是由一行行的代码组成的,它们之间有层级地组织起来,每个元素之间都有不同的标签和值,我们可以通过这些不同的标签和值来找 ...

  5. GitHub Top 微信小程序——在家中憋了几天写点代码吧

    GitHub Top 本项目为 GitHub 热点项目微信小程序客户端,首页仅推荐一个热点项目,这个项目往往是社会热门事件所催生的一个项目,如 996.ICU.wuhan2020,所推荐项目标准为:积 ...

  6. 一个注解搞懂 Sentinel，@SentinelResource 总结

    在前面的博客中,我给大家演示了使用 @SentinelResource 定义资源完成限流的例子, 下面就从源码解析开始,看下SentinelResource是如何实现限流的,以及@SentinelRe ...

  7. java web 项目中基础技术

    1. 选择版本控制器(git, svn) 2. 用户登录的时候, 你需要进行认证, 权限受理 可以使用 spring shiro 框架,进行上面的工作 3. 过滤器(filter),监听器(liste ...

  8. linux 内存使用分析

      查看当前内存使用情况,最常用的指令就是 [root@t ~]# free -m total used free shared buffers cached Mem: -/+ buffers/cac ...

  9. sharding-JDBC学习笔记

    sharding-JDBC学习笔记 ShardingSphere ShardingSphere是一套开源的分布式数据库中间件解决方案组成的生态圈,它由Sharding-JDBC.Sharding-Pr ...

  10. 1755: N相关孪生素数

    #include<stdio.h>int f(int n,int L,int R){ int ch[10000],i,j,count=0; j=1; for(i=L;i<=R;i++ ...