开发者学堂课程【Ajax 前端开发入门与实战：Ajax 使用的基本场景和步骤】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8523
Ajax 使用的基本场景和步骤
目录：
一、 基本场景
二、 使用步骤
三、 具体代码实现
一、 基本场景：
1.评论加载效果：http://view.news.qq.com/
2.用户名验证：如下图所示
注意：评论加载效果和用户名验证并没有在整个页面跳转，仅仅是在当前界面中进行数据的请求，然后得到结果在当前页面显示，没有进行整个页面的跳转。
3.总结：可用六字概括---“局部”“异步”“刷新”
Ajax 的全称: Asynchronous Javascript And XML，就是使用 Js 代码获取服务器数据。简单来说，就是一个异步的 javascript 请求，用来获取后台服务端的数据，而并不是整个界面进行跳转。
二、 使用步骤：
1.创建 XMLHttpReques 对象
2.准备发送网络请求
3.开始发送网络请求
4.指定回调函数
三、具体代码实现：
1.创建项目
（1）前端：
代码如下：
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
var username = document document.getEl ementById
(“username”).value;
//使用 js 代码进行 checkUsername.php 这个文件的访问，将 username 传递给这个文件
var xhr = new XMLHttpRequest();
xhr.open("get" , "checkUsername.php?username=" + username,
true);
xhr.send(null);
xhr.onreadystatechange = function(){
var result = xhr.responseText;console.log(result);
document.getElementById("result").ihnerText = result;
};
};
};
</script>
</ head>
</body>
<h1>注册界面</h1>
<form action="register.php" method="get">
用户名:<input type="text" name="username" id="username">
<input type="button" value="验证用户名" id="btn">
<span id="result"></span>
<br>
密码:<input type="password" name="password"><br>
<input type="submit" value="提交">
</from>
</body>
</html>
（2）后端：
代码如下：
<?php
$uname = $_GET["username"];
//这个地方是要查询数据库
if($uname == 'zhangsan ') {
echo "username exists";
} else {
echo "username ok";
}
?>
2.代码实现效果：
