原生js使用ajax

AJAX 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容（默认是异步）

（1）使用ajax会用到XMLHttpRequest()对象

（2）然后使用open方法定义请求方法和请求地址，参数格式open（‘请求方法’，‘请求地址’），请求方法有两种，get和post

（3）然后使用send方法定义传输数据，参数格式send（传输数据）

其中请求后台后会得到响应结果，可以通过onreadystatechange状态事件来监测，其中readyState属性一共有四个状态码：

readyState==1【服务器连接已建立】

readyState==2【请求已接收】

readyState==3【请求处理中】

readyState==4【请求已完成，且响应已就绪】

 

下面是ajax用get的简单例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax-get</title>
    <script>
        function checkname() {
                var name=document.getElementById('username').value;
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function () {
                    if (xhr.readyState==4){
                        alert(xhr.responseText);
                    }
                };
                xhr.open('get','get.php?name='+name);
                xhr.send(null);
        }
    </script>
</head>
<body>
<div style="width: 400px;margin: 0 auto">
    <h1>输入内容后离开鼠标</h1>
    <p>用户名：<input type="text" id="username" onblur="checkname()"></p>
</div>
</body>
</html>

这是get.php代码

print_r($_GET);

　　

下面是ajax使用post的简单例子，这里需要另外加上setRequestHeader("content-type","application/x-www-form-urlencoded")，用来设置请求头信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax-post</title>
    <script>
        function checkname() {
            var nam=document.getElementById('username').value;
            var info="name="+nam;

            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function () {        //四个请求返回状态
                if (xhr.readyState==1){
                    console.log(1);
                }
                if (xhr.readyState==2){
                    console.log(2);
                }
                if (xhr.readyState==3){
                    console.log(3);
                }
                if (xhr.readyState==4){
                    console.log(4);
                    alert(xhr.responseText);
                }
            };
            xhr.open('post','post.php');
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
            xhr.send(info);
        }
    </script>
</head>
<body>
<div style="width: 400px;margin: 0 auto">
    <h1>输入内容后离开鼠标</h1>
    <p>用户名：<input type="text" id="username" onblur="checkname()"></p>
</div>
</body>
</html>

这是post.php代码

print_r($_POST);

　　

常说的ajax轮询

就是通过setInterval定时器每段时间执行一次，一直循环，函数使用例子为：

setInterval(执行函数,每次执行间隔时间)

而settimeout是在指定的时间后执行，但只执行一次，函数使用例子为：

settimeout(执行函数,距离执行间隔时间)