原生Ajax

  1. <!DOCTYPE html>
  2. <html lang='zh'>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <link rel='stylesheet' href=''>
  7.     <script>
  8.         window.onload = function () {
  9.             var btn = document.getElementById('btn');
  10.             btn.onclick = function(){
  12.                 //第一步:创建对象
  13.                 var xhr = null;
  15.                 var username = document.getElementById('username').value;
  16.                 var password = document.getElementById('password').value;
  18.                 if (window.XMLHttpRequest) {//标准浏览器
  19.                     xhr = new XMLHttpRequest();
  20.                 } else {//兼容IE浏览器
  21.                     xhr = new ActiveXObject('Microsoft.XMLHTTP');
  22.                 }
  23.                 //第二步:配置请求的行为
  24.                 var url = 'form.php';
  25.                 xhr.open('post', url, true);//('发送类型','地址',异(true)/同(false)步)
  27.                 //第三步:执行请求
  28.                 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  29.                 var val = 'username='+username+"&password="+password;
  30.                 xhr.send(val);
  33.                 //第四部:指定回调函数
  34.                 xhr.onreadystatechange = function(){
  35.                     /*
  36.                         readyStatey有5个参数:
  37.                             0:  对象创建完成
  38.                             1:  配置完成
  39.                             2:  放送完成
  40.                             3:  返回数据
  41.                             4:  数据可使用
  42.                     */
  43.                     if (xhr.readyState == 4) {
  44.                         /*
  45.                             status常见值
  46.                             200:  请求成功
  47.                             404:  找不到页面
  48.                             503:  服务端错误
  49.                         */
  50.                         if (xhr.status == 200) {
  51.                             var data0 = xhr.responseText;//JSON
  52.                             console.log(data0);
  53.                             //var data1 == xhr.responseXML;//XML
  54.                         }
  55.                     }
  57.                 }
  58.             }
  60.         }
  61.     </script>
  62.     <title>原生Ajax</title>
  63. </head>
  65. <body>
  66.     <div>
  67.         <form method="post">
  68.             账号:<input type="text" name="username" id="username" value=""><br>
  69.             密码:<input type="password" name="password" id="password" value=""><br>
  70.             <input type="button" value="提交" id="btn">
  71.         </form>
  72.     </div>
  74. </body>
  76. </html>

JQuery