关于Ajax原生封装

接上文,我们已经对原生的Ajax有了一个基础的了解,但是在我们日常工作中,不可能每次需要用到时在用原生写一遍,所以本文针对后续工作需要,对Ajax进行封装,主要演示其封装过程,便于理解其中原理

1.Ajax原生封装过程

  //调用(为了查看方便,我在开头调用该封装函数,里面的实参是一个模拟的数据源对象)
        ajax({
            url:'http://139.9.177.51:3333/api/testGet',//请求地址
            type:'GET',//请求方式
            data:{
                name:'张三',
                age:18
            },//传参
            async:true,//可选,同步或异步 true为异步,false为同步
            success:function(res){//成功时的回调用函数
                console.log(res)
            },
            error:function(err){//失败时的回调函数
                console.log(err)	
            }
        })
        //进行封装
		function ajax(){
			let url=a.url;
			let type=a.type.toLowerCase();//为了后续,发送方式一律改为小写
			let data=Boj(a.data)||{}//这里运用短路运算,判断是否有参数值。有值就执行前面
			function Boj(data){  //定义一个处理参数的函数
             	let arr=[];//定义一个空数组用来保存数据
             	for(let key in data){ //遍历参数对象 key表示健名
					arr.push(key+'='+data[key])//这里需要注意,用拼接方式我们需要将参数转成 name=张三 这样的格式(这是get方式的传参)
             	}
                   return arr.join('&')//将arr数组拼接成一个字符串 name=张三&age=18 返回到data处

			}
		let xhr=new XMLHttpRequest()//创建ajax对象
	     //下面进行判定,get方式和post方式分开
	     if(type=='get'){
	         xhr.open('get',url+'?'+data)//设置请求方式和请求地址,参数拼接上去
	         xhr.send()//发送请求
	     }else{
	         xhr.open('post',url+'?'+data)//设置请求方式和请求地址,参数拼接上去
	         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//设置请求头
	          xhr.send('name=小飞飞&age=18')//发送请求
	     }
			//监听状态码和响应码
           xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(JSON.parse(xhr.response).data);//进行一系列数据渲染操作
                    //3只有状态码为4,响应码为200 接受数据成功,响应完成
                } else {
                  
                }
            }	
		
		}

以上是ajax封装的过程,便于理解消化,下面是最终的封装函数

2 最终封装成型(每次使用前都要引入)

      ajax({   //get方式
            url:'http://139.9.177.51:3333/api/testGet',//请求地址
            type:'GET',//请求方式
            data:{
                name:'张三',
                age:18
            },//传参
            async:true,//可选,同步或异步 true为异步,false为同步
            success:function(res){//成功时的回调用函数    res是响应的数据
                console.log(res)
            },
            error:function(err){//失败时的回调函数
                console.log(err)	
            }
        })
        //post方式
        ajax({
            url:'http://139.9.177.51:3333/api/testPost',//请求地址
            type:'post',//请求方式
            data:{
                name:'小飞飞',
                age:18
            },//传参
            async:true,//可选,同步或异步 true为异步,false为同步
            success:function(res){//成功时的回调用函数  res是响应的数据
                console.log(res)
            },
            error:function(err){//失败时的回调函数
                console.log(err)	
            }
        })

在日常工作中,可能使用原生Ajax相对较少,为了方便快捷的完成工作,我们一般会使用axios来进行数据请求 axios是易用、简洁且高效的http库,axios本质上也是对原生XHR(ajax)的封装。详情见axios官方网站
`
链接: link.

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 使用原生 JavaScript 封装 ajax 可以这样做: ``` function ajax(method, url, data, success) { var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { success(xhr.responseText); } else { console.error(xhr.statusText); } } }; xhr.send(data); } ``` 使用方式: ``` ajax( "POST", "/login", "username=admin&password=123456", function(responseText) { console.log(responseText); } ); ``` 其中,method 为请求的方法(POST 或 GET),url 为请求的地址,data 为请求的数据,success 为请求成功时的回调函数。 ### 回答2: 原生js封装Ajax主要由以下几个步骤: 1. 创建一个XMLHttpRequest对象。可以使用var xhr = new XMLHttpRequest();语句来创建一个XMLHttpRequest对象。 2. 设置请求的方法和URL。使用xhr.open(method, url, async)方法来设置请求的方法、URL和是否异步,其中method为请求方法(例如GET或POST),url为请求的URL,async表示是否异步(true为异步,false为同步)。 3. 设置请求的头部信息。使用xhr.setRequestHeader(header, value)方法来设置请求头部信息,可根据需要设置Content-Type、Authorization等等。 4. 监听请求状态变化。使用xhr.onreadystatechange = function(){}语句监听请求状态的变化,当请求状态发生变化时,执行相应的处理。 5. 发送请求。使用xhr.send(data)方法发送请求,其中data为请求的数据,可以为null或者是一个字符串。 6. 处理返回结果。在监听请求状态变化的函数中,根据请求的状态和返回的结果进行相应的处理。例如,当请求状态为4且状态码为200时,表示请求成功,可以通过xhr.responseText获取响应的数据。 7. 销毁XMLHttpRequest对象。请求完成后,使用xhr = null;语句将XMLHttpRequest对象置为空,以便释放内存。 通过以上步骤,就可以封装一个基本的Ajax函数。可以根据需要添加错误处理、超时设置、数据格式转换等功能,以满足不同场景的需求。 ### 回答3: 在原生JavaScript封装Ajax可以通过XMLHttpRequest来实现。下面是一个简单的Ajax封装函数的示例: ```javascript function ajax(method, url, data, callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { callback(xhr.responseText); } }; xhr.open(method, url, true); if (method === 'POST') { xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); } xhr.send(data); } ``` 上述函数接受四个参数:请求方法(method)、请求URL(url)、请求数据(data)和回调函数(callback)。其中,method参数可以是'GET'或者'POST',url参数是请求的目标URL,data参数是要发送的数据(如果是'POST'请求),callback参数是请求成功后要执行的回调函数函数内部创建了一个XMLHttpRequest对象,并通过onreadystatechange事件监听请求的状态变化。当请求状态为4且状态码为200时,表示请求已完成,可以获取到返回的数据,此时调用回调函数。 使用open方法打开请求,参数为请求方法、URL和是否异步请求。如果是POST请求,还需要调用setRequestHeader方法设置请求头的Content-Type。 最后,调用send方法发送请求数据。根据请求方法不同,send方法的参数也不同。 通过上述封装,可以方便地使用原生JavaScript进行Ajax请求,并根据请求结果执行相应的操作。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值