大家好，又见面了，我是你们的朋友全栈君。
（对低版本的 ie 不作兼容处理了，太过时，不知道谁还用）
本次演示采用原生javascript php 实现ajax的 post 和 get 功能;
对php不了解的同学不用担心，就两三行代码，而且我会详细说明；
好了，下面开始：
第一步：如果想要运行起来，那么还是需要开启服务器的，这里推荐使用 wampserver，
下载相应的版本即可，注意你的电脑是32位的还是64位的，例如我的电脑64位的
那么我下载64位的即可，百度即可；
安装到d盘吧，安装完成桌面会有这个图标，如果没有，就去找找安装的软件，
然后添加快捷到桌面即可；
点击启动wampserver，当相应的图标从红色变到黄色再变到绿色，
那说明一切ok;当然也有可能出现各种问题，比如显示你的电脑缺少这个东西，
缺少那个东西，或者根本就不会变绿，而是一直是红色或者黄色，那就悲剧了，
得慢慢解决了，这里不赘述，
我就当你可以启动了，因为重点是ajax；
打开浏览器，输入：localhost 或者127.0.0.1，如果有页面输出，
那么安装是没问题的
如果你只想看看如何实现，不想安装测试，那就进行下一步；
第二步： 找到wampserver 安装目录，如果你没安装成功，那就看看如何做吧，
操作是进行不下去了
（或者联系我，我帮你解决，给我留言即可）；比如我的：
我安装在D盘下，我的软件起名wamp1，你的你默认是wamp，
打开这个文件夹，找到www文件夹；
在www文件夹下建立本次的项目：datacenter，随便起名字；
第三步： 在datacenter中新建两个文件，一个index.html , 一个data.php，
注意文件保存为utf-8编码方式；
建好之后如何查看页面呢；
打开浏览器，输入：localhost 或者127.0.0.1，选择你的项目，
默认打开的是index.html文件；
1.AJAX get ：（不传递参数）当我点击页面中的按钮时，获取后台数据，
然后显示在标签 <p>中 ；
index.html 代码：
代码语言：javascript复制<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ajax POST GET </title>
</head>
<body>
<p id="def">nothing</p>
<button id="abc">ajax</button>
<script>
//取得 id=abc 的按钮;
var btn=document.getElementById("abc");
//取得 id=def 的段落标签<p>;
var def=document.getElementById("def");
//点击按钮时执行函数
btn.οnclick=function(){
//ajax第一步
var request=new XMLHttpRequest();
//ajax第二步,第一个参数GET,第二个是我们要找谁要数据，
//第三个是异步还是同步，true代表异步，不要同步；
request.open("GET","data.php",true);
//第三步，send()里面空着
request.send();
//第四部 发送请求出发下面这个函数
request.onreadystatechange=function(){
//readyState 有这几种状态，我们只需要判断4就行;
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
if(request.readyState==4){
//status 状态200 代表 ok
if(request.status==200){
//request.reponseText代表后台返回的数据
def.innerHTML=request.responseText;
}
}
}
}
</script>
</body>
</html>data.php代码：
代码语言：javascript复制<?php
//我们假装已经从数据库取得了字符串"坚持学习..."
//用变量$str 表示字符串
//php中变量前面加个$;
$str="坚持学习就会成功！";
//向index.html返回数据
//inde.html中 request.responseText==这里的$str;
echo $str;
?>结果演示：点击按钮之前
点击按钮之后：
2.AJAX post ：（不传递参数）当我点击页面中的按钮时，获取后台数据，
然后显示在标签 <p>中 ；
和上面的get方式的区别是把参数get 换成post 即可：
即把：
request . open ( “GET” , “data.php” , true );
换成
request . open ( “POST” , “data.php” , true );
其它的全部一样；
3.AJAX get ：（传递参数） 当我点击页面中的按钮时，获取后台数据，
然后显示在标签 <p>中 ；
传递参数是什么意思呢，就是发送请求的时候，顺便把一个东西传给后台，
然后 后台接收数据进行处理；
get 如何传递数据，再次修改index.html;
即把：
request . open ( “GET” , “data.php” , true );
换成
request . open ( “GET” , “data.php?id=” 123 , true );
这里我传递了一个id=123给后台
那么data.php也要变化：
data.php代码:
<?php
//通过 $_GET 获取 id;
$ id =$ _GET [ ‘id’ ];
//向index.html返回数据
//inde.html中 request.responseText==这里的$str;
echo $ id ; //又把id返回给前台，绕了一个圈数据又回去了，
? >
运行之后，点击按钮：
4.AJAX post ：（传递参数） 当我点击页面中的按钮时，获取后台数据，
然后显示在标签 <p>中 ；
这里的post又是如何传递参数的呢；
我们再次修改index.html中的ajax部分为：
btn . onclick = function (){
//ajax第一步
var request =new XMLHttpRequest ();
//ajax第二步,第一个参数GET,第二个是我们要找谁要数据，
//第三个是异步还是同步，true代表异步，不要同步；
request.open(“POST”,”data.php”,true);
//post传递参数加上这么个头部即可
request.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
//第三步，post传递参数放在这里
request.send(“id=” 123);
//第四部 发送请求出发下面这个函数
request .onreadystatechange = function (){
//readyState 有这几种状态，我们只需要判断4就行;
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
if ( request .readyState == 4 ){
//status 状态200 代表 ok
if ( request .status == 200 ){
//request.reponseText代表后台返回的数据
def . innerHTML = request .responseText;
}
}
}
}
data.php代码：
<?php
//通过 $_POST 获取 id;
$ id =$ _POST [ ‘id’ ];
//向index.html返回数据
//inde.html中 request.responseText==这里的$str;
echo $ id ; //又把id返回给前台，绕了一个圈数据又回去了，
? >
运行效果和上面都是一样的；
有问题欢迎留言；
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/170683.html原文链接：https://javaforall.cn
