집 > 기사 > 웹 프론트엔드 > 네이티브 Ajax를 구현하는 여러 JavaScript 메소드

네이티브 Ajax를 구현하는 여러 JavaScript 메소드

小云云원래의: 2017-11-18 10:16:032715검색

데이터 기반 애플리케이션에서는 연락처 목록과 같이 사용자가 필요로 하는 데이터를 실제 웹 페이지와 독립적인 서버에서 얻을 수 있으며 웹 페이지에 동적으로 기록할 수 있어 느린 웹 애플리케이션 경험을 색칠하고 시각적으로 보이게 할 수 있습니다. 데스크톱 응용 프로그램과 같습니다. js에는 jquery와 같은 다양한 프레임워크가 있으므로 ajax를 사용하는 것이 매우 간단해졌습니다. 하지만 때로는 단순성을 추구하기 위해 프로젝트에 jquery와 같은 거대한 js 플러그인을 로드할 필요가 없을 수도 있습니다. 그런데 ajax 기능을 사용하고 싶다면 어떻게 해야 할까요? 자바스크립트를 사용하여 네이티브 Ajax를 구현하는 몇 가지 방법을 알려드리겠습니다.

먼저 ajax를 구현하기 전에 XMLHttpRequest 객체를 생성해야 합니다. 객체를 생성하는 브라우저가 지원되지 않는 경우 ActiveXObject를 생성해야 합니다. 구체적인 방법은 다음과 같습니다.

var xmlHttp;
function createxmlHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest)
xmlHttp=new XMLHttpRequest();
}

다음은 위에서 생성한 xmlHttp를 사용하여 가장 간단한 ajax get 요청을 구현합니다.

function doGet(url){//注意在传参数值的时候最好使用encodeURI处理一下，防止乱码
createxmlHttpRequest();
xmlHttp.open("GET",url);
xmlHttp.send(null);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
alert(&#39;success&#39;);
}else{
alert(&#39;fail&#39;);
}
}
}

생성된 xmlHttp를 사용합니다. 요청:

function doPost(url,data){//注意在传参数值的时候最好使用encodeURI处理一下，防止乱码
createxmlHttpRequest();
xmlHttp.open("POST",url);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(data);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
alert(&#39;success&#39;);
}else{
alert(&#39;fail&#39;);
}
}
}

온라인에서 본 jquery의 $.ajax 메서드를 시뮬레이트하는 패키지를 공유해 보겠습니다.

var createAjax=function(){
   var xhr=null;
   try{//IE系列浏览器
       xhr=new ActiveXObject("microsoft.xmlhttp");
   }catch(e1){
       try{//非IE浏览器
           xhr=new XMLHttpRequest();
       }catch(e2){
           window.alert("您的浏览器不支持ajax，请更换！");
       }
   }
   return xhr;
};
var ajax=function(conf){
   var type=conf.type;//type参数,可选 
   var url=conf.url;//url参数，必填 
   var data=conf.data;//data参数可选，只有在post请求时需要 
   var dataType=conf.dataType;//datatype参数可选 
   var success=conf.success;//回调函数可选
   if(type==null){//type参数可选，默认为get
       type="get";
   }
   if(dataType==null){//dataType参数可选，默认为text
       dataType="text";
   }
   var xhr=createAjax();
   xhr.open(type,url,true);
   if(type=="GET"||type=="get"){
       xhr.send(null);
   }else if(type=="POST"||type=="post"){
       xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
       xhr.send(data);
   }
   xhr.onreadystatechange=function(){
       if(xhr.readyState==4&&xhr.status==200){
           if(dataType=="text"||dataType=="TEXT"){
               if(success!=null){//普通文本
                   success(xhr.responseText);
               }
           }else if(dataType=="xml"||dataType=="XML"){
               if(success!=null){//接收xml文档
                   success(xhr.responseXML);
               }
           }else if(dataType=="json"||dataType=="JSON"){
               if(success!=null){//将json字符串转换为js对象
                   success(eval("("+xhr.responseText+")"));
               }
           }
       }
   };
};
该

이 메서드도 jquery의 $.ajax 메서드와 마찬가지로 사용하기 매우 간단하지만 매개변수가 많지 않습니다. 단지 몇 가지 기본적인 Ajax 기능을 구현했을 뿐입니다. 사용 방법은 다음과 같습니다.

ajax({
    type:"post",//post或者get，非必须
    url:"test.jsp",//必须的
    data:"name=dipoo&info=good",//非必须
    dataType:"json",//text/xml/json，非必须
    success:function(data){//回调函数，非必须
        alert(data.name);
    }
});

네이티브 ajax를 구현하기 위한 위의 javascript 방법을 배웠나요? 그것이 모두에게 도움이 되기를 바랍니다.

네이티브 Ajax를 구현하는 여러 JavaScript 메소드

관련 기사