一、了解 ajax
1.什么是ajax
- ajax（阿贾克斯）：在不刷新页面的情况下向服务器请求数据。
ajax技术真实网站介绍
2.为什么需要ajax
- a.以前我的写的页面全部都是固定的假数据，其实网页的数据都是从服务器获取的，一旦服务器数据变化，网页上的内容也会发生变化。
- b.虽然可以通过在浏览器地址栏直接输入网址（url）的方式向服务器获取数据，但是我们的网页会刷新。
- c.学会ajax：就可以做到在不刷新网页的情况下向服务器请求数据，让网站数据内容动态变化。
3.ajax的工作流程
- a.创建XMLHttpRequest对象 (俗称小黄人)
- var xhr = new XMLHttpRequest();
- b.设置请求
- xhr.open('get', 'url 地址');
- c.发送请求
- xhr.send();
- d.注册回调函数
- 这个函数不是立即执行的，而是等服务器把数据响应返回才会执行（PS：什么时候执行取决于你的网速快慢）
- xhr.onload = function () {console.log(xhr.responseText);}
二、了解什么是接口文档
- 1.接口：Web服务器提供的，让ajax请求的网络地址称之为接口，简称API。
- 2.接口文档 ：为了方便开发人员使用，我们的后台小伙伴会提供一种专门的文档，称之为接口文档。
- 3.一个标准的接口文档至少要包含以下三种信息（只能多，不能少）。
- a.请求的地址 （url）
- b.请求的方法 （get或者post）
- c.请求的参数
接口文档示例
1.随机获取笑话的接口
请求方法：get
请求参数：无
响应内容：随机笑话
2.demo-英雄外号查询
请求方法：get
请求参数：name
3.用户注册
请求方法：post
请求参数：username
4.用户验证
请求方法：post
请求参数：username
三、请求方法 get 与 post 的区别 （传参方式不同）
-
传参方式不同
- get请求： 参数直接在url后面拼接参数 （安全性不高）
//(1)创建小黄人对象
var xhr = new XMLHttpRequest();
//(2)设置请求方法和路径
xhr.open('get','https://autumnfish.cn/api/joke'); //参数直接在url后面拼接参数 （安全性不高）
//(3)发送请求
xhr.send();
//(4)注册响应事件
xhr.onload = function(){
//3.服务器响应返回显示到页面div
$('.joke-container').text(xhr.responseText);
};
- post请求：
- a.必须要设置请求头(固定格式，强烈建议复制粘贴)
- b.参数需要在send()中拼接 (不要问号,安全性高)
//(1).实例化ajax对象
var xhr = new XMLHttpRequest();
//(2).设置请求方法和地址
xhr.open('post', 'https://autumnfish.cn/api/user/register');
//(3)设置请求头（只有post才需要，固定格式）
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//(4).发送请求
xhr.send('username=' + username); //参数需要在send()中拼接 (不要问号,安全性高)
//(5).注册回调函数
xhr.onload = function() {
console.log(xhr.responseText);
//4.数据响应返回之后显示到info中
$('.info').text(xhr.responseText);
};
四、JSON数据格式解析
1.服务器响应数据格式介绍
a.为了方便数据的保存以及传递，就有了一些通用的数据格式（前端js和后端php、java等都支持的数据格式），常用的曾经有JSON和XML，但是现在基本上都是用JSON，XML已经退出了历史的舞台。
b.JSON格式：JSON格式与JS对象互转 (重点)
JSON > JS : JSON.parse(json数据)
JS > JSON : JSON.stringify(js对象)
