Ajax的使用四大步骤详解,五、使用Ajax的步骤

完成验证用户名案例，要求用户名唯一，就是不能有重复。

页面中有一个文本框，当失去焦点的时候，验证输出的内容是否已经存在。

# 1、创建所需文件

创建03chkusername.html:

![](https://img.kancloud.cn/4e/a8/4ea88767f64b7f3dc7403a78f50a9a8d_673x39.png)

创建03chkusername.php

![](https://img.kancloud.cn/e9/e6/e9e6f1c01ca04fb92e33e70c33cc4b3a_721x163.png)

# 2、当input失去焦点，准备发送

![](https://img.kancloud.cn/9c/88/9c881230fce625bbe5df8e4e9aa51feb_944x437.png)

因为用get方式请求，所以参数直接写到url上即可。服务器端获取地址栏的参数，同样使用$_GET来获取。

# 3、发送请求

调用Ajax对象的send方法发送请求到服务器。

![](https://img.kancloud.cn/13/ce/13ce7f6c8ac6b39f15c27660e4dadc41_946x419.png)

# 4、服务器接收数据并判断

![](https://img.kancloud.cn/db/81/db81f5bd9aa2ee9ef9ec87ff3de03bde_699x412.png)

判断完成，将判断的结果返回给浏览器。echo出来的东西就是返回给浏览器的内容。

测试：

![](https://img.kancloud.cn/d8/92/d8929419ccc5c000d9de75fa24e71d7b_1257x605.png)

# 5、接收服务器返回的数据，并处理

![](https://img.kancloud.cn/45/57/4557fc3c953413c9289840d70754e51f_1068x486.png)

经过测试，发现并没有成功接收到服务器返回的数据。通过console.log(result);查看到的结果什么都么有。

# 6、监听Ajax执行状态

发送请求完毕，不应该马上就接收服务器返回的数据，应该判断一下Ajax进行到哪一步了。如果说进行到最后一步了，即服务器返回数据完毕，这个时候才应该获取服务器返回的数据。

Ajax对象中用onreadystatechange属性(事件)，来监听(检测)Ajax执行到哪一步了。

Ajax对象中用readyState属性来表示Ajax的状态，具体是readyState属性值如下：

![](https://img.kancloud.cn/44/9e/449eb29c4155820cc76ca1760479aae5_788x151.png)

![](https://img.kancloud.cn/76/73/7673156c7f4065503f4c1a11adf228ec_1142x557.png)

# 7、使用Ajax步骤总结

![](https://img.kancloud.cn/45/e2/45e25d914dfab68515deb6ac67eeb40d_1138x490.png)

Ajax的使用四大步骤详解,五、使用Ajax的步骤相关推荐

华硕笔记本k555拆机图解_「华硕k401n」华硕K401笔记本电脑拆机清灰步骤详解 - seo实验室...
华硕k401n 笔记本电脑长时间使用后存在大量灰尘,造成风扇噪音大,cpu温度高,影响计算机工作性能,威胁硬件安全.因此需要及时清灰.下面为大家分享华硕K401笔记本电脑拆机清灰步骤,有需要的朋友快快 ...
tecplot脚本在Linux系统下运行,Linux系统下安装Tecplot的步骤详解
众所周知,Tecplot是Linux系统中的数据分析软件,Tecplot的功能正在变得更加完善,使用的人群也在逐渐增多.下面,我们就跟随U大侠小编一起来看看Linux系统下安装Tecplot的步骤详解 ...
linux如何迁移文件,linux 数据库文件迁移步骤详解
linux 数据库文件迁移步骤详解 linux 数据库文件迁移步骤详解数据库所有文件(数据文件.日志文件.临时文件.控制文件)迁移步骤: 1. 迁移步骤概述: 1:具体需求 2:保存现有数据文件.控 ...
PackageManagerService启动详解(五)之Android包信息体和解析器(中)
PKMS启动详解(五)之Android包信息体和包解析器(中) Android PackageManagerService系列博客目录: PKMS启动详解系列博客概要 PKMS启动详解(一)之 ...
mysql 获取当前整点_Oracle 生成未来三天的整点时间(步骤详解)
需求:X坐标轴时间都为整点时间,展示未来三天内的预测(x轴展示未来三天的整点时间),每3个小时一个刻度,横坐标共计24个刻度步骤一:取当前时间 SELECT SYSDATE FROM DUAL 步骤 ...
python3.8安装pygame_Python3.8安装Pygame教程步骤详解
注:因为最近想用一下Python做一些简单小游戏的开发作为项目练手之用,而Pygame模块里面提供了大量的有用的方法和属性.今天我们就在之前安装过PyCharm的基础上,安装Pygame,下面是安装的 ...
linux centos7 mysql_Linux centos7环境下安装MySQL的步骤详解
Linux centos7环境下安装MySQL的步骤详解安装MySQL mysql 有两个跟windows不同的地方 1).my.ini 保存到/etc/my.ini 2).用户权限,单独用户执行 ...
mac python3.8上怎么安装pygame 第三方库_Python3.8安装Pygame Python3.8安装Pygame教程步骤详解...
想了解Python3.8安装Pygame教程步骤详解的相关内容吗,孤傲小二~阿沐在本文为您仔细讲解Python3.8安装Pygame的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Pyth ...
SAP UI5 初学者教程之二十六 - OData 服务配合 Mock 服务器的使用步骤详解试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...

Ajax的使用四大步骤详解,五、使用Ajax的步骤

Ajax的使用四大步骤详解,五、使用Ajax的步骤相关推荐

最新文章

热门文章