JavaScript的Ajax

概述:

 Ajax是实现浏览器与服务器的交互技术(可以访问服务器的局部刷新技术)

核心对象:

 核心对象 :XMLHttpRequest (xhr)  //异步请求

//AjAX是异步的JavaScript和xml  他用于发送http请求,他可以发送异步请求

            //他可以完成页面打的局部刷新功能(在整个页面不刷新前提下 发送对应的请求对应的部分dom)

Ajax关键词:

                进程 (正在运行的程序)

                线程 (线程是进程的最小单位JavaScript是单线程(单线程解析渲染也是单线程))

                同步 (一个线程执行 (同步阻塞))

                异步 (多个线程执行

Ajax的代码实现:

新建请求对象

                    var xhr =new XMLHttpRequest()

                以对应的请求方式来打开对应的请求地址

                    xhr.open('get','https://autumnfish.cn/playlist/hot')

                发送请求

                    xhr.send()

                监听请求状态的变化  

                    //readyState(1-5 1是准备发送 2发送完成 3发送完成数据接收 4数据接收完毕 5是错误)

                    xhr.onreadystatechange=()=>{

                        //进行判断状态 4是数据接收完毕

                        if (xhr.readyState==4) {

                            //responseText 表示返回的文本(字符串类型)

                            console.log(xhr.responseText);

                        }

                    }

xhr的相关属性和方法:

属性:

//readyState 状态码

            //status http   状态码

            //timeout   超时时间

            //responseText  响应文本

 

方法:

//open 打开一个请求

            //send 发送请求

            //setRequestHeader  设置请求头

            //getResponseHeader   获取响应头

 

事件:

//onreadystatechange  监听状态的改变

 Ajax解决跨域问题:

使用webpack模块的server proxy 服务器代理

1. 后端服务器添加 Access-control-allow-origin:*
2. jsonp 非官方的解决跨域的方法,是get请求,适合做查询,利用带src属性的script,利用回调函数获取数据

export let JSONP = (url, options) => {

    options = Object.assign({}, options)
    //随机生成函数名称
    let fnName = 'zmy_' + parseInt(Math.random() * 1000)
    //挂载到window对象
    window[fnName] = options.success
    //拼接url
    let newUrl = url + '?' + getParams(options.data) +'&'+ options.jsonp + '=' + fnName
    //动态创建script
    let oScript = document.createElement("script")
    //添加到页面中
    //防止在页面头部使用
    window.addEventListener("DOMContentLoaded", () => {
        document.body.appendChild(oScript)
    })
    //确认页面加载完成后才能添加使用
    if (document.body) {
        document.body.appendChild(oScript)
    }
    //动态标签上添加属性
    oScript.setAttribute("src", newUrl)
    //凡是带有src属性的标签都有onload事件
    oScript.onload = function () {
        this.remove()
    }
}