ajax的封装

最新推荐文章于 2025-08-11 01:12:22 发布

weixin_30835923

最新推荐文章于 2025-08-11 01:12:22 发布

阅读量51

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：http://www.cnblogs.com/xxcnhj/p/11024989.html

本文深入讲解了AJAX的封装方法，包括GET和POST请求的处理，数据类型转换，以及异步和同步请求的管理。提供了实用的代码示例，帮助读者理解如何在实际项目中使用AJAX。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax的封装

function getParam(obj){
  "use strict";
  let str="";   
  for(var k in obj){
    str+=k+"="+obj[k]+"&";  
 }
  return str.substring(0,str.length-1);
}

function createXHR(){
   if(window.XMLHttpRequest){
     return new XMLHttpRequest();
  }
    return new ActiveXObject("Msxml2.XMLHTTP");
}



function Ajax(opts){
  opts.type=opts.type==undefined ? "get":opts.type;
  opts.async=opts.async==undefined ? true:opts.async;
  opts.dataType=opts.dateType==undefined ? "json":opts.dataType;
  
 let xhr=createXHR();
 if(opts.type=="get"){
   xhr.open("get",opts.url+"?"+getParam(opts.data),opts.async);
   xhr.send(null); 
 }else{
   xhr.open("post",opts.url,opts.async);
   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencodeed');
   xhr.send(getParam(opts.data));
 }

 if(opts.async){
   xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
      result();
    } 
  } 
 }else{
   result(); 
 }

}

function result(){
  if(xhr.status===200){
    if(opts.dataType=="json"){
      opts.success(JSON.parse(xhr.responseText));
   }else{
      opts.success(xhr.responseText);
   }
 }

}