js笔记:AJAX请求(原生、jQuery)

---

前言

1 ajax:一个异步的请求方式,客户端向服务器发送请求的技术(一般网络请求受到网络的影响,导致有的请求不到数据,但是不能让用户等待,所以需要对请求实现异步)
2 优势:可以实现局部刷新,在不对整个页面刷新的前提下,实现局部刷新
扩展:
异步:如定时器,AJAX请求 异步是一个过程,不用让用户等待
同步:for循环 必须等到for结束之后才会往下执行
进程:打开一个应用程序,即创建一个进程
线程:一个进程可以包含多个线程:主线程和分线程

---

一、AJAX请求

1.原生的AJAX请求

创建步骤如下:

// 1创建一个XMLHttpRequest请求对象
var xhr = new XMLHttpRequest()
// 2 打开连接 参数1是请求方式，不区分大小写get/post
// 参数2是请求路径
xhr.open("GET","https://autumnfish.cn/artist/list?type=1&area=96&initial=b")
//扩展:url的组成：协议名+ip地址+端口号+路径+请求参数+哈希值
// 网易云音乐的服务器地址：https://autumnfish.cn/
// 协议名:http
// 端口号:autumnfish.cn
// 路径：/artist/list(请求歌手分类)
// 请求参数：?type=1&area=96&initial=b 
// 3开始请求 也可以传参数，请求参数
xhr.send()
// 4 获取数据
// onreadystatechange 当请求状态发生改变时候触发
xhr.onreadystatechange = function(){
        // xhr.readyState===4 表示数据已经传过来了，客户端可以使用了
        // xhr.status===200 请求状态200，请求成功了
        if(xhr.readyState===4&&xhr.status===200){
        // 500：以5开头状态一般都是服务器错误，
        // 以4开头的状态一般是客户端的问题 请求路径 IP地址 请求参数
        // 以200开头的一般都是成功的状态
        // 了解常见的网络状态
        // request 请求   req
        // response 响应  res
        // 数据以字符串的形式发返回
        console.log(xhr.responseText)

        // 数据是任意类型
        console.log(xhr.response)
        
        // 当前请求资源的路径
        console.log(xhr.responseURL)

        // 返回的是xml格式的数据
        console.log(xhr.responseXML)
        }

主要请求类型(请求方式)有哪些?

请求方式	作用
GET请求	主要用来查询数据
POST请求	主要用来提交数据
PUT请求	主要用来修改数据
DELETE请求	主要用来查询数据

POST与GET:

GET:
1 把请求参数直接追加在url之后
2 get请求相对来说不安全
3 get请求是有缓存的,速度快
4 每次传递数据有限

POST:
1 请求参数在请求体里面
2 相对来说安全
3 post没有缓存
4 post传递的数据量没有限制

二、AJAX的封装

1.原生AJAX的封装

代码如下（示例）：请求网易云音乐歌手

//https://autumnfish.cn/artist/list?type=1&area=7&initial=z&limit=5&offset=0
        //type:-1:全部
            // 1 男歌手
            // 2 女歌手
            // 3 乐队
        // area=7 华语
        // initial=z 以z开头的歌手
        // limit=5 请求多少条数据
        // offset=0 从第几条开始给数据
        //callback 传递一个函数,目的是把请求出来的数据通过回调函数传递到外面
        function getArtilist(type,area,inital,limit,offset,callback){
            var xhr=new XMLHttpRequest()
            var url=`https://autumnfish.cn/artist/list?type=${type}&area=${area}&initial=${inital}&limit=${limit}&offset=${offset}`
            xhr.open("GET",url)
            xhr.send()
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4&&xhr.status===200){
                    // console.log(xhr.responseText)
                    //传递一个实参
                    //函数调用了传递实参xhr.responseText
                    callback(xhr.responseText)
                }
            }
        }
        getArtilist(-1,7,"x",100,0,function(res){
            var obj=JSON.parse(res)
            // console.log(obj.artists)
            obj.artists.forEach(function(v){
                if(v.name=="肖战"){
                    console.log(v)
                }
            })

        })

2.jQuery封装的AJAX请求

代码如下（示例）：

 $.ajax({
            url:'https://autumnfish.cn/comment/music?id=1885421530&limit=10',
            data:{},
            //如果是post请求 data需要添加请求数据,如果是get不需要请求数据
            //请求类型
            type:'GET',
            success:function(res){
                // 成功获取数据的回调
                console.log(res.code)
            },
            //失败的回调
            error:function(err){
                console.log(err);
            }
            //设置请求内容的编码
        })
/*
   -ajax请求的简写方式
*/
//简写1: url参数,回调参数
$.get('https://autumnfish.cn/comment/music?id=1845435128&limit=10',function(res){
                console.log(res)
})
//简写2:get可以接收任何的返回数据
$.get({
       url:"https://autumnfish.cn/search?keywords=花火",
       success:function(res){
            console.log(res)
       }
 })
 //简写3:getJSON 获取json个数的数据
 $.getJSON({
       url:"https://autumnfish.cn/search?keywords=花火",
       success:function(res){
            console.log(res)
       }
 })

---