工具/材料
电脑
Hbuilder
xampp
操作方法
- 01
第一步，新建一个html界面，这里我就新建一个“index.html”的界面。界面中有一个div和一个button。给div添加id，待会我们通过ajax把从服务器获取到内容添加到div里面。
- 02
接着在script里面定义一个函数，这个函数就是用来创建ajax对象，并且向服务器发送请求的。如图，我就定义一个变量ajax，然后使用if(window.XMLHttpRequest)来判断浏览器是否支持XMLHttpRequest，如果支持，则创建一个对应的对象。
- 03
如果不支持XMLHttpRequest，则创建 ActiveXObject 对象。ActiveXObject是IE5和IE6里面的，这两个版本的浏览器基本没人用了，不过有些公司也要求兼容这两版浏览器。
- 04
创建好对象之后，我们就可以调用open方法来发起请求。open里面有三个参数，第一个表示请求方式，这里我就使用get请求。第二个参数表示请求的地址，这里我就使用PHP文件，待会我再写这个文件。第三个参数表示同步或者异步，true表示异步，false表示同步，这里我就用异步（ajax最大的特点就是异步）。之后，再调用send方法。如果是get请求，则send里面的参数为空。
- 05
之后，给onreadystatechange事件绑定一个匿名函数。onreadystatechange表示的是请求响应状态改变事件。当向服务器发送请求时，请求的状态，响应的状态都会发生改变，而改变的时候就可以触发这个事件了。
- 06
之后，判断readyState和status的状态，200状态码表示请求完成，4状态码表示响应就绪。之后，我们就可以把responseText里面的数据添加到div里面了。responseText是XMLHttpRequest对象的属性，它保存着服务器返回的数据。
- 07
之后，我们给之前的按钮绑定一个点击事件。
- 08
然后写好之前的“my.php”文件，这里我就写一个最简单的。
- 09
然后安装好xampp，记住它的安装路径，然后启动xampp，如图所示，点击“start”。
- 10
之后，找到xampp的安装路径，在里面找到htdocs文件夹，把我们之前编写的index.html和my.php文件放到htdocs文件夹里面。
- 11
之后，在浏览器地址栏输入地址，localhost/index.html，注意，localhost后面跟你的文件名要一致，我的是index.html，所以就写index.html。然后按回车键就可以看到编写好的界面了，我们点击按钮试试看效果。
- 12
之后，我们就会看到页面在没有全部刷新的情况下就从服务器获取到数据了。
- End
特别提示
ajax要用到后端文件，而后端文件的执行需要用到服务器，所以学习前端的小伙伴也需要会点服务器和后端的知识哦。
