AJAX总结

AJAX

关键名词

同步 (排队买东西 阻塞)

异步 (我们去吃饭,你和我分别吃,同时进行(互相之间没有关系)(不知道什么时候开始 什么时候结束))

进程 (单独进行的程序叫做进程)

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

概述: ajax是一种异步通信技术(异步的js和异步的xml),利用网络请求 请求对应的数据的工具( http , https).

ajax入门

核心对象 xmlhttpRequest

//1.创建一个请求对象
var request = new XMLHttpRequest()
//2.指定请求方式  打开请求地址
request.open('GET', "http://jsonplaceholder.typicode.com/todos")
//3.发送请求
request.send()
//4.事件监听 请求状态的改变
request.onreadystatechange = function() {
    //获取请求状态,判断是否到达
    if (request.readyState == 4) {
        var jsonStr = request.responseText
        //json 通常用于与服务器端交换数据,在接收服务器数据时一般是字符串
        //我们可以使用JSON.parse()方法将数据转换为JavaScript对象
        var jsonObj = JSON.parse(jsonStr)
        console.log(jsonStr);
        console.log(jsonObj);
    }
}

GET 请求

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

特点:

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

对应的请求的时候数据会暴露在数据栏上(不安全)

大小差不多2kb

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

get请求速度快(默认情况下使用get请求)

POST请求

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

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

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

post没有缓存 (相对速度较慢)

示例:

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

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

原生Ajax封装

//封装一个ajax对象
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 += `&${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 {
                params += `&${key}=${params[key]}`
            }
        }
        //设置请求头 Content-type表示的意思是提交的数据是什么类型 以表单方式提交
        request.send(paramStr)
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                let response = JSON.parse(request.responseText)
                callback(response)
            }
        }
    }
}