ajax-如何發送ajax請求

什么是ajax？

   Asynchronous JavaScript and XML

   也就是異步的JavaScript和XML

ajax的使用場景

   前台獲取數據

　表單失焦驗證

我們需要了解post和get區別

   get參數是在地址欄中，大小2000個字符左右
   post參數是在請求體中，網速良好，理論上是無限大的

如何構建一個完整的ajax請求

注意：一般情況下只能在有服務的環境下發送請求

　　　ajax是局部刷新

1.創建ajax對象

 var xhr = new XMLHttpRequest();    新版本的瀏覽器

 var xhr = new ActiveXObject("Microsoft.XMLHTTP");   老版本的IE

兼容寫法：

        var xhr;
        if(window.XMLHttpRequest){    //常規，如果有，直接使用
            xhr = new XMLHttpRequest();
        }else{   //如果沒有，老版本IE
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }        

這里我們需要先了解狀態碼和回應碼

xhr.status可獲取響應碼

xhr.readyState可獲取狀態碼

xhr.responseText可以獲取響應文本

狀態碼：

 •0: 請求未初始化  

 •1: 服務器連接已建立  

 •2: 請求已接收   

 •3: 請求處理中  

 •4: 請求已完成，且響應已就緒

響應碼：   

 1xx   信息類  

 2xx   成功     200   

 3xx   重定向    304   

 4xx   客戶端錯誤   404   

 5xx   服務端錯誤  

2.綁定監聽函數
xhr.onreadystatechange = function(){
   當xhr.readyState == 4 || xhr.status == 200時

　可以獲取xhr.responseText響應文本

　然后通過響應文本來執行要求
  }

3.創建請求的消息，連接服務器      此時狀態碼由0變成了1

xhr.open('提交方式：get或post','鏈接地址',bool值);

boll為true異步；false同步

4.發送請求

xhr.send(null);  

如果是post請求，就放post參數，如果是get請求，發送null就行了

這樣就是一個完整的ajax請求了

實例：

使用ajax發送get請求

html結構如下

用戶名：<input type="text" id="username">
    <span id="ts"></span>
    <br>
    密碼：<input type="text">
    <button id="btn">驗證用戶名</button>
    <script>
        var username = document.getElementById("username");
        var btn = document.getElementById("btn");
        var ts= document.getElementById("ts");

        // 點擊btn發送ajax請求
        btn.onclick = function(){
            // 1.創建xhr
            var xhr;
            if(window.XMLHttpRequest){    //常規，如果有，直接使用
                xhr = new XMLHttpRequest();
            }else{   //如果沒有，老版本IE
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 2.綁定監聽函數
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        console.log(xhr.responseText)
                        if(xhr.responseText == 1){
                            ts.innerHTML = "該用戶名已經被注冊"
                        }else if(xhr.responseText == 0){
                            ts.innerHTML = "該用戶名可以使用"
                        }


                    }
                }
            }
            // 3.建立連接
            xhr.open("GET","08.php?uname=" + username.value,true);
            // 正則驗證
            // 4.發送請求
            xhr.send(null)
        }

    </script>

然后用PHP模擬一個數據庫

<?php
    $db = ['jack','mack','mary'];   //模擬數據庫
    $username = $_GET['uname'];  //表示從前台傳遞過來的參數

    $flag = false;
    foreach($db as $n){
        if($n === $username){
            $flag = true;
            break;
        }
    }

    if($flag){
        echo "1";
    }else{
        echo "0";
    }

?>

使用ajax發送post請求
html代碼：

 

學生姓名：<input type="text" id="uname"><br>
    學生成績：<input type="text" id="score"><br>
    <button id="btn">注冊</button>    

    <p id="p01"></p>
    <script>
        function get_id(id){
            return document.getElementById(id);
        }
        var uname = get_id("uname");
        var score = get_id("score");
        var btn = get_id("btn");
        var p01 = get_id("p01");

        btn.onclick = function(){// 1.
                var xhr;
                if(window.XMLHttpRequest){    //常規，如果有，直接使用
                    xhr = new XMLHttpRequest();
                }else{   //如果沒有，老版本IE
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                // 2.
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        if (xhr.status == 200) {
                            p01.innerHTML = xhr.responseText;
                        }
                }
                // 3.
                xhr.open('POST','http://localhost:8888/0220ajax/09.php',true);
                // 3.5  在發送post請求的時候，你得告訴服務器你發送的是一個什么
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                // 4.發送
                xhr.send('strName=' + uname.value + '&strScore=' + score.value);

            }
        }
    </script>

php代碼：

<?php
    $uName = $_POST['strName'];
    $uScore = $_POST['strScore'];
    //此時，php已經拿到了學生的名字和分數
    // 存到數據庫

    $output = $uName.'-'.$uScore.'-'.uniqid();


    echo $output;


?>