Ajax
# 同步和异步的简单理解
同步:必须等待前面的任务完成,才能继续后面的任务。
异步:不受当前任务的影响。
拿排队举例:
同步:在银行排队时,只有等到你了,才能够去处理业务。
异步:在排队的时候,可以玩手机。
# 异步更新网站
我们在访问一个普通的网站时,当浏览器加载完HTML、CSS、JS
以后,网站的内容就固定了。如果想让网站内容发生更改,就必须刷新页面才能够看到更新的内容。
可如果用到异步更新,情况就大为改观了。比如,我们在访问新浪微博时,看到一大半了,点击底部的加载更多,会自动帮我们加载更多的微博,同时页面并不会整体刷新。
试想一下,如果没有异步刷新的话,每次点击“加载更多”,网页都要重新刷新,体验就太糟糕了。
web 前端里的异步更新,就要用到 Ajax。很多人说,如果没有 Ajax,就没有互联网的今天。
# Ajax
# Ajax 的概念
在浏览器中,我们可以在不刷新页面的情况下,通过 Ajax 的方式去获取一些新的内容。
Ajax:Asynchronous Javascript And XML(异步 JavaScript 和 XML)。它并不是凭空出现的新技术,而是对于现有技术的结合。Ajax 的核心是 js 对象:XMLHttpRequest。
# Ajax 原理(发送 Ajax 请求的五个步骤)
其实也就是 使用 XMLHttpRequest 对象的五个步骤。
我们先回忆一下,一个完整的 HTTP 请求需要的是:
请求的网址、请求方法 get/post。
提交请求的内容数据、请求主体等。
接收响应回来的内容。
发送 Ajax 请求的五个步骤:
(1)创建异步对象,即 XMLHttpRequest 对象。
(2)使用 open 方法设置请求参数。open(method, url, async)
。参数解释:请求的方法、请求的 url、是否异步。第三个参数如果不写,则默认为 true。
(3)发送请求:send()
。
(4)注册事件:注册 onreadystatechange 事件,状态改变时就会调用。
如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
(5)服务端响应,获取返回的数据。
# XMLHttpRequest 对象详解
我们在上一段讲解了使用 XMLHttpRequest 对象的五个步骤。本段,我们讲一下注意事项。
# 发送请求
发送请求的方法:
open(method, url, async);
参数解释:
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
另外还有个方法:(仅用于 POST 请求)
send(string);
# POST 请求时注意
如果想让 像 form 表单提交数据那样使用 POST 请求,就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据:
xmlhttp.open('POST', 'ajax_test.php', true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send('name=smyhvae&age=27');
# onreadystatechange 事件
注册 onreadystatechange 事件后,每当 readyState 属性改变时,就会调用 onreadystatechange 函数。
readyState:(存有 XMLHttpRequest 的状态。从 0 到 4 发生变化)
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status:
200: "OK"。
404: 未找到页面。
在 onreadystatechange 事件中,当 readyState 等于 4,且状态码为 200 时,表示响应已就绪。
# 服务器响应的内容
responseText:获得字符串形式的响应数据。
responseXML:获得 XML 形式的响应数据。
如果响应的是普通字符串,就使用 responseText;如果响应的是 XML,使用 responseXML。
# 手写 Ajax
# 手写第一个 Ajax 请求
get 请求:
//【发送ajax请求需要五步】
//(1)创建XMLHttpRequest对象
var xmlhttp = new XMLHttpRequest();
//(2)设置请求的参数。包括:请求的方法、请求的url。
xmlhttp.open('get', '02-ajax.php');
//(3)发送请求
xmlhttp.send();
//(4)注册事件。 onreadystatechange事件,状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
xmlhttp.onreadystatechange = function () {
// 为了保证 数据 完整返回,我们一般会判断 两个值
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//(5)服务端相应:如果能够进入这个判断,说明数据请求成功了
console.log('数据返回成功:' + JSON.stringify(xmlhttp.responseText));
// 伪代码:按业务需要,将接口返回的内容显示在页面上
// document.querySelector('h1').innerHTML = xmlhttp.responseText;
}
};
post 请求:
//(1)异步对象
var xmlhttp = new XMLHttpRequest();
//(2)设置请求参数。包括:请求的方法、请求的url。
xmlhttp.open('post', '02.post.php');
// 如果想要使用post提交数据,必须添加此行
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//(3)发送请求
xmlhttp.send('name=fox&age=18');
//(4)注册事件
xmlhttp.onreadystatechange = function () {
//(5)服务端相应
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
};
# 封装 Ajax 请求(重要)
上面的代码,执行顺序很好理解,但在实战开发中,是不会这么写的。假如你的页面中,需要调十次接口,那岂不是要手写十遍 Ajax 请求?这样会导致大量的重复代码。
所以,我们需要把重复代码封装成一个公共函数,然后通过回调函数处理成功和失败的逻辑。
封装 Ajax 请求的代码如下:(get 请求为例)
// 封装 Ajax为公共函数:传入回调函数 success 和 fail
function myAjax(url, success, fail) {
// 1、创建XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
// 兼容IE5、IE6浏览器。不写也没关系
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
// 2、发送请求
xmlhttp.open('GET', url, true);
xmlhttp.send();
// 3、服务端响应
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
var obj = JSON.parse(xmlhttp.responseText);
console.log('数据返回成功:' + obj);
success && success(xmlhttp.responseText);
} else {
// 这里的 && 符号,意思是:如果传了 fail 参数,就调用后面的 fail();如果没传 fail 参数,就不调用后面的内容。因为 fail 参数不一定会传。
fail && fail(new Error('接口请求失败'));
}
};
}
// 单次调用 ajax
myAjax('a.json', (res) => {
console.log(res);
});
// 多次调用 ajax。接口请求顺序:a --> b --> c
myAjax('a.json', (res) => {
console.log(res);
myAjax('b.json', (res) => {
console.log(res);
myAjax('c.json', (res) => {
console.log(res);
});
});
});
学会了封装 get 请求之后,封装 post请求也是类似的写法。
# Ajax 请求:get 请求举例
(1)index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送get_ajax请求" id="btnAjax" />
<script type="text/javascript">
// 绑定点击事件
document.querySelector('#btnAjax').onclick = function () {
// 这里直接使用上面封装的 myAjax() 方法即可
myAjax('02-ajax.php', (res) => {
console.log(res);
console.log('数据返回成功');
// 显示在页面上
document.querySelector('h1').innerHTML = res;
// alert(xhr.responseText);
});
};
</script>
</body>
</html>
(2)02-ajax.php:
<?php
echo 'smyhvae';
?>
效果如下:
# Ajax 多个接口的嵌套请求
我们在做异步任务的时候,经常会涉及到多个接口的嵌套请求。比如说,接口 1 请求完成后,需要根据接口 1 的数据请求接口 2;接口 2 请求完成后,需要根据接口 3 的数据请求接口 3,以此类推。
需求描述:
请求接口 1,根据用户名获取用户 id
请求接口 2,根据用户 id 获取用户的年龄、性别等信息。
代码实现思路:
myAjax('http://localhost:8888/php/user.php?name=千古', (userInfo) => {
// 根据第一个接口返回的 userInfo.id,继续请求第二个接口
myAjax(`http://localhost:8888/php/info.php?id=${userInfo['id']}`, (res) => {
console.log(response);
});
});
我们在实战开发中,经常会涉及到接口请求之间的依赖:需要上一个接口请求返回的数据,来发送本次请求。这种场景经常遇到,需要记住。
但这种层层嵌套的代码,会导致回调地域的问题,也不利于维护。我们在后续的 ES6 章节中,会讲解 Promise,它是一种更优雅的异步任务解决方案。
# jQuery 中的 Ajax
JQuery 作为最受欢迎的 js 框架之一,常见的 Ajax 已经帮助我们封装好了,只需要调用即可。更为详细的 api 文档可以查阅:w3cSchool_JQueryAjax (opens new window)
格式举例:
$.ajax({
url: 'https://xxx.com/getUserInfo.php', // 接口的请求地址
data: 'name=fox&age=18', // 请求参数
type: 'GET', //请求的方式
success: function (argument) {
// 接口请求成功时调用
console.log('接口请求成功');
},
beforeSend: function (argument) {}, // 在发送请求之前调用,可以做一些验证之类的处理
error: function (argument) {
// 接口请求失败时调用
console.log('接口请求失败');
},
});
代码举例:
(1)index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jquery-ajax</title>
</head>
<body>
<input type="button" value="点击" id="btn" />
<div id="showInfo"></div>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$.ajax({
url: 'https://xxx.com/getUserInfo.php', // 接口的请求地址
dataType: 'text',
data: 'name=fox&age=18', // 请求参数
type: 'get',
success: function (data) {
console.log('接口请求成功');
alert(data);
// $("#showInfo").html(data);
},
error: function (err) {
console.log('接口请求失败:' + err);
},
});
});
});
</script>
</body>
</html>
# Ajax 传输 JSON
# JSON 的语法
JSON(JavaScript Object Notation):是 ECMAScript 的子集。作用是进行数据的交换。语法更为简洁,网络传输、机器解析都更为迅速。
语法规则:
数据在键值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
数据类型:
数字(整数或浮点数)
字符串(在双引号中)
逻辑值(true 或 false)
数组(在方括号中)
对象(在花括号中)
null
示例:
// 对象
{
"name":"fox",
"age":"18",
"sex":"true",
"car":null
}
// 数组
[
{
"name":"小小胡",
"age":"1"
},
{
"name":"小二胡",
"age":"2"
}
]
# JavaScript 中:json 字符串 <--> js 对象
基本上,所有的语言都有将 json 字符串转化为该语言对象的语法。
比如在 js 中:
- JSON.parse():将 JSON 字符串转化为 js 对象。例如:
// 将 JSON 字符串格式化为 js 对象
var jsObj = JSON.parse(ajax.responseText);
- JSON.stringify():将 JS 对象转化为 JSON 字符串。例如:
var Obj = {
name: 'fox',
age: 18,
skill: '撩妹',
};
console.log(Obj);
// 将 js 对象格式化为 JSON 字符串
var jsonStr = JSON.stringify(Obj);
# PHP 中:json 字符串 <--> js 对象
**json_decode()**方法:将
json
字符串转化为变量。**json_encode()**方法:将变量转化为
json
字符串。
代码举例:
<?php
header("Content-Type:text/html;charset=utf-8");
// json字符串
$jsonStr = '{"name":"itcast","age":54,"skill":"歌神"}';
// 字符串转化为 php对象
print_r(json_decode($jsonStr));
echo "<br>";
// php数组
$arrayName = array('name' =>'littleFox' ,'age' => 13 );
// php对象 转化为 json字符串
print_r(json_encode($arrayName));
?>
输出结果:
stdClass Object ( [name] => itcast [age] => 54 [skill] => 歌神 )
{"name":"littleFox","age":13}
# ajax 请求解析 json(举例)
(1)Person.json:
{
"name": "小强",
"skill": "砍树",
"friend": "老板"
}
(2)myJson.php:
<?php
// 读取json文件 并返回即可
echo file_get_contents('info/Person.json');
?>
(3)getJson.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<h1>获取 json 数据</h1>
<input type="button" value="获取json" id="btnJson" />
</body>
</html>
<script type="text/javascript">
// 获取的是一个 如果要获取多个
// document.querySelectorAll(selector)
document.querySelector('#btnJson').onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('get', 'myJson.php');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
// json 字符串 是字符串 所以我们可以 通过 responseText获取
console.log(ajax.responseText);
// 转化为 js对象
var jsObj = JSON.parse(ajax.responseText);
console.log(jsObj);
// 拼接ul s
var str = '';
str += '<ul>';
str += '<li>' + jsObj.name + '</li>';
str += '<li>' + jsObj.skill + '</li>';
str += '<li>' + jsObj.friend + '</li>';
str += '</ul>';
// 设置到界面上
document.body.innerHTML = str;
}
};
};
</script>
演示效果:
# Ajax 传输 XML
# XML 语法
XML(Extensible Markup Language):可扩展标记语言。详细语法可以查看:# (opens new window)。
1、XML 声明:
<?xml version="1.0" encoding="UTF-8"?>
第一行的声明,指定了 XML 版本(1.0)以及使用的编码。
2、自定义标签:
XML 中没有默认的标签,所有的标签都是我们自己已定义的。例如:
<fox></fox>
<name></name>
XML 中没有单标签,都是双标签。
3、根节点:
XML 中必须要有一个根节点,所有的子节点都放置在根节点下。例如:
<root1>
<name></name>
</root1>
# XML 解析
因为 XML 就是标签,所以我们可以直接用解析 Dom 元素的方法解析 XML。
解析过程:
(1)html 部分:(包含 xml )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<person id="personXML">
<name>fox</name>
<age>18</age>
<skill>小花花</skill>
</person>
</body>
</html>
(2)解析 xml:
<script type="text/javascript">
var xmlObj = document.getElementById('personXML');
var name = xmlObj.getElementsByTagName('name')[0].innerHTML;
console.log(name);
</script>
# ajax 请求解析 xml(举例)
(1)get_xml.php:(里面包含了 xml 文件)
<?php
// 设置 返回的为 xml
header('content-type:text/xml; charset= utf-8');
// 读取xml文件 并返回
echo file_get_contents('info/star.xml');
?>
上方代码解释:
php 自带了 读取 xml 文件的方法。
在 php 中,如果要使用 xml 传输数据,则需要使用 header()设置返回的内容为 xml。
(2)get_xml.html:(Ajax 请求,获取并解析 xml)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<input type="button" value="获取XMl数据" id="getXML" />
</body>
</html>
<script type="text/javascript">
document.querySelector('#getXML').onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('get', 'get_XMl.php');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
// 如果 返回的是 xml文件
console.log(ajax.responseText);
// 异步 对象中 有另外一个属性 用来专门获取 xml
// xml对象 在浏览器段 就是一个 document对象
// 解析时 可以直接使用 querySelector 或者 getElementById等等 document对象 有的语法
console.log(ajax.responseXML);
console.log(ajax.responseXML.querySelector('kuzi').innerHTML);
// 下面这个 页面文档对象 如果要获取某个标签
console.log(window.document);
}
};
};
</script>
# Axios
ajax是基于XMLHttpRequest实现无刷新更新页面的方法。之前的ajax是jquery对这种刷新方法的封装,可以通过简单的配置实现局部刷新页面。 而axios则是使用了最新es6的promise方法,可以更方便实现异步操作。
axios是一个基于Promise的HTTP库,而ajax是对原生XHR的封装;ajax技术实现了局部数据的刷新,而axios实现了对ajax的封装.