四十九.ajax - 《JavaScript》

1.同步和异步
2.ajax的使用
3.Ajax的封装
4.get和post
5.跨域
6.如何解决跨域
7.两个页面之间如何跳转、传值
10.ajax迭代
11.回调地狱
12.promise
13.async-await

1.同步和异步

       同步：客户端向服务器端发送请求的时候，用户不能进行其他操作<br />           异步：客户端向服务器端发送请求的时候，用户可以进行其他操作<br />           对资源的操作都是异步的

    <p id="app"></p>


        var app=document.getElementById("app")
        var url = "http://192.168.4.18:8000/";
        /* ajax 如何使用ajax向后台获取数据*/
        /*1.创建ajax核心对象*/
        var xhr = new XMLHttpRequest();
        /*2.与服务器建立连接，xhr.open(method,url,async)
        请求的方式，地址，是否异步*/
        xhr.open("get",url,true)
        /*3.发送请求*/
        xhr.send()
        /*4.响应*/
        /*onreadystatechange  监听服务器的响应状态*/
        xhr.onreadystatechange = function(){ 
            /* xhr.status 服务器端响应的状态码 200 */
            /* xhr . readystate 服务器响应的进度 4响应已经完成*/
            if(xhr.readyState == 4 && xhr.status == 200){
                /* JSON. parse()可 以json格式的字符串,转换为json格式的数据*/
                var arr = JSON.parse(xhr.responseText);
                console.log(arr);
                app.innerHTML= arr.name;
            }
         }

2.ajax的使用

    <p id="app">
    </p>

        /* 
        1.什么是异步 何时使用
        2.如何使用原生ajax
         */
        var app = document.getElementById("app")
        var url ="http://192.168.4.18:8000/"
        /* ajax 如何使用ajax向后台获取数据*/
        /* 1. 创建ajax核心对象*/
        var xhr =  new XMLHttpRequest();
        /* 2.与服务器建立连接 xhr.open(method,url,async) 
        请求的方式,地址,是否异步
        */
        xhr.open("get",url,true)
        /* 3.发送请求 */
        xhr.send()
        /* 4.响应 */
        /* onreadystatechange  监听服务器的响应状态*/
        xhr.onreadystatechange = function(){
            /* xhr.status  服务器端响应的状态码  200 */
            /* xhr.readyState 服务器响应的进度  4 响应已经完成 */
            if(xhr.readyState == 4 && xhr.status == 200){
                var txt = xhr.responseText;
                /* JSON.parse()  可以json格式的字符串,转换为json格式的数据 */
                var obj = JSON.parse(txt);
                console.log(obj)
                app.innerHTML =  obj.name
            }
        }

3.Ajax的封装

html文件

        var url = "http://192.168.4.18:8000/"
        ajax({
            url,
            method:"get",
            success:res=>{
                console.log(res)
            }
        })

js文件

function ajax({
    url,
    method,
    success
}) {
    var xhr = new XMLHttpRequest()
    xhr.open(method, url, true)
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var res = JSON.parse(xhr.responseText);
            success(res);
        }
    }
}

4.get和post

get
1.用来请求数据
2.请求放在url地址里面的，对用户是不可见的
3.发送的信息也是有限的
post
1.提交数据
2.发送数据对用户来说是不可见
3.发送数据理论上是没有限制的

5.跨域

4-1 域名

chengbenchao.top   //主域名
www.chengbenchao.top;  
aaa.chengbenchao.top
bbb.chengbenchao.top
//www,aaa 子域名
https://www.chengbenchao.top:8080/a.txt
//https,http协议
//a.txt  请求的资源文件
域：由协议,子域名,主域名,端口,请求的资源文件组成

4-2 跨域

跨域: 协议,子域名,主域名,端口不同时候就叫跨域
同源策略:javascript出于同源策略,不允许从一个域访问另一个域的对象。

 // 协议,子域名,主域名,端口 只要有一个不一样就是跨域
// 以下都跨域了
https://www.baidu.com
http://www.baidu.com    // 协议不一致
https://www.baidu.com
https://aaa.baidu.com   // 子域名不一致
https://www.baidu.com
https://www.baidu.top   // 主域名不一致
https://www.baidu.com:8080
https://www.baidu.com:80  // 端口号不一致
// 未跨域
https://www.baidu.com:8080/a.json
https://www.baidu.com:8080/b.json

6.如何解决跨域

前端跨域
5-1 jsonp跨域

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

/* jquery-ajax  jsonp*/
$.ajax({
  url:"http://192.168.4.18:7000/ad",
  method:"get",
  dataType:"jsonp",
  success:res=>{
    console.log(res)
  }
})

5-2 script标签(了解)

原理: script不受同源策略的限制

var script = document.createElement("script");
script.src = "http://192.168.4.18:7000/ad?&callback=handleResponse";
document.body.prepend(script);
function handleResponse(res) {
  // 对response数据进行操作代码
  console.log(res)
}

服务端跨域

Access-Control-Allow-Origin','*'

koa.js
koa2-cors//中间 
const cors = require("koa2-cors");
app.use(cors({
    origin:"*"
}));
//所有其他的域,都可以访问本域

const koa = require("koa");
const app =  new koa();
app.use(async ctx=>{
    ctx.set('Access-Control-Allow-Origin','*')
    ctx.body = {
        name:"cheng"
    }
})
app.listen(5000)

7.两个页面之间如何跳转、传值

 location.href =" "    // 跳转到另一个页面
 location.search       // 可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）
 decodeURIComponent()    //解码

music.html (跳转)

<input type="text" id="input">
<script>
var input = document.getElementById("input")
input.onkeydown = function(event){
if(event.keyCode == 13){
  console.log(this.value);
  location.href = `search.html?s=${this.value}`  //跳转到另一个页面
}
}
</script>

search.html (传值) ```javascript

搜索

``` #### 8.jquery-ajax 8-1 get ```javascript $.get(url,res=>{ console.log(res) }) $.get(url).then(res=>{ console.log(res) }) ``` 8-2 $.ajax ```javascript $.ajax({ url, type:"get", data, // get传值问号后面的值，可以放在data属性里面 dataType, success:res=>{ console.log(res); } }) ``` ```javascript var url ="http://192.168.4.18:3000/search" $.ajax({ url, type:"get", data:{ keywords:"你" }, success:res=>{ console.log(res); } }) ``` #### 9.axios ``` Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 ``` 9-1 安装 ``` // 使用 npm $ npm install axios // 使用 bower $ bower install axios // 使用 cdn

9-2 get
```javascript
axios.get(url).then(res=>{
  console.log(res);
})

// var url = "http://192.168.4.18:3000/search?keywords=你"
axios.get("http://192.168.4.18:3000/search",{
  params:{
    keywords:"你"
  }
}).then(res=>{
  console.log(res);
})

9-3 axios

axios({
    url,
    baseURL,
    method,
    params:{}  //问号后面的值
}).then(res=>{
    console.log(res)
})

axios({
  url:"/search",
  baseURL:"http://192.168.4.18:3000",
  method:"get",
  params:{
    keywords:"你"
  }
}).then(res=>{
  console.log(res);
})

9-4 axios二次封装

var baseURL="http://192.168.4.18:3000/"
function http({
  url,
  method:"get",
  params:{}
}){
  return axios({
    url,
    baseURL,
    method,
    params
  })
}

http({
  url:"/album?id=96964667",
}).then(res=>{
  console.log(res)
})
http({
  url:"/album",
  params:{
    id:"96964667"
  }
}).then(res=>{
  console.log(res)
})

10.ajax迭代

10-1 原生ajax

var url = "http://192.168.4.18:8000/"
var xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.send();
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var result  = JSON.parse(xhr.responseText);
    console.log(result)
  }
}

10-2 回调函数去封装ajax

//  需要记住传参的顺序
function ajax(url,method="get",success) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.send();
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var result = JSON.parse(xhr.responseText);
      success(result)
    }
  }
}

function ajax({
  url,
  method="get",
  success
}) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.send();
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var result = JSON.parse(xhr.responseText);
      success(result)
    }
  }
}

10-3 jquery-ajax

$.ajax({
  url:"http://192.168.4.18:8000/",
  type:"get",
  dataType:"json",
  success:res=>{
    console.log(res)
  }
})

10-4 callback封装jquery-ajax

function http({url,type="get",success}){
  $.ajax({
    url,
    type,
    dataType:"json",
    success:res=>{
      success(rs)
    }
  })
}

10-5 promise封装ajax
将纵向嵌套的ajax,变成横向的了,结构稍微清晰了一点。

function http(url){
  return new Promise((resolve,reject)=>{
    $.ajax({
      url,
      type:"get",
      success:res=>{
        resolve(res)
      },
      error:err=>{
        reject(err);
      }
    })
  })
}

11.回调地狱

<div id="app"></div>
<h2>列表数据</h2>
<p class="dp"></p>
<audio src="" controls></audio>
    <script>
        /* 1.华语中的第一条数据 */
        var url = 'http://192.168.4.18:3000/top/playlist/?cat=华语'
        $.ajax({
            url,
            success:res=>{
                var {name,id} = res.playlists[0]
                $("#app").html(name)
                /* 2.列表页数据 */
                var listUrl = `http://192.168.4.18:3000/playlist/detail?id=${id}`
                $.ajax({
                    url:listUrl,
                    success:res=>{
                        var {name,id} = res.playlist.tracks[0]
                        $(".dp").html(name)
                        /* 3.根据id获取音乐播放器的url连接 */
                        var musicUrl = `http://192.168.4.18:3000/song/url?id=${id}`
                        $.ajax({
                            url:musicUrl,
                            success:res=>{
                                let src = res.data[0].url
                                $("audio").attr("src",src)
                            }
                        })
                    }
                })
            }
        })
    </script>

12.promise

Promise是一种异步操作的解决方案，将写法复杂的传统的回调函数和监听事件的异步操作，用同步代码的形式表达出来。
避免了多级异步操作的回调函数嵌套。
promise本质：为了解决回调地狱问题

<!--  promise 会将函数的状态暂停(凝聚，冻结)
      resolve  -- 处理成功的情况
      reject -- 处理失败的情况
      promise不会直接触发,它会通过(then,catch)才会触发
  -->
  <!-- 
    1.触发promise的resolve状态,可以then函数去触发
    2.触发reject状态,通过catch函数去触发
  -->
    <script>
        var p = new Promise((resolve,reject)=>{
            //resolve(1)
            reject(2)
        })
        p.then(res=>{
            console.log(res);
        }).catch(err=>{
            console.log(err);
        })
    </script>

promise-ajax

function http() {
    return new Promise((resolve,reject)=>{
        $.ajax({
            url:"http://192.168.4.18:3000/top/playlist/?cat=华语",
            type:"get",
            success:res=>{
                resolve(res)
            },
            error:err=>{
                reject(err)
            }
        })
    })
}
<script>
      http("top/playlist/?cat=华语").then(res=>{
      let id = res.playlists[0].id
      return id
    }).then(res=>{
      let id = res
      http(`playlist/detail?id=${id}`).then(res=>{
        var {name,id} = res.playlist.tracks[0]
        console.log(id);
      })
    })
</script>

13.async-await

/* async await */
/* 
  promise函数执行
  1、then
  2、在async函数中，通过await语句去执行
*/
在函数前面加上async
  1.这个函数的返回值就是promise
  2.可以在函数中使用await关键字

var a = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve(1)
  },2000)
})
var b = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve(2)
  },1000)
})
async function go(){
  var res = await a;
  console.log(res);
  var sum = await b;
  console.log(sum);
}
go()