Ajax是什么：

1、Ajax是一项创建动态网页的技术。

2、Ajax是一种快速实现数据前后端交互的代码。

有哪些特点：

1、可以读取文档内容（本地/远程）

2、异步请求，局部刷新。

3、处理数据的前后端交互、快速开发动态网页。

同源策略：

协议：一种网络通信的约定（规则） 例如:http://或者https:// 

IP:地址，资源所在的地址  例如：183.2.172.42

域名：和IP解析绑定的名称  例如：www.baidu.com

端口：设备与外界的出口

Ajax正常情况下，要在http环境下才能使用，哟啊符合同源策略环境

同源策略：网页地址和服务地址的协议、ip（域名）、端口这三者是一致的就是同源策略

跨域

网页地址和服务地址的协议、ip（域名）、端口 这三者，有一个不相同，就表示跨域

资源跨域共享：

在后台设置代码（CORS）

怎么使用ajax（实现数据前后端交互）

1、原生js实现ajax 

// ajax编程
// 1) 创建异步对象的实例
var xhr = new XMLHttpRequest();
// 2) 发起请求
// xhr.open('请求方式','请求地址','布尔值true')
// xhr.open('get','http://127.0.0.1:5500/AJAX/源代码/api/weather.json',true);
xhr.open('get', './api/weather.json', true);
// 你的工作目录和我的工作目录可能不一样
// 3) 发送请求主体
xhr.send();

// 4) 执行事件 监听请求和响应的状态
xhr.onreadystatechange = function () {
    // 判断请求当前状态
    // console.log(xhr.readyState);
    if (xhr.readyState === 4) {//4： 表示请求完成
        // 响应的状态
        // console.log(xhr.status);
        if(xhr.status === 200) {//200: 表示响应数据成功
            // 数据在这里
            // console.log(xhr.responseText);//json字符串
            // 怎么把json格式字符串转成对象
            var res = JSON.parse(xhr.responseText);
            console.log(res);// 这json对象
            document.querySelector(".city").innerHTML = res.city;
            document.querySelector(".weather").innerHTML = res.data[0].wea;
            document.querySelector(".date").innerHTML = res.data[0].date;
        }
    }
}

2、jQuery提供的方法实现ajax (目前推荐) 

// 接口地址：
// https://apis.netstart.cn/music/search?keywords=征服
// 需求：
    // 点击“搜索”获取输入的关键字 进行歌曲搜索

// 编码：
$(".btn").on("click",function(){
    // 获取输入的关键字
    var value = $(".inp").val();
    // 判断输入框是否为空
    if(value.length == 0) return;

    // 调用ajax
    // 以后在实际的开发中，通常后台需要提供一份接口文档
    // 文档中要有 1.请求地址 2.请求方式 3.提交的参数 4. 是否跨域  5. 响应数据的格式
    $.ajax({
        type: 'get',
        url: 'https://apis.netstart.cn/music/search',
        data: {
            keywords: value
        },
        success: function(res){
            console.log(res);
            // 判断后台响应的数据是否符合格式
            if(res.code == 200) {
                // 取出数组
                var songs = res.result.songs;
                // 字符串拼接
                var str = '';
                for(var i = 0 ; i < songs.length ; i ++){
                    str += `
                        <li>
                            <span>${songs[i].name}</span> # 
                            <span>${songs[i].id}</span>
                        </li>
                    `
                }
                // 渲染数据
                $(".list ul").html(str);
            }
        }
    })
})

3、H5新增 fetch 方法（基于promise） 要注意浏览器的兼容 

// 示例1：GET
fetch(
'https://apis.netstart.cn/music/search?keywords=小跳蛙',
{
    method: 'get',
    // body: JSON.stringify(参数) // post
}
)
// ES6  新特性（promise）
.then(
    function (response) {
        // 调用方法获取响应数据
        return response.json()
    }
)
.then(
    function (res) {
        console.log(res);//请求成功
    }
)
.catch(
    function (err) {
        console.log(err);// 请求失败
    }
)

4、通过axios网络请求库实现ajax （vue,react） 

// 接口地址：https://apis.netstart.cn/music/search
// 请求方式：get
// 响应数据：json格式
// 参数： keywords 关键字


// 示例1：get
axios.get('https://apis.netstart.cn/music/search',{params: {keywords: '征服'}})
.then(
    function(response){
        // 记录后台响应的数据
        var res = response.data;
        console.log(res);
    }
)

// 示例2：post
// axios.post('请求地址',{参数：值})
// .then(function(response){})

请求方式的区别

get 请求方式

1. 接口可以直接在浏览器地址栏调试

2. 参数会拼接在请求地址后面

3. 提交的参数有数量的限制（约20个）

4. 请求速度快，容易暴露参数，有不安全的特点

post 请求方式

1. 不可以直接在浏览器地址栏调试

2. 提交的参数不能拼接在请求地址后

3. 参数不会那么容易暴露，相对安全一些

4. 访问的速度没有get的请求快，但是post方式可以请求大量的数据

搭建后台（Nodejs + express）

1、理解什么是 http 服务

超文本传输协议（Hypertext Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。

它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。

2、GET请求POST请求

后台使用get方法编写的接口，那请求方式就是GET请求方式

后台使用post方法编写的接口，那请求方式就是POST请求方式

3、同源策略和跨域

如果页面地址和接口地址是在同一个服务环境下，那就是同源策略。

如果页面地址和接口地址不是在同一个服务环境下，那就是跨域。

安装环境 (围绕着Nodejs)

安装nvm管理nodejs

安装nodejs为了写后台

使用npm，是为了下载功能模块，依赖包

使用nodemon， 是为了保存直接运行javascript

安装 nvm 软件

下载地址：https://github.com/coreybutler/nvm-windows/releases

windows 系统下：双击 nvm.-setup.exe 默认安装即可（切记安装路径不要有空格或者中文或特殊符号）

显示版本号，说明安装nvm成功！！

nvm install 20.17.0 安装指定版本的nodejs （如果该命令不可行，就直接下载nodejs压缩包解压到指定目录并且修改名称 v20.17.0）

nvm use 20.17.0 使用指定的nodejs版本

nvm list 检查当前环境下有多少个nodejs版本以及正在使用的版本

node -v 检查nodejs版本

npm -v 检查依赖包管理工具版本

npm install 包 表示下载包的意思 (express , vue , react)

npm uninstall 包 表示卸载包的意思

npm install -g nodemon 安装nodemon

nodemon app.js 保存代码直接刷新运行

node app.js 每次修改代码都要停止重新运行

ctrl + C 可以终止项目的运行

.........

nvm 是管理nodejs的工具

npm 是管理包的工具

node 运行js文件

备注：

如果使用nodejs搭建一个后台，我们还可以安装nodemon工具，可以监听nodejs代码的改变（保存代码可以立即执行后台程序）

当我们开发者下载包的速度比较慢或者卡，就可以给npm设置淘宝镜像（这个镜像地址不是固定）

npm config set registry https://registry.npmmirror.com

跨域

设置CORS(资源跨域共享)

同源策略