Day23-AJAX

AJAX

关键名词

同步 （排队买东西 阻塞）

异步 （我们去吃饭 多个同时进行了（互相之间没有关系）（不知道什么开始 也不知道什么时候结束））

进程 （单独进行的程序叫做进程）

线程 （进程里面的最小计量单位 下载电影的时候每一个下载任务就是一个线程）

ajax 概述

ajax是一种异步通信技术（异步的js和异步的xml），利用网络请求 请求对应的数据的工具（http，https）。

 

ajax入门

核心对象 XMLHttpRequest

//构建请求对象
var request = new XMLHttpRequest()
//打开请求地址 指定请求方式
request.open('GET','http://jsonplaceholder.typicode.com/todos')
//发送请求
request.send()
//事件监听 请求请求状态的改变
request.onreadystatechange = function(){
    //获取请求状态 判断是否到达
    if(request.readyState == 4){
        // console.log(request.responseText)
        var jsonStr = request.responseText
        var jsonObj =  JSON.parse(jsonStr)
        console.log(jsonObj);
    }
}

GET请求

get请求参数传递 使用?做拼接 &连接多个参数 他请求的内容会在地址栏显示（大小2kb）

特点：

请求的参数使用？和 &做拼接

对应的请求的时候数据会暴露在地址栏（不安全的）

大小差不多2kb

get请求会有缓存（相对而言速度比较快 数据加载全部使用get）

get请求的速度快（默认情况下是get请求）

POST请求

post常用表单数据的提交 封装为一个表单对象存入请求体

特点

post请求对应的需要指定为post请求

请求的参数填充在请求体中传递（不会暴露在地址栏 相对安全）

post请求的数据容量较大 2M左右

post没有缓存（相对速度较慢）

示例

接口(post请求) http://10.41.12.7:8080/user

//构建请求对象
var request = new XMLHttpRequest()
//打开请求地址 指定请求方式
request.open('post','http://jsonplaceholder.typicode.com/todos')
//设置请求头 Content-type表示的意思你提交的数据是什么类型 以表单方式提交
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
request.send("name=jack&pwd=12345")
//事件监听 请求请求状态的改变
request.onreadystatechange = function(){
    //获取请求状态 判断是否到达
    if(request.readyState == 4){
        // console.log(request.responseText)
        var jsonStr = request.responseText
        var jsonObj =  JSON.parse(jsonStr)
        console.log(jsonObj);
    }
}

原生AJAX封装

//封装一个AjaxUtil对象
class AjaxUtil{
    constructor(){
​
    }
    //使用static的修饰的方法 是可以直接用对应的类名.方法名调用
    //请求地址 请求的参数 请求完执行的函数（回调函数）
    //封装get请求
    static get(url,params={},callback){
        //正常的ajax
        let request = new XMLHttpRequest()
        //先进行参数的拼接操作
        for(let key in params){
            if(url.indexOf('?')!=-1){//如果在对应的url地址里面存在?那么就在后面加&
                url+=`&${key}=${params[key]}`
            }else{
                url+=`?${key}=${params[key]}`
            }
        }
        //打开一个地址
        request.open('GET',url)
        //发送请求
        request.send()
        //监听对应的请求的状态变化
        request.onreadystatechange = function(){
            //判断 进入条件为当前数据响应成功
            if(request.readyState==4 && request.status==200){
                //接收到对应的数据
                let response = JSON.parse(request.responseText)
                //调用对应的回调函数 将对应的数据传递出去
                callback(response)
            }
        }
    }
    //使用static的修饰的方法 是可以直接用对应的类名.方法名调用
    //请求地址 请求的参数 请求完执行的函数（回调函数）
    //封装post请求
    static post(url,params={},callback){
        //正常的ajax
        let request = new XMLHttpRequest()
        //打开一个地址
        request.open('post',url)
        //先进行参数的拼接操作
        let paramStr = ""
        for(let key in params){
            if(paramStr==""){
                paramStr+=`${key}=${params[key]}`
            }else{
                paramStr+=`&${key}=${params[key]}`
            }
           
        }
        //设置请求头 Content-type表示的意思你提交的数据是什么类型 以表单方式提交
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //发送请求 post传参 在发送请求的时候携带
        request.send(paramStr)
        //监听对应的请求的状态变化
        request.onreadystatechange = function(){
            //判断 进入条件为当前数据响应成功
            if(request.readyState==4 && request.status==200){
                //接收到对应的数据
                let response = JSON.parse(request.responseText)
                //调用对应的回调函数 将对应的数据传递出去
                callback(response)
            }
        }
    }
}