注：前端文件index.html和后端文件formCheck.php都放在 Apache的安装目录下的myApp文件夹里。
（1）index.html
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <div> <!-- formCheck.php文件 放在 MAMP目录下的 myApp文件里 也就是Apache服务器上 --> <!-- 本文件 也必须 放在 MAMP目录下的 myApp文件里 也就是Apache服务器上，这样才能通过./ 访问后端的php文件 --> <form action="./formCheck.php" method="post" id="form"> 用户名：<input type="text"><br> 密码：<input type="password"><br> <input type="button" value="登录" id="btn"> </form> </div> </body> </html> <script> function ajax() { // ajax工作原理 // 1.创建XMLHttpRequest对象 // 2.open() 配置请求信息： GET/POST url地址 同步／异步 // 3.send() 发送 GET时候里面null 。POST时候里面String // 4.onreadystatechange = function(){} 请求成功 处理函数 var http_request = null; // 1. if(window.XMLHttpRequest) { // 非IE浏览器 http_request = new XMLHttpRequest(); }else if(window.ActiveXObject) { // IE浏览器 try{ http_request = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ http_request = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } // 2. // 设置异步请求目标为 ****的文件（这里是formCheck.php文件）,请求方法为GET 非常重要 get方法可以把相应的表单信息拼接在?后面 http_request.open("GET","formCheck.php?username=liangting&&password=666666",true); // 3. // 3.1向服务器发送一个不包含任何参数的请求---GET方式 http_request.send(null); // 4. // 回调函数的具体代码 http_request.onreadystatechange = function () { if(http_request.readyState == 4) { // 判断请求状态 if(http_request.status == 200) { // 请求成功，开始处理返回结果 alert(http_request.responseText); }else { alert("您请求的页面有错误！"); } } } } var btn = document.getElementById("btn"); var form = document.getElementById("form"); btn.onclick = function() { // 这里用get方式，也就是仅仅 去请求服务端的信息，所有send方法里面参数为null // 通过调用ajax函数 去获得服务器端的信息 并渲染到页面上 // 所以 下一步去写 后端代码 formCheck.php文件 ajax(); } </script>
（3）formCheck.php文件
<?php $username = $_GET['username']; // get方法提交的就用$_GET[]的方法 去取提交的信息 $password = $_GET['password']; echo $username.$password; // 用$echo 语句直接输出 php中 用 . 作为字符串拼接 ?>
