封装一个自己的Ajax代码

通过ajax.js中的函数对ajax操作进行封装,以实现代码的可重用性

//通过ajax.js中的函数对ajax操作进行封装,以实现代码的可重用性
//注意:代码实现时我们一般会封装共性,提取特性,特性一般会以参数形式进行传入
function doAjaxGet(url,params,callback){
      //1.创建XmlHttpRequest对象
       var xhr=new XMLHttpRequest();
      //2.设置状态监听,监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立,请求是否在处理,响应是否已产生)
       xhr.onreadystatechange=function(){//callback(回调函数)
        //基于xhr对象获取的通讯状态,对响应数据进行处理
           if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
        	   //服务端响应的结果会传递给XHR对象,我们可以借助responseText获取响应结果
        	   callback(xhr.responseText);
           }
      }
     //3.创建与服务端的连接
      xhr.open("GET",url+"?"+params,true);//true表示异步
      //4.发送请求
      xhr.send(null); //Get请求,send方法不传内容
    //5.对响应结果进行处理(在回调函数中处理)。
 }
 function doAjaxPost(url,params,callback){
	 //debugger
	 //1.创建XmlHttpRequest对象
	 var xhr=new XMLHttpRequest();
	 //2.设置状态监听,监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立,请求是否在处理,响应是否已产生)
	 xhr.onreadystatechange=function(){//callback(回调函数)
		 //基于xhr对象获取的通讯状态,对响应数据进行处理
		 if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
			//服务端响应的结果会传递给XHR对象,我们可以借助responseText获取响应结果
			callback(xhr.responseText);
		 }
	 }
	 //3.创建与服务端的连接
	 xhr.open("POST",url,true);//true表示异步
	 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	 //4.发送请求
	 xhr.send(params); //post请求将参数写到send方法
	 //5.对响应结果进行处理(在回调函数中处理)。
 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值