JavaScript--AJXS

作者: 蒜泥捣莓 | 来源:发表于2022-08-22 19:11 被阅读0次

协议（基于tcp/ip）

超文本传输协议（HyperText Transfer Protocol，HTTP）是用于从WWW服务器传输超文本到本地浏览器的传输协议（transport）。它可以使浏览器更加高效，使网络传输减少。

请求的类型

同步请求（上一个请求没完成不能进行其他操作）

<a href="http://www.baidu.com">去百度</a>
<a href="http://www.wobo.com">去微博</a>

异步请求（上一个请求没完成和下一个操作没有关系）

setIterval(()=>{
    console.log('123')
},10)
button.onclick = function(){
    setTimeout(()=>{
        console.log('按钮1被点击了')
    },1000)
}
div.onclick = function(){
    console.log('div被点击了')
}

线程和进程

线程是进程一个组成（最小计量单位）（多个影片下载每个都是一个单独的线程）

进程进行程序叫做进程（打开爱奇艺产生一个爱奇艺的进程）

ajax概述

ajax （全称 Asynchronous Javascript And Xml ）译为异步的js和xml。它是用来异步请求数据的（基于http）。它可以实现局部的加载变化。js来进行请求的携带的数据类型和返回的数据类型为xml形式（早期）。

ajax主要依赖的是一个请求对象核心对象 xmlHttpRequest

注意：使用XMLHttpRequest时，必须把文件放到Web服务器上。因为AJAX只能向同源网址（协议、域名、端口都相同）发出HTTP请求，如果发出跨源请求，就会报错

ajax的访问流程

创建请求对象（XMLHttpRequest）
打开指定的请求地址指定对应的请求方式 (open)
带参数设置请求头
开始请求 (send)
监听对应的请求状态的变化
在监听中读取对应的响应数据并进行处理

为了在响应准备就绪时得到通知，我们必须监听XMLHttpRequest对象上的 readystatechange 事件。每当发生状态变化的时候，readyState属性的值就会发生改变。这个值每一次变化，都会触readyStateChange事件。

代码实现

//创建请求对象
var xhr = new XMLHttpRequest()
//调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。
xhr.open('get', 'http://jsonplaceholder.typicode.com/todos')
//发送请求
xhr.send()
xhr.onreadystatechange = function () {
    //5个变化 0 1  2 3 4 状态码 http的状态 100-599（1开头 表示成功但是需要下一步操作 2开头表示成功 3开头表示重定向 4开头表示客户端错误  5开头表示服务器错误）
    if (xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)) {
        //读取数据 responseText 返回给你是字符串 responseXML 返回给你的是xml
        console.log(xhr.responseText)
    }
}

readyState

readyState 是一个整数，它指定了HTTP请求的状态。它可能的值如下：

0，对应常量UNSENT，表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。
1，对应常量OPENED，表示open()已调用，但send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP 请求的头信息。
2，对应常量HEADERS_RECEIVED，表示send()方法已经执行，并且头信息和状态码已经收到。
3，对应常量LOADING，表示正在接收服务器传来的主体（body）部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。
4，对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了。

在IE8之前并没有定义这些值，但使用硬编码值4来表示XMLHttpRequest.DONE。

status

status属性为只读属性，表示本次请求所得到的HTTP状态码，它是一个整数。

200, OK，访问正常
301, Moved Permanently，永久移动
302, Move temporarily，暂时移动
304, Not Modified，未修改
307, Temporary Redirect，暂时重定向
401, Unauthorized，未授权
403, Forbidden，禁止访问
404, Not Found，未发现指定网址
500, Internal Server Error，服务器发生错误

XMLHttpRequest存在兼容问题

var xhr = XMLHttpRequest ? new XMLHttpRequest() :new ActiveXObject("Microsoft.XMLHTTP")

http请求方式

get 请求（默认请求方式）

它是以?拼接进行传参

它的请求地址以及参数会暴露在地址（不安全）

get请求的数据不能超过2kb

get请求是有历史记录的（缓存的）可以后退的

post 请求（必须请求方式为post 默认传参是表单传参）

post请求的参数在请求体中被传递

post请求相对于get请求来说不会暴露在地址栏（安全较高）

post请求携带的数据要大于get请求

post请求没有历史记录（不能后退）

resetful 风格的接口（后台接口的风格）

返回的数据以json格式传递以请求方式来说区分对应的后端处理业务

get请求获取操作 post请求添加操作 delete 删除操作 put 修改操作（修改多个） patch 修饰（修改一个）

使用get请求对应的数据并渲染

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul></ul>
    <script>
        var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP")
        //ajax在请求的时候 如果是get请求你需要带参数 直接在地址后面将对应的参数拼接 ?key=value&key1=value1
        xhr.open('get', 'http://jsonplaceholder.typicode.com/todos?id=1')
        xhr.send()
        //通过回调函数来解决异步问题
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)) {
                let result = JSON.parse(xhr.responseText)
                let ul = document.querySelector('ul')
                //进行渲染
                result.forEach((item) => {
                    ul.innerHTML += `<li>
                        ${item.title}
                        ${item.completed ? '💘': '💔'}
                        </li>`
                })
            }
        }
    </script>
</body>

</html>

get请求封装

//封装get请求 请求地址  请求的参数  回调函数
static get(url,param={},callback){
    if(!url){
        throw new Error('url地址必须要填入')
    }
    //参数解析 ?key=value&key1=value1
    // 遍历param对象
    for(let key in param){
        //url里面如果存在?
        if(url.includes('?')){
            url += `&${key}=${param[key]}`
        }else{
            url += `?${key}=${param[key]}`
        }
    }
    let xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP")
    xhr.open('get',url)
    xhr.send()
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){
            let response = JSON.parse(xhr.responseText)
            if(callback instanceof Function){
                callback(response)
            }
        }
    }
}

post示例

var xhr = new XMLHttpRequest()
xhr.open('post','https://jsonplaceholder.typicode.com/posts')
//注意：使用POST请求时，如果不设置Content-Type头部信息，那么发送给服务器的数据就不会出现在 $_POST 中。
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
xhr.send()
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){
        console.log(xhr.responseText)
    }
}

登录注册案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <button>注册</button>
    <button>登录</button>
    <script>
        //获取对应的输入框的内容 获取按钮
        var inputs = document.querySelectorAll('input')
        var btns = document.querySelectorAll('button')
        //通过ajax去请求
        //注册
        btns[0].onclick = function(){
            var xhr = new XMLHttpRequest()
            xhr.open('post','http://useker.cn/reg')
            //指定对应的请求头
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
            xhr.send(`uname=${inputs[0].value}&upwd=${inputs[1].value}&uage=${inputs[2].value}
            &uphone=${inputs[3].value}&realname=${inputs[4].value}
            `)
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){
                    console.log(xhr.responseText);
                    alert(JSON.parse(xhr.responseText).msg)
                }
            }
        }
        //通过ajax去请求
        //登录
        btns[1].onclick = function(){
            var xhr = new XMLHttpRequest()
            xhr.open('post','http://useker.cn/login')
            //指定对应的请求头
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
            xhr.send(`uname=${inputs[0].value}&upwd=${inputs[1].value}`)
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){
                    console.log(xhr.responseText);
                    alert(JSON.parse(xhr.responseText).msg)
                }
            }
        }
    </script>
</body>

</html>

get请求和post请求在xhr请求的区别

get请求是使用?拼接url传参的

xhr.open('get',url+'?key=value&key1=value1')

post通过send发送请求体的方式

xhr.send('key=value&key1=value1')

get请求不需要指定对应的请求头 post请求必须要指定请求头

注意：必须在调用open()方法只会且调用send()方法之前调用setRequestHeader()。

xhr.setRequestHeader('content-type','x-www-form-urlencoded')

post请求的封装

static post(url,param={},callback){
    if(typeof url != 'string'){
        throw new Error('url地址错误')
    }
    //参数解析
    let responseStr = ''
    // 遍历param对象
    for(let key in param){
        //如果当前的str为空字符串 那么就不需要& 否则前面需要&符号
        if(responseStr){
            responseStr += `&${key}=${param[key]}`
        }else{
            responseStr += `${key}=${param[key]}`
        }
    }
    let xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP")
    xhr.open('post',url)
    xhr.setRequestHeader('content-type','x-www-form-urlencoded')
    xhr.send(responseStr)
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){
            let response = JSON.parse(xhr.responseText)
            if(callback instanceof Function){
                callback(response)
            }
        }
    }
}

promise封装

class Ajax{
    constructor(){

    }
    //封装get请求 请求地址  请求的参数  回调函数
    static get(url,param={}){
        if(!url){
            throw new Error('url地址必须要填入')
        }
        //参数解析 ?key=value&key1=value1
        // 遍历param对象
        for(let key in param){
            //url里面如果存在?
            if(url.includes('?')){
                url += `&${key}=${param[key]}`
            }else{
                url += `?${key}=${param[key]}`
            }
        }
        let xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP")
        xhr.open('get',url)
        xhr.send()
        return new Promise((resolve,reject)=>{
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){
                   let response = JSON.parse(xhr.responseText)
                   resolve(response)
                }
            }
            xhr.onerror = function(){
                reject('请求错误')
            }
        })
        
    }
    static post(url,param={}){
        if(typeof url != 'string'){
            throw new Error('url地址错误')
        }
        //参数解析
        let responseStr = ''
        // 遍历param对象
        for(let key in param){
            //如果当前的str为空字符串 那么就不需要& 否则前面需要&符号
            if(responseStr){
                responseStr += `&${key}=${param[key]}`
            }else{
                responseStr += `${key}=${param[key]}`
            }
        }
        let xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP")
        xhr.open('post',url)
        xhr.setRequestHeader('content-type','x-www-form-urlencoded')
        xhr.send(responseStr)
        return new Promise((resolve,reject)=>{
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){
                   let response = JSON.parse(xhr.responseText)
                   resolve(response)
                }
            }
            xhr.onerror = function(){
                reject('请求错误')
            }
        })
    }
}

JavaScript--AJXS

协议（基于tcp/ip）

请求的类型

线程和进程

ajax概述

ajax的访问流程

代码实现

readyState

status

XMLHttpRequest存在兼容问题

http请求方式

get 请求（默认请求方式）

post 请求（必须请求方式为post 默认传参是表单传参）

resetful 风格的接口（后台接口的风格）

使用get请求对应的数据并渲染

get请求封装

post示例

登录注册案例

get请求和post请求在xhr请求的区别

post请求的封装

promise封装

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

JavaScript--AJXS

协议（基于tcp/ip）

请求的类型

线程和进程

ajax概述

ajax的访问流程

代码实现

readyState

status

XMLHttpRequest存在兼容问题

http请求方式

get 请求 （默认请求方式）

post 请求 （必须请求方式为post 默认传参是表单传参）

resetful 风格的接口（后台接口的风格）

使用get请求对应的数据并渲染

get请求封装

post示例

登录注册案例

get请求和post请求在xhr请求的区别

post请求的封装

promise封装

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

get 请求（默认请求方式）

post 请求（必须请求方式为post 默认传参是表单传参）