什么是AJAX
AJAX 全称: Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
什么是XML
XML是一种与HTML一样的标记语言。
HTML叫做超文本标记语言
,XML叫做可拓展标记语言
。
在我们前端开发者看来,XML就是一种数据格式,用于前后端传递数据使用(现在已经被JSON所取代)。
{
"username": "王老五",
"password": 1234567,
"children": [{}, {}, {}]
}
<people username="王老五" password="1234567">
<children>
<child>
</child>
<child>
</child>
<child>
</child>
</children>
</people>
AJAX发送步骤
- 获取对象
- 初始化一个对象
- IE7之前
var xhr = new ActiveXObject("Microsoft.XMLHttp");
- IE8及高级浏览器
var xhr = new XMLHttpRequest();
- 决定请求方式
xhr.open(method, url, boolean);
- method:请求方式
- url:请求的URL
- 是否异步,默认是true,异步
- 发送数据
xhr.send(data);
- data:要发送的数据
key=value&key1=value1&...
这样的键值对形式 - 注意: send方法发送的是请求正文中的数据。如果是get请求,需要将数据携带在URL的query部分;如果是post请求,需要将数据往send里传递。
- data:要发送的数据
- 获取返回内容
- xhr.responseText
xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }
XHR的属性
- xhr.readyState
- 该属性用于标记当前HTTP请求进行到哪个阶段了
- readyState === 0: 表示未初始化完成,也就是 open 方法还没有执行
- readyState === 1: 表示配置信息已经完成,也就是执行完 open 之后
- readyState === 2: 表示 send 方法已经执行完成
- readyState === 3: 表示正在解析响应内容
- readyState === 4: 表示响应内容已经解析完毕,可以在客户端使用了
- xhr.onreadystatechange
- 该属性是事件属性,该事件会在每一次readyState发生变化的时候触发
xhr.onreadystatechange = function() { // 因为这个事件会多次触发 但是我们只想在接受到全部数据之后触发 所以要判定状态值 和 状态码 if (xhr.readyState === 4 && xhr.status === 200) { ... } }
- xhr.responseText
- 该属性用于接收返回的数据内容
- 注意: 只有在
xhr.readyState
为4
时,才可以使用全部的返回数据
- xhr.status
- 本次HTTP请求的状态码
发送一个带有参数的 get 请求
get 请求的参数就直接在 url 后面进行拼接就可以
const xhr = new XMLHttpRequest()
// 直接在地址后面加一个 ?,然后以 key=value 的形式传递
// 两个数据之间以 & 分割
xhr.open('get', './data.php?a=100&b=200')
xhr.send()
- 这样服务端就能接受到两个参数
- 一个是 a,值是 100
- 一个是 b,值是 200
发送一个带有参数的 post 请求
post 请求的参数是携带在请求体中的,所以不需要再 url 后面拼接
const xhr = new XMLHttpRequest()
xhr.open('post', './data.php')
// 如果是用 ajax 对象发送 post 请求,必须要先设置一下请求头中的 content-type
// 告诉一下服务端我给你的是一个什么样子的数据格式
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
// 请求体直接再 send 的时候写在 () 里面就行
// 不需要问号,直接就是 'key=value&key=value' 的形式
xhr.send('a=100&b=200')
application/x-www-form-urlencoded 表示的数据格式就是 key=value&key=value
演示案例: 使用get和post实现用户注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
h2{
text-align: center;
}
form{
width: 400px;
height: auto;
border: 1px solid #ccc;
margin: 0 auto;
text-align: center;
}
.items{
display: flex;
justify-content: center;
height: 50px;
align-items: center;
}
label{
flex: 2;
}
input{
flex: 4;
}
button{
width: 100px;
}
</style>
</head>
<body>
<h2>GET</h2>
<form action="http://localhost/GET_POST/get.php" method="get">
<div class="items">
<label for="">用户名:</label>
<input type="text" name="username">
</div>
<div class="items">
<label for="">密码:</label>
<input type="password" name="password">
</div>
<div class="items btn">
<button>注册</button>
</div>
</form>
<h2>POST</h2>
<form action="http://localhost/GET_POST/post.php" method="post">
<div class="items">
<label for="">用户名:</label>
<input type="text" name="username">
</div>
<div class="items">
<label for="">密码:</label>
<input type="password" name="password">
</div>
<div class="items btn">
<button>注册</button>
</div>
</form>
</body>
</html>
get.php
<?php
// 编码
header("content-type:text/html;charset=utf-8");
// 1、接收前端传递过来的数据
$username = $_GET["username"];
$password = $_GET["password"];
// 2、连接数据库
mysql_connect("localhost", "root", "123456");
// 3、选择数据库
mysql_select_db("gx2006");
// 4、定义sql语句
$sql = "INSERT INTO user VALUES ('$username', '$password')";
// 5、执行sql语句
$result = mysql_query("$sql");
// 6、获取执行结果
if($result){
echo "注册成功!";
}else{
echo "注册失败!";
}
// 7、关闭连接
mysql_close();
?>
post.php
<?php
// 编码
header("content-type:text/html;charset=utf-8");
// 1、接收前端传递过来的数据
$username = $_POST["username"];
$password = $_POST["password"];
// 2、连接数据库
mysql_connect("localhost", "root", "123456");
// 3、选择数据库
mysql_select_db("gx2006");
// 4、定义sql语句
$sql = "INSERT INTO user VALUES ('$username', '$password')";
// 5、执行sql语句
$result = mysql_query("$sql");
// 6、获取执行结果
if($result){
echo "注册成功!";
}else{
echo "注册失败!";
}
// 7、关闭连接
mysql_close();
?>
- 通过get方式注册
- 通过post方式注册
封装AJAX
为了方便使用,我们将AJAX的发送步骤封装
var AJAX = {
// 封装get,参数一表示一个url路径,参数二表示前端传递过来的数据,是一个对象,参数三表示一个回调函数
get(url, data, callback){
// 假如data是:{a: 1, b: 2, c: 3, d: 4}
// 需要将它格式转化成:a=1&b=2&c=3&d=4,这种querystring字符串形式
// 定义一个变量,用于存放转化后的字符串
let querystring = "";
for (let i in data){
querystring += i + "=" + data[i] + "&";
// 第一次循环结束以后 => a=1&
// 第二次循环结束以后 => a=1&b=2&
// 第三次循环结束以后 => a=1&b=2&c=3&
// 第四次循环结束以后 => a=1&b=2&c=3&d=4&
}
// 将最后面的&去掉,即只要前面部分
querystring = querystring.slice(0, -1);
// 1、初始化对象
let xhr = new XMLHttpRequest();
// 2、监听状态
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)){
// JSON.parse:将符合JSON格式的字符串转为对象
// 将返回内容转为对象
let obj = JSON.parse(xhr.responseText);
// 回调函数
callback(obj);
}
}
// 3、open
xhr.open("get", url + "?" + querystring, true);
// 4、send
xhr.send();
},
// 封装post,参数一表示一个url路径,参数二表示前端传递过来的数据,是一个对象,参数三表示一个回调函数
post(url, data, callback){
// 假如data是:{a: 1, b: 2, c: 3, d: 4}
// 需要将它格式转化成:a=1&b=2&c=3&d=4,这种querystring字符串形式
// 定义一个变量,用于存放转化后的字符串
let querystring = "";
for (let i in data){
querystring += i + "=" + data[i] + "&";
// 第一次循环结束以后 => a=1&
// 第二次循环结束以后 => a=1&b=2&
// 第三次循环结束以后 => a=1&b=2&c=3&
// 第四次循环结束以后 => a=1&b=2&c=3&d=4&
}
// 将最后面的&去掉,即只要前面部分
querystring = querystring.slice(0, -1);
// 1、初始化对象
let xhr = new XMLHttpRequest();
// 2、监听状态
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)){
// 回调函数
callback(JSON.parse(xhr.responseText));
}
}
// 3、open
xhr.open("post", url, true);
// 将请求头内容更改为表单的内容类型
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=utf-8");
// 4、send
xhr.send(querystring);
}
}
案例演示: 使用封装的AJAX实现用户注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
h2{
text-align: center;
}
form{
width: 400px;
height: auto;
border: 1px solid #ccc;
margin: 0 auto;
text-align: center;
}
.items{
display: flex;
justify-content: center;
height: 50px;
align-items: center;
}
label{
flex: 2;
}
input{
flex: 4;
}
button{
width: 100px;
}
</style>
</head>
<body>
<form action="" method="">
<div class="items">
<label for="">用户名:</label>
<input type="text" name="username" id="username">
</div>
<div class="items">
<label for="">密码:</label>
<input type="password" name="password" id="password">
</div>
<div class="items btn">
<button id="btn" type="button">注册</button>
</div>
</form>
<!-- 引入封装好的AJAX.js -->
<script src="AJAX.js"></script>
<script>
let username = document.getElementById("username");
let password = document.getElementById("password");
let btn = document.getElementById("btn");
btn.onclick = function(){
let un = username.value;
let psw = password.value;
AJAX.post("http://localhost/EN_AJAX/post.php", {username:`${un}`, password:`${psw}`}, function(data){
console.log(data);
})
}
</script>
</body>
</html>