ajax通过局部刷新给用户带来了更好的交互体验， 今天咪咪我就来分享一下ajax的用法 。 工具/材料 电脑
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最大的特点就是异步） 。 之后， 再调用s方法 。 如果是get请求， 则s里面的参数为空 。
文章插图
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文件夹里面 。
推荐阅读
- UG零件中的移动命令怎么用
- 如何利用CAD中的模板保留图层？
- 如何利用CAD中的图层状态管理器保存图层？
- CAD中的角度标注怎么使用？
- 如何设置CAD中的线型比例？
- CAD中的虚线显示成实线应该怎么办?
- 狄仁杰在实战中的打法和技巧
- 如何解绑支付宝中的银行卡？
- 怎么更改UC浏览器中的字体类型？
- 如何开启支付宝中的手势解锁？