JS-Ajax

ajax ：异步的JS和XML

什么是异步：执行的方式后面的代码可能不会等待这前面的代码执行完毕后再执行。
常见的异步的实现：1、ajax 2、setTimeOut()
什么是同步：严格按照从上往下，从左往右的执行。

ajax:jQuery封装的：

语法：
$.ajax(配置项);
配置项是一个对象：K-V键值对
jQuery规定了很多的配置的K，值由用于根据需要进行设置
常见的K：
url: 请求的地址【后端接口地址】 必传
data: 客户端发送给服务器的数据 如：做注册的时候 页面上输入完毕用户名和密码—>需要将用户名和密码发送到后端–>将用户名和密码放在data配置项中【JSON ，JS对象】.
如果不需要携带数据则该配置项可以不写，只要需要携带数据的时候才能。【选配】
dataType:期望服务端返回的数据类型 常见的就是JSON 。如果配置的是JSON 服务端返回的也是JSON的数据格式 jQuery会自动的将后端返回来的数据转为JS对象。【选配】
type:请求的方式 常见的get post 。如果不写默认就是get ,如果需要发送post请求必须进行配置
success:请求成功的回调函数【一旦请求成功会回来执行的函数】，请求成功后jQuery帮你调用方法的时候
会给你传递1个参数：后端返回的结果

get(url,data,fn,type) – 发送get请求 默认：type配置项为get

post(url,data,fn,type)-- 发送post请求 默认：type配置项为post

url: 请求地址 必传

data:请求需要携带数据

fn:请求成功的回调

type：期望服务端返回的数据类型

$.get(`http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/${code}_city.json`,function(resp){
    console.log(resp);
},"json");

$.getJSON(`http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/${code}_city.json`,function(resp){
    console.log(resp);
})

原生JS的ajax操作

1、创建XMLHttpRequest的对象

2、调用open() 打开请求

3、onreadystatechange ajax请求发送成功后开始

4、send() 发送请求

<script>
    //获取省份的数据
    function  getProData(){
    //1.创建XMLHttpRequest对象[是ajax请求的核心对象]
    let http = new XMLHttpRequest();
    //2.打开请求
    http.open("get","http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/100000_province.json");
    //3.检测ajax请求的状态 根据不同的状态编码来完成不同的操作
    http.onreadystatechange = function(){  //一旦请求的状态发生变化则就会触发执行这个方法
        console.log(http.status,http.readyState);
        //0  请求未初始化
        //1  服务端已经建立连接
        //2  请求被服务端接收
        //3  请求正在被服务端处理
        //4  请求完成，数据已经响应
        if(http.status==200&&http.readyState==4){
            //请求成功的被响应了--- 服务端将数据成功返回了--做页面的渲染
            console.log(http.responseText);
        }
    }
    //4.发送请求
    http.send();
}
getProData();

嵌套的ajax操作

应用场景：1个需求数据需要多个接口，针对每个接口需要发送一次请求。如果需要多个则需要进行嵌套。一般在某个ajax操作的回调函数中进行嵌套另一个ajax操作

$(function(){
    getMovieData();
})

let onMovie = [];//正在热映的
let commingMovie = [];//即将上映的
//获取电影数据，并根据是否在某一家影城中出现来判断是否已经上映
function getMovieData(){
    //1.发送请求获取所有的电影数据
    $.ajax({
        url:"https://www.fastmock.site/mock/bb4157f45a0b5ffdcb3f6d984517a6c0/woniuMovie/getAllMovies",
        dataType:"json",
        success:function(movie){               
            //resp就是所有的电影数据    
            $.ajax({
                url:"https://www.fastmock.site/mock/bb4157f45a0b5ffdcb3f6d984517a6c0/woniuMovie/getAllOperas",
                dataType:"json",
                success:function(oprea){
                    //判断哪一部上映的逻辑代码 --- 用到影院数据
                    //console.log(movies,opreas);
                    //循环每一部电影，只要该电影的id出现在某一家影院的movies数组中 则说明已经上映
                    //则将该电影放在onMovie  如果所有的影院的movies中都没有这个ID说明是未上映 则将数据放在commingMovie
                    let allMovies = movie.movies;
                    let allOpera = oprea.operas;

                    $.each(allMovies,function(){
                        //this表示一部电影 ，拿着id取分别每家影院比较
                        let id = this.id;//1292213
                        let movie = this;
                        let flag = false; //假设为上映
                        $.each(allOpera,function(){ //循环影院
                            // console.log(this.movies);//这家影院正在上映的电影的编号
                            if(this.movies.indexOf(id)!=-1){ 
                                // onMovie.push(movie);
                                flag = true; //上映了
                            }
                        });

                        if(flag){ //如果为true进if   
                            onMovie.push(movie);
                        }else{
                            commingMovie.push(movie);
                        }
                    });
                    console.log(onMovie,commingMovie);
                }
            })
        }
    })
}

Mock

作用：随机生成数据，拦截ajax请求

应用场景：目前主流开发模式是前后端分离开发，有时候编写前端页面的时候可能后端的接口还没有准备好。这个时候我们可以通过mock.js来根据接口文档模拟出对应的接口。我们调用模拟出来的接口进行开发即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0NYpOWKo-1680326701116)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20221110170516436.png)]

Mock的使用

官方网站：http://mockjs.com/

优点：

• 在项目中引入mock的代码
• 编写mockIndex.js文件在其中根据接口文档进行接口的模拟
• 如果是获取数据【前端不需要传参的】— get请求。如果前端需要传递参数过来则—post请求

模拟请求的语法：
Mock.mock("请求地址","请求方式",请求处理函数--模拟返回数据)
如果想要接受前端的参数 则在函数中写形参而且请求方式必须为post
Mock.mock("/movie/getAllMovie","get",function(){
    
Mock.mock("/movie/getAllMovieById","post",function(rep){
    //根据不同的ID返回不同的影片  ID一般是唯一的
    //console.log(); //req.body放的是前端传过来的数据
    let id = JSON.parse(rep.body).id;    

• 在需要使用的页面中引入mock.js文件和mockIndex.js
• 发送ajax请求，编写逻辑代码