前言

AJAX:全程Asynchronous JavaScript And XML 就是异步JS和XML

（）

又称 阿贾克斯

通过AJAX可以在浏览器中向服务器发送异步请求，最大优点：无刷新获取数据

（）

XML（现在已经被JSON取代了）

XML 可扩展标记语言 用来传输和存储数据

HTML是预定义标签，而XML中没有预定义标签，全是自定义标签用来表示一些数据

AJAX特点：

优点	缺点
1.无需刷新页面与服务器端进行通信 2.允许根据用户事件更新部分页面内容	1.没有浏览历史 2.存在跨域问题 3.SEO不友好

HTTP

HTTP (hypetext transport protocol) 协议 （超文本传输协议），协议详细规定了浏览器和万维网服务器之间相互通信的规则 ——约定，规则

请求报文requese

重点是格式与参数

行      POST / s?ie=utf-8  HTTP/1.1
头      Host: atguigu.com
        Cookio: name=guigu
        Content-type: application/x-www-form-urlencoded
        User-Agent: chrome 83
空行
体      username=admin&password=admin

响应报文response

行      HTTP/1.1  200  OK头      Content-Type: text/html;charset=utf-8        Content-length: 2048        Content-encoding: gzip空行体                                                         

尚硅谷

                   

AJAX基本操作

1.创建对象

const xhr = new XMLHttpRequest();

2.初始化 设置请求方法和url

xhr.open('GET', 'http://127.0.0.1:8000/server'); GET或者POST两种请求方式

3.发送

xhr.send();

4.事件绑定 处理服务端返回的结果

xhr.onreadystatechange = function() {
 //判断
 if (xhr.readyState === 4) {
     if (xhr.status >= 200 && xhr.status  
 
onreadystatechange事件：
 
on when当...时候
 
readystate 是xhr对象中的属性，表示状态 0 1 2 3 4
 
0——未初始化 1——open方法调用完毕 2——send方法调用完毕
 
3——服务端返回了部分结果 4——服务端返回了所有结果
 
change 改变
 
axios
 
btn[2].onclick = function() {
     axios({
         //请求方法
         method: 'POST',
         //url
         url: '/axios-server',
         // url参数
         params:{
             vip:10,
             level:30
         },
         // 头信息
         headers: {
             a:100,
             b:200
         },
         // 请求体参数
         data:{
             username: 'admin',
             password: 'admin'
         }
     }).then(response=>{
         console.log(response);
         //响应状态码
         console.log(response.status);
         //响应状态字符串
         console.log(response.statusText);
         //响应头信息
         console.log(response.headers);
         ///响应体
         console.log(response.data);
     })
}
 
同源策略
 
来自同一个服务
 
JSONP(JSON with Padding)
 
是一个非官方的跨域解决方案
 
 
写在最后：这是在学习尚硅谷b站课程ajax时写的笔记