什么是ajax?
即 Asynchronous [e'sɪŋkrənəs] Javascript And XML, AJAX 不是一门的新的语言,而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
同步与异步:
同步和异步概念:
同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务
异步: 不受当前任务的影响,两件事情同时进行,做一件事情时,不影响另一件事情的进行。
编程中:异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。
网页异步应用:
-
验证你的用户名是否已经存在(一边输入,一边获取你的信息,和后台比对)。
-
百度搜索提示,及相关内容展示(一边输入,一边找出了你可能要的内容)。
-
新浪微博评论(异步加载)。
XMLHttpRequest可以以异步方式的处理程序。
XMLHttpRequest
浏览器内建对象,用于与服务器通信(交换数据) , 由此我们便可实现对网页的部分更新,而不是刷新整个页面。这个请求是异步,即在往服务器发送请求时,并不会阻碍程序的运行,浏览器会继续渲染后续的结构。
发送get请求
XMLHttpRequest以异步的方式发送HTTP请求,因此在发送请求时,一样需要遵循HTTP协议。
//使用XMLHttpRequest发送get请求的步骤
//1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();//构造函数没有参数的情况,括号可以省略
//表示过了3000毫秒,就算请求超时
xhr.timeout = 3000;
// 超时后会触发timeout事件
xhr.ontimeout = function() {
console.log("超时了,你换一个网络试试");
}
//2. 设置请求行
//第一个参数:请求方式 get/post
//第二个参数:请求的地址 需要在url后面拼上参数列表
xhr.open("get", "08.php?name=abc");
//3. 设置请求头
//浏览器会给我们默认添加基本的请求头,get请求时无需设置
//4. 设置请求体
//get请求的请求体为空,因为参数列表拼接到url后面了
xhr.send(null);
-
get请求,设置请求行时,需要把参数列表拼接到url后面
-
get请求不用设置请求头
-
get请求的请求体为null
发送post请求
var xhr = new XMLHttpRequest;
//1. 设置请求行 post请求的参数列表在请求体中
xhr.open("post", "09.php");
//2. 设置请求头, post请求必须设置content-type,不然后端无法获取到数据
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//3. 设置请求体
xhr.send("name=abc&age=18");
-
post请求,设置请求行时,参数列表不能拼接到url后面
-
post必须设置请求头中的content-type为application/x-www-form-urlencoded
-
post请求需要将参数列表设置到请求体中.
获取响应
HTTP响应分为3个部分,状态行、响应头、响应体。
//给xhr注册一个onreadystatechange事件,当xhr的状态发生状态发生改变时,会触发这个事件。
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
//1. 获取状态行
console.log("状态行:"+xhr.status);
//2. 获取响应头
console.log("所有的相应头:"+xhr.getAllResponseHeaders());
console.log("指定相应头:"+xhr.getResponseHeader("content-type"));
//3. 获取响应体
console.log(xhr.responseText);
}
}
readyState
readyState:记录了XMLHttpRequest对象的当前状态
//0:请求未初始化。
//1:请求已经建立,但是还没有开始发送。
//2:请求已发送,正在处理中
//3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。
//4:响应已完成;您可以获取并使用服务器的响应了。(我们只需要关注状态4即可)
案例(代码要放到服务器上运行,本地不行)
1、判断用户名是否存在
前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!-- name属性要和form一起用,form提交的时候,自动拼接成参数 -->
<input type="text" /> <span></span>
<script>
var input = document.querySelector('input')
var span = document.querySelector('span')
/*
新单词:
xml: 解释
http: 协议
request: 请求
*/
// 给input注册失焦事件
input.onblur = function() {
// 发送ajax请求
// 1. 创建对象
var xhr = new XMLHttpRequest()
// 2. 设置请求报文
xhr.open('get', '08.php?username=' + this.value)
xhr.send(null)
// 3. 获取响应报文
// ready: 准备
// state: 状态
// change: 改变
// response : 响应
// 当xhr状态发生改变的时候,会触发
xhr.onreadystatechange = function() {
// 表示完成了
if (xhr.readyState === 4 && xhr.status === 200) {
if (xhr.responseText === 'yes') {
// 存在的
span.innerText = '已经被注册了,换一个吧'
span.style.color = 'red'
} else {
span.innerText = '✔'
span.style.color = 'green'
}
}
}
}
</script>
</body>
</html>
后台php代码(08.php):
<?php
$username = $_GET['username'];
// 后台根据用户名去数据库查询是否有这条记录
$arr = ['hucc', 'hcc', 'hucongcong', 'cc', 'zzc'];
// 判断$arr中是否包含$username
if (in_array($username, $arr)) {
// 说明有
echo 'yes';
} else {
// 没有
echo 'no';
}
?>
2、用户登录案例
前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
/* [type='button'] {
background-color: red;
}
[name='username'] {
background-color: green;
} */
</style>
</head>
<body>
<input type="text" name="username" autocomplete="off" /><br />
<input type="password" name="password" /><br />
<input type="button" value="登录" />
<script>
// 1. 给登录按钮注册点击事件
// 2. 拿到用户名和密码的值
// 3. 发送ajax请求(post请求)
var button = document.querySelector('[type=button]')
var username = document.querySelector('[name=username]')
var password = document.querySelector('[name=password]')
button.onclick = function() {
var xhr = new XMLHttpRequest()
// 发送post请求
xhr.open('post', '11.php')
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
xhr.send('username=' + username.value + '&password=' + password.value)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
if (xhr.responseText === 'success') {
alert('恭喜你,登录成功了')
location.href = 'index.html'
} else {
alert('用户名或者密码错误')
}
}
}
}
</script>
</body>
</html>
后台php代码(11.php):
<?php
header('content-type:text/html;charset=utf-8');
$username = $_POST['username'];
$password = $_POST['password'];
if ($username === 'admin' && $password === '123456') {
echo 'success';
} else {
echo 'fail';
}
?>
3、聊天机器人案例
前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Ajax</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
h3 {
text-align: center;
}
.chatbox {
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 5px;
}
.messages {
height: 350px;
padding: 20px 40px;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
overflow: scroll;
}
.messages h5 {
font-size: 20px;
margin: 10px 0;
}
.messages p {
font-size: 18px;
margin: 0;
}
.self {
text-align: left;
}
.other {
text-align: right;
}
.form {
height: 150px;
}
.form .input {
height: 110px;
padding: 10px;
box-sizing: border-box;
}
.form .btn {
height: 40px;
box-sizing: border-box;
border-top: 1px solid #ccc;
}
.form textarea {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
border: none;
resize: none;
outline: none;
font-size: 20px;
}
.form input {
display: block;
width: 100px;
height: 30px;
margin-top: 5px;
margin-right: 20px;
float: right;
}
</style>
</head>
<body>
<h3>简单的Ajax实例</h3>
<div class="chatbox">
<!-- 聊天内容 -->
<div class="messages">
<div class="self">
<h5>我说</h5>
<p>你好</p>
</div>
<div class="other">
<h5>对方说</h5>
<p>你好</p>
</div>
</div>
<div class="form">
<div class="input">
<textarea></textarea>
</div>
<div class="btn">
<input type="button" value="发送" />
</div>
</div>
</div>
<script>
// 1. 给按钮注册点击事件
// 2. 获取textarea的内容
// 3. 动态创建一个div,设置类名为self. 添加到messages中
// 4. 发送ajax请求, 根据响应的结果
// 5. 动态创建一个div,设置类名为other,添加messages中
var btn = document.querySelector('.btn input')
var text = document.querySelector('.input textarea')
var messages = document.querySelector('.messages')
btn.onclick = function() {
var value = text.value.trim()
text.value = ''
var div = document.createElement('div')
div.className = 'self'
messages.appendChild(div)
div.innerHTML = '<h5>我说</h5><p>' + value + '</p>'
div.scrollIntoView()
// 发送一个ajax请求获取响应数据
var xhr = new XMLHttpRequest()
xhr.open('post', '12.php')
xhr.setRequestHeader(
'content-type',
'application/x-www-form-urlencoded'
)
xhr.send('content=' + value)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var div = document.createElement('div')
div.className = 'other'
messages.appendChild(div)
div.innerHTML = '<h5>对方说</h5><p>' + xhr.responseText + '</p>'
div.scrollIntoView()
}
}
}
text.onkeydown = function(e) {
if (e.keyCode === 13) {
btn.onclick()
}
}
</script>
</body>
</html>
后台php代码(12.php):
<?php
header('content-type:text/html;charset=utf-8');
$arr = ['鸡你太美', '爱过', '先救我妈', '我爸是李刚', '你好帅啊', '我们约么', '丑拒', 'ff你这么穿着品如的衣服'];
sleep(1);
echo $arr[array_rand($arr, 1)];
?>