Ajax 使用ajax加上get和post方法，通过后台加载数据，并在网页上进行显示【案例+解释】 （一）

学习Ajax之前必须有html，CSS，JS，jQuery(了解)的相关知识。

1.什么是Ajax？

Ajax在前端主要的功能是获取服务器的数据。

经常使用Ajax来进行异步加载，也就是不影响整个窗口的前提下，进行页面部分的加载改变。

Ajax异步!!!，Ajax的全称自然就是：Asynchronous(异步) JavaScript And XML

2.Ajax的使用 Get方法

在学习php基础语法时候，我们通过跳转到一个新的页面来实现，就像php语法的第7节一样。下面我们使用Ajax来，直接请求服务器发送数据，不需要跳转一个新的页面。

在元素JS中来实现Ajax主要的类就是XMLHttpRequest，它的使用一般有四个步骤：

1.创建XMLHttpRequest对象
2.准备发送网络请求
3.开始发送网络请求
4.指定回调函数

这里使用ajax，能够识别用户名是否已存在的例子：
例如：
首先，在wamp后台中，创建一个checkUsername.php，作为一个判断文件。

再在wamp中，创建一个register.html，来作为前端访问的页面：

	
	
	


	
注册界面
	

		用户名：
			
			
			

		密码：
			
	

多看注释！！！！来理解代码。

3.Ajax的使用 Post方法

和上面一样，直接上例子，一定看注释！！

创建一个register.html，来作为前端访问的页面：

	
	
	


	
注册界面
	

		用户名：
			
			
			

		密码：
			
	

对readyState和status的解释：

另一个不变，checkUsername.php

这里解释以下，第2步骤，准备发送阶段的open方法中的服务端地址如何确定，一般开发人员会提供一份接口文档,里面会详细的告诉你地址参数什么的。

4.使用Ajax完成唯一性案例操作

话不多说，直接上代码。

创作一个register.html文件，内容如下：

	
	
	


	
注册界面
	

		用户名：


		邮箱：


		手机号码：
	

再准备三个服务器php文件，

checkEmail.php：

checkPhone.php文件：

checkUsername文件：

上面就是完成了一个用户名，电话，电子邮箱的一个唯一性检验，一定要多看注释，联合前面。