首页 > 其他分享> 文章详细

Day23-AJAX

2022-06-24 19:33:18 阅读：142 来源： 互联网

标签：请求 url request Day23 AJAX params key post

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)
            }
        }
    }
}

标签：请求,url,request,Day23,AJAX,params,key,post
来源： https://www.cnblogs.com/bange-pla/p/16409992.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9