Ajax 基础

Ajax - day 01
A . ajax 的 作用 和 特点是什么 ?
作用 : 在前端网页发送的请求获取后台服务器的数据.
特点 : 异步请求(不会刷新页面), 局部刷新.

B. Ajax 的应用场景
a. 页面上拉加载更多的数据
b. 列表数据无刷新分页
c. 表单项离开焦点数据验证
d. 搜索框提示文字下拉列表

C. Ajax到底有什么用?
a. 可以让前端向后端发送请求
b . 一个异步请求 , 一个局部刷新

D. 设置请求头
a,. get请求是不需要设置的
b. post请求必须要设置请求用来规定参数参数的格式

E. 发送请求
a. get: xhr.send() // 发送get请求
b. post: xhr.send(“username=rose”)///发送post请求,必须在send方法中写入参数
c. post: xhr.send(JSON.stringify( { username:“lily”} ))// 发送post请求, 必须在send方法中写入参数

F. 等待服务器返回的结果 , 得到服务器返回的结果
a. xhr.onload = function(){ xhr.resonseText }
b. xhr.onerroe = function(){ }

G. Ajax异步编程
同步和异步有啥区别呢 ?
a . 同步表是像阿甘那样的人 , 一根筋的往前冲 , 这个人只能做一件事情 , 做完之后才会去做下一件.
b. 异步表示斜杠青年 , 一次可以同时做多次事情 , 不会等到下一个事情吧

小结 :
get请求如果发生参数 , 必须将参数拼接到地址后 , 代码如下
xhr.open(“get”,"http://localhost:3000/asdf! age = 21)
post 请求的参数 , 是将参数通过send方法进行发送 .
xhr.send(“age=20”)

Ajax 封装
问题：发送一次请求代码过多，发送多次请求代码冗余且重复
解决方案：将请求代码封装到函数中，发请求时调用函数即可
ajax({
type: ‘get’,
url: ‘http://www.example.com’,
success: function (data) { console.log(data);
} })