功能介绍：

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. Xadmin的实现

    一.启动 1.前提 配置setting.py文件 INSTALLED_APPS 2.定位Xadmin,找到对应的类 'Xadmin.apps.XadminConfig', 3.根据admin源码,实现 ...

  2. Scala 学习（4）之「类——基本概念2」

    目录 内部类 extends override和super override field isInstanceOf和asInstanceOf getClass和classOf 内部类 import s ...

  3. 《Netlogo多主体建模入门》笔记 2

    从自带的模型库开始     财富分配模型 黄色代表稻谷,有的人消化快,有的慢,稻谷的积累代表财富的积累,不涉及交易行为.   点击setup后 ,点击 go   红线--穷人: 绿线-- 中产 : 蓝 ...

  4. Spring AnnotationConfigApplicationContext

    Spring AnnotationConfigApplicationContext 概述 通常Spring XML文件用来作为ClassPathXmlApplicationContext 的初始化.@ ...

  5. 架构模式中的Active Record和Data Mapper

    架构模式中的Active Record和Data Mapper 概念 在简单应用中,领域模型是一种和数据库结构一致的简单结构,对应每个数据库表都有一个领域类,在这种情况下,有必要让每个对象负责数据库的 ...

  6. Git详解之分支使用

    前言 几乎每一种版本控制系统都以某种形式支持分支.使用分支意味着你可以从开发主线上分离开来,然后在不影响主线的同时继续工作.在很多版本控制系统中,这是个昂贵的过程,常常需要创建一个源代码目录的完整副本 ...

  7. Windows玩转Kubernetes系列3-Centos安装K8S

    以往文章参考: Windows玩转Kubernetes系列1-VirtualBox安装Centos Windows玩转Kubernetes系列2-Centos安装Docker 安装K8S yum in ...

  8. Python黑客编程知识点整理

    Python转义字符 转义字符 意义 ASCII码值(十进制) \a 响铃(BEL) 007 \b 退格(BS) ,将当前位置移到前一列 008 \f 换页(FF),将当前位置移到下页开头 012 \ ...

  9. Nginx之keepalived高可用工具

    1.创建两台虚拟机,分别为主机和从机,区别两台虚拟机的IP地址 2. 将keepalived上传到linux系统当中 3. cd /usr/local目录 4. tar -zxvf keepalive ...

  10. Rust学习笔记一 数据类型

    写在前面 我也不是什么特别厉害的大牛,学历也很低,只是对一些新语言比较感兴趣,接触过的语言不算多也不算少,大部分也都浅尝辄止,所以理解上可能会有一些偏差. 自学了Java.Kotlin.Python. ...