AJAX的简述与应用

什么是AJAX？
AJAX（Asynchronous Javascript And XML）,是一种快速创建动态网页的技术。可实现网页局部的更新数据，减少对服务器的请求。

 举个例子就是我点击选项卡，只是单纯的更新选项卡区域内的内容。

如果不用AJAX，而是链接的方式画也会实现相同效果，但会使整个页面都重新加载一遍，如果在网络不好的情况下，可能还会造成内容无法显示的情况。

它的工作原理又是什么？

• AJAX的工作原理：当浏览器发生某个事件时（对数据的引用），浏览器会创建XMLHttpRequest对象【1】,并发送请求给服务器，服务器接受请求后，并作出处理，带着浏览器需要的数据响应浏览器，浏览器接受到数据后根据js中的内容进行一系列处理，更新展示。

XMLHttpRequest【1】:
1.XMLHttpRequest是AJAZ的基础，它的创建方式有IE(new ActiveXObject(参数))该参数为IE的不同版本, 与非IE两种(new XMLHttpRequest())。
2.AJA就是通过这个对象同服务器进行数据的交互，可以不刷新整个页面的情况下更新数据，也不用每次对数据的处理只交给服务器。这样就可减轻服务器的负担，加快响应速度。

（菜鸟教程引用图）

---

简单地对AJAX一些方法的应用
在这之前我们得安装服务器端的运行环境（百度搜索，教育网自行下载）。

这里我们打开安装后的文件位置，打开localhost，创建html,（php，java…等后台语言看个人）

//这里我只做了请求，没有响应
let btn = document.getElementById("btn");

    window.onload = function () {
        btn.onclick = function () {
        	//这里我没有做兼容的处理，可参考https://www.runoob.com/ajax/ajax-xmlhttprequest-create.html进行处理
            var xmlhttp = new XMLHttpRequest();//每次点重新定义一个ajax对象，防止数据无法得到更新
           
            /*
            请求本地服务器
            第一个参数：请求的方式，GET POST两种
            第二参数：文件在服务器的位置，这里是本地服务器下的Php文件下的get.php后面是带的值，属性名，属性值随便
            第三个参数：同步（true）还是异步（false），AJAX在不同情况下的处理方式不同，例如：账号注册时用同步，数据实时更新时用异步。 
            */
            xmlhttp.open("GET", "http://localhost/Php/get.php?username=xxx&userpwd=123123", true);
            //这儿的参数为空，只有post请求时才带参。当为post时将"username=xxx&userpwd=123123"与null替换并把。open();中第一个参数改为POST，第二个参数的的值删除
            xmlhttp.send(null);
        }
    }

<?php

$username = $_GET["username"];//你用GET方式请求这里就用$_GET,POST则是$_POST
$userpwd = $_GET["userpwd"];

file_put_contents("get.txt",  $userpwd);//这回将你发送的数据放入get.txt文件中，名字随便，这个文件自动生成

我之前userpwd带的参数值为123123

学习连接：https://www.liaoxuefeng.com/wiki/1022910821149312/1023022332902400