源生js封装ajax代码教程
程序员文章站
2022-06-30 09:32:10
封装源生ajax代码:
var data = {type: "get",url:"",data:null,async:true,...
封装源生ajax代码:
var data = {type: "get",url:"",data:null,async:true,success:null,error:null}; function ajax(data){ // 第一步:创建xmlhttprequest对象 var xhr = null; if(window.xmlhttprequest){ // 标准浏览器 xhr = new xmlhttprequest(); } else{ // 早期的ie浏览器 xhr = new activexobject("microsoft.xmlhttp"); } // 定义一些参数 var type = data.type == "get" ? "get" : "post"; var async = data.type ? true : false; // 第二步:准备发送请求,配置发送请求的一些行为 xhr.open(type,data.url,async); // 第三步:执行发送的动作,如果是post,要设置请求头 if(type === "post"){ xhr.setrequestheader("content-type","application/x-www-form-urlencoded"); } xhr.send(data.data); // 第四步:指定一些回调函数 xhr.onreadystatechange = function(){ // xhr.readystate返回值:0 xmlhttprequest 对象创建完成 // 1 初始化完成open,表示发送请求的动作准备好了,但是还没有开始发送 // 2 发送请求end,表示已经发送完成 // 3 服务器已经返回数据了,正在接收数据 // 4 接收数据完成 if(xhr.readystate == 4){ if(xhr.status == 200){ if(typeof data.success == "function"){ // 调用回调函数,传入服务器返回的结果 data.success(xhr.responsetext); } else if(typeof data.error == "function"){ data.error(); } } } } // 调用 ajax(data);