這篇文章主要介紹原生js中ajax訪問(wèn)的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。創(chuàng)新互聯(lián)公司推出秦淮免費(fèi)做網(wǎng)站回饋大家。

原生js中ajax訪問(wèn)的實(shí)例詳解

form表單中

登錄名:

失去光標(biāo)即觸發(fā)事件

function createXmlHttp() { 
    var xmlHttp; 
    try { // Firefox, Opera 8.0+, Safari 
      xmlHttp = new XMLHttpRequest(); 
    } 
    catch (e) { 
      try {// Internet Explorer 
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
      } 
      catch (e) { 
        try { 
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        catch (e) { } 
      } 
    } 

    return xmlHttp; 

  } 


  function infoCheck(){
    var ename=document.getElementById("ename").value;
    var password=document.getElementById("password").value;
    var pwdConfirm=document.getElementById("pwdConfirm").value;
    if(password!=pwdConfirm){
      alert("兩次密碼不統(tǒng)一");
      return ;
    }
    //驗(yàn)證登錄用戶(hù)名是否存在，類(lèi)似的可以驗(yàn)證手機(jī)號(hào)什么的
    // 1.創(chuàng)建異步對(duì)象 
    var xhr = createXmlHttp(); 
    xhr.onreadystatechange = function () { 
      if (xhr.readyState === 4 && xhr.status === 200) { 

      //  var data = new Function("return" + xhr.responseText)()//反序列化 
      var val=xhr.responseText;
        if(val==1){
          document.getElementById("ch").innerHTML="重新設(shè)置名字";
          document.getElementById("ename").focus();
          return;
        }else{
          document.getElementById("ch").innerHTML="";
        }
      } 
    } 

    xhr.open("post", 'LoginController/checkEname?ename='+escape(encodeURIComponent(ename)), true);  
    //發(fā)送 
    xhr.send(null); 
  }

在返回xhr.responseText數(shù)據(jù)時(shí)，中文有亂碼的體現(xiàn)，尚未解決，所以為了只管體現(xiàn)，我讓后臺(tái)返回的是“0”或者“1”來(lái)做判斷，je中createXmlHttp()這個(gè)方法以前看老師講過(guò)，但是還是不理解，目前仿照這寫(xiě)吧，功能實(shí)現(xiàn)了，這也是看到的最簡(jiǎn)單的版本實(shí)現(xiàn)原生態(tài)ajax，整個(gè)ajax訪問(wèn)流程還是比較好理解，提交訪問(wèn)數(shù)據(jù)的時(shí)候也存在亂碼問(wèn)題

web項(xiàng)目亂碼的問(wèn)題解決方案

    開(kāi)始的web項(xiàng)目整體以post方式提交，xml文件中加入以下編碼過(guò)濾器

  
    encodingFilter
    
        org.springframework.web.filter.CharacterEncodingFilter
      
    
     encoding
     utf-8
    
    
     forceEncoding
     true
    
   
   
    encodingFilter
    /*
   

   提交的時(shí)候
   剩下的 小部分的亂碼可以用編碼在解碼的方式獲得正確數(shù)據(jù)
   編碼:'LoginController/checkEname?ename='+escape(encodeURIComponent(ename))
   解碼:try {
      String str=URLDecoder.decode(ename, "utf-8");
       ename=URLDecoder.decode(ename, "utf-8");
    } catch (UnsupportedEncodingException e) {
      e.printStackTrace();
    }
    后面寫(xiě)入數(shù)據(jù)庫(kù)的時(shí)候亂碼問(wèn)題,我個(gè)人先創(chuàng)數(shù)據(jù)庫(kù)編碼是utf8,項(xiàng)目的編碼也是utf-8,避免其他的編碼問(wèn)題發(fā)生，在連接數(shù)據(jù)庫(kù)的URL也加上
url=jdbc:MySQL://localhost:3306/ssm?useUnicode=true&characterEncoding=utf8
目前碰到的亂碼問(wèn)題已經(jīng)解決（除開(kāi)ajax返回?cái)?shù)據(jù)亂碼，這個(gè)目前沒(méi)找到解決方案）

在來(lái)說(shuō)下原生js非空驗(yàn)證和button點(diǎn)擊提交功能

姓名:

登錄名: 

密碼:

密碼確定:




function submitInfo(){
    var name=document.getElementById("name").value;
    var ename=document.getElementById("ename").value;
    var password=document.getElementById("password").value;
    var pwdConfirm=document.getElementById("pwdConfirm").value;
    //針對(duì)空格和制表符的""能做到過(guò)濾
    name=name.replace(/(^\s*)|(\s*$)/g, "");
    ename=ename.replace(/(^\s*)|(\s*$)/g, "");
    password=password.replace(/(^\s*)|(\s*$)/g, "");
    pwdConfirm=pwdConfirm.replace(/(^\s*)|(\s*$)/g, "");
    if(name.length==0||name==" "||name.langth=="undefined") {
    //alert(name.langth);
    //alert(111);
    alert("姓名為必填項(xiàng)");
    return ;
    }
    if(ename.length==0||ename=="  "||ename.langth=="undefined") {
    alert("登錄名為必填項(xiàng)");
    return ;
    }
    if(password.length==0||password==" "||password.langth=="undefined") {
    alert("密碼為必填項(xiàng)");
    return;
    }
    if(password!=pwdConfirm){
      alert("兩次密碼不統(tǒng)一");
      return ;
    }
     document.getElementById("form").submit();
  }

后面繼續(xù)加瓦，完善，所有代碼在之前的基于注解spring4.，mybatis3.最簡(jiǎn)單的SSM整合 連接地址中，代碼持續(xù)更新

以上是“原生js中ajax訪問(wèn)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！