jQuery中的ajax

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量546 收藏
点赞数
文章标签： ajax jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/betterangela/article/details/124572423
版权

jQuery中的ajax

jquery中的ajax

API：别人调用我我能返回东西的就叫api。向这个url发送请求服务器能返回东西的就叫api

demo:

const xhr=new XMLHttpRequest();
console.log(xhr.readyState);
xhr.open('GET','https://mock.mengxuegu.com/mock/6262c4510a65bd50bbd93eee/cgi/list');
console.log(xhr.readyState);
// 超时
xhr.onreadystatechange=function(){
    console.log('==='+xhr.readyState);
    if(!(/^(2|3)\d{2}$/.test(xhr.status))) return;
    if(xhr.readyState===4){
        console.log('===done')
        console.log(xhr.responseText)
    }
}
xhr.send();
console.dir(xhr);

用别人现成的封装好的库来实现——ajax

$.ajax

c1708befea3312910a7d86950d108da3.png

配置项：

1f7117570430aa07594f848a72c0d8fe.png

contentType

传递给服务器内容的格式

这里有一个概念要区分一下，类型一般是字符串（除了字符串就是真正的流传输了）。而字符串下有好多种格式。

常用的格式：

x-www-form-urlencoded: get/post 默认遵循的都是这种格式

heades：

设置请求头

$.ajax({
    url:'https://mock.mengxuegu.com/mock/6262c4510a65bd50bbd93eee/cgi/list',
    method:'GET',
    data:{
        name:'angela',
        age:18,
    },
    cache:false,
    success:(res,status,xhr)=>{
        console.log(res);
        console.log(status);
        console.log(xhr);
    }
})

倒计时抢购案例

从服务器获取时间一定会存在误差问题：

服务器把时间给我到我拿到这个时间，中间经历的时间，就是时差

/**
 * 1.首次从服务器获取时间
 * 2.然后interval没间隔1秒计算时差
 */


function ajaxTime(callback){
    let xhr=new XMLHttpRequest();
    xhr.open('GET','https://mock.mengxuegu.com/mock/6262c4510a65bd50bbd93eee/cgi/list');
    xhr.setRequestHeader('Access-Control-Expose-Headers', 'Date');
    xhr.onreadystatechange=function(){
        if(xhr.readyState===2){
            now=new Date(xhr.getResponseHeader('Date'));
            callback && callback();
        }
    }
    xhr.send();
};
let target=new Date('2022/4/23 24:00:00')
let timer=null;
let now=null;


function computed(){
    console.log(now);
    let spanTime=target-now;
    if(spanTime<=0){
        clearInterval(timer);
        timer=null;
        return;
    }
    // 计算时分秒
    let spanSecond=spanTime/1000;
    console.log(spanSecond);
    let hours=Math.floor(spanSecond/3600);
    let minutes=Math.floor((spanSecond-hours*3600)/60);
    let seconds=spanSecond%60;
    document.getElementById('hour').innerHTML=hours;
    document.getElementById('minute').innerHTML=minutes;
    document.getElementById('second').innerHTML=seconds;
    // 加一秒钟
    now=new Date(+now+1000)
}
ajaxTime(()=>{
    computed();
    window.setInterval(computed,1000);
})

封装jquery版的ajax

封装组件、插件、类库，都是基于构造函数来做的。

所有类库/插件的封装都是基于构造函数，面向对象、类和实例、构造函数在业务开发中用不到，构造函数用于组件、类库和插件的封装上，包括框架的封装。

类的方法：

当做普通函数来执行，但是也然能创建出它的一个实例来；

绕了一圈。jQuery是类但是把它当做普通函数执行也能创建出它的实例

ajax

/**
 * jquery版本
 * 弊端：相互循环调用
 */


(function(){
    function ajax(options){
        // return ajax.prototype.fn.init(options) 
        return ajax.prototype.init(options)
    }
    ajax.prototype={
        constructor:ajax,
        version:1,
    }
    ajax.prototype.init=function init(options){}
    ajax.prototype.init.prototype=ajax.prototype;


    window.ajax=ajax;


})();

简单版：

/**
 * 简单版本
 */


(function(){
    function ajax(options){
        return new init(options)
    }
     ajax.prototype={
        constructor:ajax,
        version:1,
    }


    function init(options){


    }
    init.prototype=ajax.prototype;


    window.ajax=ajax;


})();

自己封装

  1. 配置项初始化

Object.assign 目标对象中出现的字段无条件覆盖。只要这个字段出现了，就会覆盖原来的。

那init是个类，之后所有方法都要用到options，那么需要把options挂在实例上。

封装的时候这里有一个扩展的点：函数的3种角色

(function(){
    function ajax(options){
        return new init(options)
    }


    let defaults={
        url:'',
        method:'GET',
        data:null,
        dataType:'JSON',
        async:true,
        cache:true,
        headers:null,
        timeout:null,
        success:null,
        error:null,
    }
    function init(options){
        // 配置参数
        this.options=Object.assign(defaults,options);
        this.send();
    }
    ajax.prototype={
        constructor:ajax,
        version:1,
        send(){


        }
    }
    init.prototype=ajax.prototype;


    window.ajax=ajax;






})();

  1. xhr ajax请求

handleData

(function(){
    function ajax(options){
        return new init(options)
    }


    let defaults={
        url:'',
        method:'GET',
        data:null,
        dataType:'JSON',
        async:true,
        cache:true,
        headers:null,
        timeout:null,
        success:null,
        error:null,
    }
    function init(options){
        // 配置参数
        this.options=Object.assign(defaults,options);
        this.xhr=null;
        this.send();
    }
    let regGET=/^(GET)|(DELETE)|(HEAD)|(OPTIONS)$/i
    ajax.prototype={
        constructor:ajax,
        version:1,
        send(){
            let xhr=null;
            this.xhr=xhr=new XMLHttpRequest;
            let {url,method,data,cache}=this.options;
            // 这里的判断要扩展一下
            // if(method==='GET'){
            //     // url+='?'
            //     // if(!url.endsWith('/')){
            //     //     url+='/'
            //     // }
            //     // 尝试把这一段封装成一个方法
            //     if(typeof data ==='string'){
            //         url+=`?${data}`
            //     }
            //     if(typeof data === 'object'){
            //         url+=`?${Object.entries(data).map(a=>`${a[0]}=${a[1]}`).join('&')}`
            //     }
            // }
            data=this.handleData();
            if(data!==null && regGET.test(method)){
                url+=`${this.checkAsk(url)}${data}`;
                data=null;
            }
            // 把cache处理掉了
            if(!cache && regGET.test(method)){
                url+=`${this.checkAsk(url)}_=${+new Date}`;
            }
            xhr.open(url,method)
        },
        // 这里封装得很好
        handleData(){
            let {data}=this.options;
            if(data === null || typeof data === 'string') return data;
            if(typeof data === 'object') return Object.entries(data).map(a=>`${a[0]}=${a[1]}`).join('&')
        },
        checkAsk(url){
            return url.includes('?')?'&':'?'
        }
        
    }
    
    init.prototype=ajax.prototype;


    window.ajax=ajax;


})();

timeout/headers

判类型：Object.prototype..call(headers)

(function(){
    function ajax(options){
        return new init(options)
    }


    let defaults={
        url:'',
        method:'GET',
        data:null,
        dataType:'JSON',
        async:true,
        cache:true,
        headers:null,
        timeout:null,
        success:null,
        error:null,
    }
    function init(options){
        // 配置参数
        this.options=Object.assign(defaults,options);
        this.xhr=null;
        this.send();
    }
    let regGET=/^(GET)|(DELETE)|(HEAD)|(OPTIONS)$/i
    ajax.prototype={
        constructor:ajax,
        version:1,
        send(){
            let xhr=null;
            this.xhr=xhr=new XMLHttpRequest;
            let {url,method,data,cache,timeout,headers}=this.options;
            data=this.handleData();
            if(data!==null && regGET.test(method)){
                url+=`${this.checkAsk(url)}${data}`;
                data=null;
            }
            // 把cache处理掉了
            if(!cache && regGET.test(method)){
                url+=`${this.checkAsk(url)}_=${+new Date}`;
            }
            xhr.open(url,method)
            // 设置超时时间
            timeout!==null?xhr.timeout=timeout:null;
            // 设置header
            if(Object.prototype.toString.call(headers)==='[object Object]'){
                Object.keys(headers).forEach(key=>{
                    xhr.setRequestHeader(key,headers[key]);
                })
            }
            xhr.send(data);
        },
        // 这里封装得很好
        handleData(){
            let {data}=this.options;
            if(data === null || typeof data === 'string') return data;
            if(typeof data === 'object') return Object.entries(data).map(a=>`${a[0]}=${a[1]}`).join('&')
        },
        checkAsk(url){
            return url.includes('?')?'&':'?'
        }
        
    }
    
    init.prototype=ajax.prototype;
    window.ajax=ajax;


})();

success/error

(function(){
    function ajax(options){
        return new init(options)
    }


    let defaults={
        url:'',
        method:'GET',
        data:null,
        dataType:'JSON',
        async:true,
        cache:true,
        headers:null,
        timeout:null,
        success:null,
        error:null,
    }
    function init(options){
        // 配置参数
        this.options=Object.assign(defaults,options);
        this.xhr=null;
        this.send();
    }
    let regGET=/^(GET)|(DELETE)|(HEAD)|(OPTIONS)$/i
    ajax.prototype={
        constructor:ajax,
        version:1,
        send(){
            let xhr=null;
            this.xhr=xhr=new XMLHttpRequest;
            let {url,method,data,cache,timeout,headers,async}=this.options;
            data=this.handleData();
            if(data!==null && regGET.test(method)){
                url+=`${this.checkAsk(url)}${data}`;
                data=null;
            }
            // 把cache处理掉了
            if(!cache && regGET.test(method)){
                url+=`${this.checkAsk(url)}_=${+new Date}`;
            }
            xhr.open(method,url,async)
            // 设置超时时间
            timeout!==null?xhr.timeout=timeout:null;
            // 设置header
            if(Object.prototype.toString.call(headers)==='[object Object]'){
                Object.keys(headers).forEach(key=>{
                    xhr.setRequestHeader(key,headers[key]);
                })
            }
            let {success,error,dataType}=this.options;
            xhr.onreadystatechange=()=>{
                let { readyState,status,statusText,responseText,responseXML}=xhr;
                if(readyState===4 && /^(2|3)\d{2}$/.test(status)){
                    switch(dataType.toUpperCase()){
                        case 'JSON':
                            responseText=JSON.parse(responseText);
                        break;
                        case 'XML':
                            responseText=responseXML;
                        break;
                    }
                    success && success(responseText,statusText,xhr);
                    return;
                }
                error && error(statusText,xhr);
                
            }
            xhr.send(data);
        },
        // 这里封装得很好
        handleData(){
            let {data}=this.options;
            if(data === null || typeof data === 'string') return data;
            if(typeof data === 'object') return Object.entries(data).map(a=>`${a[0]}=${a[1]}`).join('&')
        },
        checkAsk(url){
            return url.includes('?')?'&':'?'
        }
        
    }
    
    init.prototype=ajax.prototype;


    window.ajax=ajax;






})();
ajax({
    url:'https://mock.mengxuegu.com/mock/6262c4510a65bd50bbd93eee/cgi/list',
    success:(obj)=>{
        console.log('obj===');
        console.log(obj);
    },
    headers:{
        a:'a',
    },
    data:{
        name:'a',
    }
})
(function(){
    function ajax(options){
        return new init(options)
    }


    let defaults={
        url:'',
        method:'GET',
        data:null,
        dataType:'JSON',
        async:true,
        cache:true,
        headers:null,
        timeout:null,
        success:null,
        error:null,
    }
    function init(options){
        // 配置参数
        this.options=Object.assign(defaults,options);
        this.xhr=null;
        this.send();
    }
    let regGET=/^(GET)|(DELETE)|(HEAD)|(OPTIONS)$/i
    ajax.prototype={
        constructor:ajax,
        version:1,
        send(){
            let xhr=null;
            this.xhr=xhr=new XMLHttpRequest;
            let {url,method,data,cache,timeout,headers,async}=this.options;
            data=this.handleData();
            if(data!==null && regGET.test(method)){
                url+=`${this.checkAsk(url)}${data}`;
                data=null;
            }
            // 把cache处理掉了
            if(!cache && regGET.test(method)){
                url+=`${this.checkAsk(url)}_=${+new Date}`;
            }
            xhr.open(method,url,async)
            // 设置超时时间
            timeout!==null?xhr.timeout=timeout:null;
            // 设置header
            if(Object.prototype.toString.call(headers)==='[object Object]'){
                Object.keys(headers).forEach(key=>{
                    xhr.setRequestHeader(key,headers[key]);
                })
            }
            let {success,error,dataType}=this.options;
            xhr.onreadystatechange=()=>{
                let { readyState,status,statusText,responseText,responseXML}=xhr;
                if(readyState===4 && /^(2|3)\d{2}$/.test(status)){
                    switch(dataType.toUpperCase()){
                        case 'JSON':
                            responseText=JSON.parse(responseText);
                        break;
                        case 'XML':
                            responseText=responseXML;
                        break;
                    }
                    success && success(responseText,statusText,xhr);
                    return;
                }
                error && error(statusText,xhr);
                
            }
            xhr.send(data);
        },
        // 这里封装得很好
        handleData(){
            let {data}=this.options;
            if(data === null || typeof data === 'string') return data;
            if(typeof data === 'object') return Object.entries(data).map(a=>`${a[0]}=${a[1]}`).join('&')
        },
        checkAsk(url){
            return url.includes('?')?'&':'?'
        }
        
    }
    
    init.prototype=ajax.prototype;


    window.ajax=ajax;






})();
ajax({
    url:'https://mock.mengxuegu.com/mock/6262c4510a65bd50bbd93eee/cgi/list',
    success:(obj)=>{
        console.log('obj===');
        console.log(obj);
    },
    headers:{
        a:'a',
    },
    data:{
        name:'a',
    }
})

请求头Content-Type - 简书

HTTP请求头中的Content-Type类型 - 百度文库

betterangela
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery中ajax中的参数,jquery中的ajax参数
weixin_42109598的博客
08-05 2631
jquery中将ajax封装成了函数，我们使用起来非常方便，jquery会自动根据内容选择post还是get方式提交数据，并且会自动编码，但是要想完全掌握jquery中的ajax，我们必须将它的各个参数记住：1、url strng 发送请求的地址2、type string 请求方式(post或get，默认get)，其他http请求方法，比如：put和delete也可以使用，但只有部...
JQuery发送AJAX请求
gcsyzy的博客
04-01 1484
JQuery发送AJAX请求的三种方式：$get()，$post()，$ajax()
「jQuery系列」jQuery中Ajax的运用
日常笔记/总结/系列知识梳理
03-13 2547
jQuery Ajax 是 jQuery 提供的一个功能强大的异步通信方法，它允许网页与服务器之间进行数据交换，而无需重新加载整个页面。通过使用 Ajax，开发者可以实现更加流畅和响应式的用户体验，减少不必要的网络传输和页面加载时间。jQuery Ajax 的核心方法是$.ajax()，它提供了丰富的选项和回调函数，用于配置和执行 Ajax 请求。下面是一个基本的$.ajax()$.ajax({url: 'https://api.example.com/data', // 请求的 URL。
jQuery Ajax 基本用法 附带Fetch API
一拳莫敌的博客
06-12 1669
确保服务器端已经准备好处理 Ajax 请求并返回相应的数据。：使用 jQuery 的$.ajax()方法发送请求。
jQuery中的Ajax
weixin_45375510的博客
10-11 4506
jQuery×Ajax jquery提供多个与ajax有关的方法，通过jquery ajax方法，能够使用HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON，同时能够把接收的数据更新到DOM对象。代替XMLHttpRequest，但其实jquery还是封装的异步对象。 (1)$.ajax() $.ajax()是jquery中ajax请求的核心方法，所有的其他方法都是在内部使用此方法。 语法： $.ajax({key: value, key: value, ...})
jQuery中ajax的使用（最详细）
小屁鸿的博客
08-02 3万+
jQuery中ajax的使用1.jQuery中ajax的基本使用2.jQuery中ajax的回调事件3.jQuery中ajax中的高度封装函数4.jQuery中ajax的全局事件 1.jQuery中ajax的基本使用 2.jQuery中ajax的回调事件 3.jQuery中ajax中的高度封装函数 4.jQuery中ajax的全局事件 ...
jquery ajax请求方式,jQuery中ajax的4种常用的请求方式
weixin_36394468的博客
08-05 1604
jQuery中ajax的4种常用请求方式：1.$.ajax()返回其创建的 XMLHttpRequest 对象。$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。实例：保存数据到服务器，成功时显示信息。$.ajax({t...
JQuery中Ajax的简单操作
weixin_51094637的博客
04-29 6776
Ajax 概念 全称：ASynchronous JavaScript And XML （代表 异步 JavaScript 和 XML) AJAX 并不是编程语言，是一种用于创建快速动态网页的技术。 AJAX 组合了： 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据） JavaScript 和 HTML DOM（显示或使用数据） Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异.
jq ajax同步异步,详解JQuery中Ajax的同步与异步
weixin_39729840的博客
08-05 3412
说到ajax同步与异步，可能很多同学对它都不是很了解，接下来我们就Ajax的同步与异步作个简单的介绍。同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事。异步:请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕。下面我们来做一个简单的比喻 ——1、一心一意：当前只能做一件事，其他事情必须等当前的事情完成，才能继续后面的事...
jQuery的Ajax实例（附完整代码）
热门推荐
Yuan_mingyu的博客
02-02 8万+
目录写在前边什么是AjaxAjax基本结构实例实例1实例2小结 写在前边 作为一个前端刚入门没多久的小白，想在这里分享一下我的学习内容，就算是学习笔记了。因为前端的大部分学习都是通过网站上的教程，所以遇到不懂得问题，也只有求助于网络，通过度娘，了解到了一些论坛、博客。在发现了众多技术大牛的同时，我也发现，一些像我这样的小白，由于能力有限，在查找相关资料的时候，对于大佬的一些操作理解困难，虽说能照猫...
jQuery中ajax的使用
wsdshdhdhd的博客
09-08 2297
如果要传递json格式数据，需要设置contentType和将data写成json字符串的形式（可以用JSON.stringify方法转换）该回调函数中的第一个参数是服务器返回的数据（拿到的只是数据），它会自动根据服务端响应的 Content-type 自动转换为对象，如果服务端没有设置响应头Content-type，返回的还是字符串类型的数据。发送到服务器的数据，格式是json格式或者json字符串格式。如果是 POST 请求，系统就通过设置请求体传递。：发送到服务器的数据（将自动转换为请求字符串格式）
jQuery中ajax错误调试分析
10-20
jQuery中把ajax封装得非常好。但是日常开发中，我偶尔还是会遇到ajax报错。本文进行简单分析一下ajax报错。需要的朋友可以参考下
jQuery中ajax获取数据赋值给页面的实例
10-18
下面小编就为大家分享一篇jQuery中ajax获取数据赋值给页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jquery 中ajax执行的优先级
10-24
本文给大家讲述的是个人再做用户注册的时候遇到的ajax执行优先级的问题，以及在网友们的帮助下，解决此问题的全过程，这里记录下来，分享给大家。
jQuery中Ajax的load方法详解
10-24
本文重点个大家讲解了几个jQuery中ajax的load()方法的使用实例，load()方法是jQuery中最为简单和常用的Ajax方法，能远程载入HTML代码并插入DOM中
jQuery中ajax请求后台返回json数据并渲染HTML的方法
10-18
今天小编就为大家分享一篇jQuery中ajax请求后台返回json数据并渲染HTML的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
快速入门了解Ajax
音符犹如代码的博客
07-25 1026
上面是一个原生的Ajax的一个写法，但是原生的Ajax太繁琐甚至还有浏览器不兼容的问题，所以现在都是基于原生的Ajax的Axios。意义：AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML。介绍：Axios是简化的Ajax，对传统的Ajax操作的简化和改进，也是一个更强大和便捷的http请求处理的工具。下边是两个来自官网的post的请求和get请求的代码。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 861
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 268
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
jquery中ajax的使用
09-30
使用jQuery中的ajax，你可以通过以下几个方面来实现： 1. 基本使用：通过调用$.ajax()函数来发送HTTP请求，并在成功或失败时执行相应的回调函数来处理响应。你可以指定请求的URL、请求类型（GET、POST等）、数据类型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值