ajax相关问题

ajax完成前后端交互，可以用原生ajax实现，也可以用Jquery ajax实现。
之前自己用ajax请求一个html页面，有个大佬说ajax主要实现的是请求JSON文件。总之，也就是那样写的。

---

原生 Ajax
原生Ajax主要分为
1. 建立xhr对象
2. open()
3. send()
4. 接收数据

 在这里主要就是get和post的问题了,当使用get方法时,没有请求主体,send()的参数要么是null，要么没有参数.；当使用post请求时，send()参数是要发送给服务器的数据，在这里特别注意要设置content-Type，否则php用$_POST['']不能取到值.

Jquery Ajax
jquery ajax可以向后台传输对象和数组，dataType为服务器发送的数据格式，分为script,html,text,json,jsonp(具体的可以参考Jquery Ajax中文文档）;data为传入服务器的数据，当传入的是数组时，必须要设置traditional=true；同时还具备complete,success,error方法。

这是我写的关于ajax的例子，大家可以参考下。

html代码

<meta charset="UTF-8">
<title>ajax</title>
<style type="text/css">
    .font{
        font-size: 0.35rem;

    }
    input{
            width: 7rem;
            height: 0.6rem;
            border: 1px #735b5b solid;
    }
    #submit{

        height: 1.6rem;
        background: #6565d4;
    }
</style>
<script>
!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);  flex(100, 1);
</script>

<form name="form1" method="post" id="form">
    <div class="font" >用户名:</div>
    <input type="text" name="user" id="user" >
    <br />
    <div class="font" >密码:</div>
    <input type="password" name="password" id="pass">
    <input type="submit" id="submit">
</form>

<script src="../jquery-3.1.1.min.js"></script>
<script src="ajax1.js" type="text/javascript"></script>

JS代码

    window.onload=function(){
    //JQuery ajax实现
  /* $("#submit").click(function(){

       $.ajax({
                 url : 'ajax1.php',
                 async : true,
                 method : 'POST',

                 data: 
                    {'user':$("#user").val(),
                    'password':$("#pass").val()
                  },



                 dataType:'text',
                 //ContentType : 'text/json',
                 success : function(date,status,jqxhr){
                    alert(typeof date);

                       alert(status+date);

                 },

                 error:function(ele,stateText,state){
                     alert("登录出错了哦，"+stateText+state);
                 }
       });


   });*/
   //原生JS实现
   var osub   =    document.getElementById("submit");
   var oinput    =    document.getElementsByTagName("input");
   var obj    =    {
         user  :  oinput[0].value,
         password  :  oinput[1].value
   }

   function createXhr(){
       if(typeof XMLHttpRequest != 'undefined'){

         return new XMLHttpRequest();  

       }else if(typeof ActiveXObject != 'undefined'){

          return new ActiiveX();

       }else{

           throw new Error("No XHR object available.");
       }
   }
   osub.onclick    =    function(){
      var xhr    =    createXhr();


      xhr.onreadystatechange     =    function(){
       if(xhr.readyState    ==    4){
           if(xhr.status >= 200  &&  xhr.status < 300 ||  xhr.status  ==  304){
               alert("Success!您的用户名"+xhr.responseText+"已经注册.");
           }else{
              alert("Request timeout.");
           }

       }

   }
   xhr.open('GET','ajax1.php',true);
   xhr.send(null);
}

}