在所有的教程中，不管是网上的资料还是书籍上。都说，想要学会ajax，需要提前学会html+css+javascript就行了，然后很多前端初学者们就开始学，结果发现照着例子写了半天愣是没啥反应，最终果断放弃~【推荐教程：ajax视频教程】
其实……你们没有搭建后台环境啊，亲~
1.先搭建一个后台环境吧？比如php
对于我们~前端的初学者来说，哪有这么多精力时间去精学php啊，对吧？所以呢，推荐一个php环境搭建：phpstudy，只要下一步下一步的安装就ok了。
我将phpstudy安装到了d盘，所以进入d盘找到phpstudy文件夹里面的www文件夹
www文件夹就相当于我们电脑上的服务器了，以后写的所有东西，全部放到www文件夹中。
在我们的www文件夹下面创建两个文件，index.html和handle.php
让我们测试一下，在刚才新建的index.html中随便写点代码。打开浏览器，输入localhost敲击回车，如果能打开刚才写的网页，那么就说明我们搭建成功
如果失败，可能是端口冲突，也有可能是phpstudy木有运行~自己查一查调试一下
2.让我们用php写一个简单的后台应用吧~
index.html<body><form action="index.html" method="get"> <label for="name">姓名</label> <input type="text" id="name" name="name"> <input type="submit" value="提交"></form> </body>
不知道你们表单学的咋样，所以唠叨两句：get代表我们要使用的传输方式，对应的还有post；
input标签当中的id对应的是label标签当中的for属性；
input标签当中的name属性，一会要对接php使用；
handle.php
<meta charset="utf-8"><!--其实我的这个写法有点取巧了,先凑合着看--><?php $student=array( array("name"=>"张三","sex"=>"男","age"=>"20"), array("name"=>"李丽","sex"=>"女","age"=>"19"), array("name"=>"王二","sex"=>"男","age"=>"21") );$str="没有找到这个学生";$name=$_get["name"];foreach ($student as $value) { if($value["name"]==$name){ $str=$value["name"].",".$value["index"].",".$value["sex"].",".$value["age"]; break; };};echo $str; ?>
3.换成ajax的写法！
index.html
html:
<h1>请输入姓名：</h1><input type="text" id="name"><button onclick="submit()">提交</button><div id="text"></div>
javascript:
function submit(){ var name=document.getelementbyid('name').value var text=document.getelementbyid('text') var xhr=new xmlhttprequest(); xhr.open("get","handle.php?name="+name); xhrsend(); xhr.onreadystatechange=function(){ text.innerhtml=xhr.responsetext }
注意：
如果有人把源代码中的 text.innerhtml=xhr.responsetext 改成了 alert(xhr.responsetxt),你将会发现，命令将会被执行多次。这个时候，就要稍微的改一下代码了：(原因，在文章后面你会找到)
...... xhr.onreadystatechange=function(){ if(xhr.readystate==4){alert(xhr.responsetext)}; } ......
4.例子已经成功了，那我们就正式进入学习吧~
ajax的优势
在我们的第一个例子当中，是通过submit按钮提交到php后台，然后再进行数据的处理操作。
这种操作呢，有一个弊端，就是需要把一整页的数据同时提交到后台。
举个栗子
如果我们在一个网站进行注册，填写完了昵称，密码，性别，年龄等信息，提交过去之后，后台告诉你昵称已被使用，ok我们将昵称，密码，性别，年龄等，通通重写，等再次提交过去，又告诉你昵称依然已被使用。这时候你起了一个非常非常low的名字，心想，这回不会再出问题了吧？结果提交过去之后，后台告诉你，你的密码过短需再次重新填写信息。恩~放弃了吧！
如果使用ajax技术呢？我们可以将数据逐条的提交到后台，也可以随时随地的提交。比如说，你填写完昵称，后台立马告诉你昵称被用，ok，改了就是喽~。
ajax的使用
1.创建ajax
var xhr=new xmlhttprequest();
2.向服务器发送请求
xhr.open("get","handle.php",true);xhr.send();
open里面有三个参数，分别为数据传输方式，传输文件，是否异步
当我们的传输方式为post的时候，就会用上send(),如果是get方式，推荐在send里面写上参数null
3.get vs post
一句话：get更快，post更强
4.服务器响应 —— 你把值传过去了，咋也得传回来点什么吧？
xhr.responsetext;xhr.responsexml;
5.响应事件——什么时候才能返回数据嘞？
onreadystatechange 事件两个属性：readystatestatus
每当 readystate 改变时，就会触发 onreadystatechange 事件。readystate 属性存有 xmlhttprequest 的状态信息。
xhr.onreadystatechange=function(){ console.log(xhr.readystate) console.log(xhr.responsetext)
以上就是ajax入门教程之30分钟实例演示的详细内容。