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结构如下

用户名：



密码：
验证用户名

然后用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代码：

学生姓名：

学生成绩：

注册

<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; ?>

转载于:https://www.cnblogs.com/xuhanghang/p/10439476.html