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;


?>