AJAX发送请求(POST方式)

AJAX请求

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术：

• 这里介绍一下AJAX发送请求（POST）
• POST比GET提交方式更安全，不会在网址中显示信息

首先我们看一下效果

常见场景：输入用户名和密码

在用户登录时，这是最常见的用法。接下来，我们看看代码吧。

首先，老规矩，咱们写一个简单的PHP服务

PHP部分

代码如下：

<?php
$stuName = $_REQUEST['stuName'];
$score = $_REQUEST['score'];

$output = $stuName.'-'.$score.'-'.uniqid();

// 数据库插入语句
echo $output;
?>

这里仅是一个demo，用于举例。

接着，我们看HTML部分。HTML的代码很简单，就不说了，直接上代码：

HTML部分

代码如下：

        用户: <input type="text" class="stuName"><br>
        密码: <input type="text" class="score"><br>
        <input type="button" value="保存" class="save">
        <p style="display: none">提示文字: <span id="ts"></span></p>

接下来我们进入AJAX部分。

• AJAX发送请求分为四个步骤，万变不离其宗：
  

1.建立连接

    var xhr;
    if (window.XMLHttpRequest){// 兼容 IE7+, Firefox, Chrome, Opera, Safari
        xhr = new XMLHttpRequest();
     }
    else {// 兼容 IE6, IE5
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }

2.绑定监听函数

        xhr.onreadystatechange = function(){
            //内容
        }

3.创建请求

        xhr.open("GET","01.txt",true)
        // xhr.open("请求方式","test1.txt",true);
        // GET：一般用于查询，所有的内容全部暴露地址栏中，2000来个字符
        // POST：一般用于存储或者修改服务器数据，请求体重，理论上网速好的情况下不限制大小
        // 第二个参数：请求的地址
        // 第三个参数：boolean     默认为true，不写也为true，表示异步，false表示同步

4.发送数据

        xhr.send(null);
        // xmlhttp.send();   发送数据
        // 有数据的时候写在send参数里，没有就不写或者'null'

与GET请求不同，POST请求必须设置请求头

• 注意：页面需要在服务器上打开，这里用的Apache服务器

AJAX部分

代码如下：

    <script>
            var stuName = document.getElementsByClassName("stuName")[0];
            var score = document.getElementsByClassName("score")[0];
            var save = document.getElementsByClassName("save")[0];
            var ts = document.getElementById("ts");

            save.addEventListener("click",function(){
                // 1.
                var xhr = null;
                if (window.XMLHttpRequest)
                  {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xhr=new XMLHttpRequest();
                  }
                else
                  {// code for IE6, IE5
                    xhr =new ActiveXObject("Microsoft.XMLHTTP");
                  }
                  // 2.绑定监听
                  xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        if(xhr.status === 200){
                            console.log('成功，响应的文本内容为' + xhr.responseText);
                            document.getElementsByTagName("p")[0].style.display = 'block';
                            ts.innerHTML = xhr.responseText;
                            stuName.value = "";
                            score.value = "";

                        }else{
                            alert("出错" + xhr.status);
                        }
                    }
                }
                // 3.
                xhr.open('POST','03.php',true);
                // 3.5 POST发送请求必须设置请求头
                    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                // application/x-www-form-urlencoded    表单字符类型
                // multiline/form-data      表单类型
                // application/json
                // text/xml

                // 4.
                // 有数据的时候写在send参数里，没有就不写或者'null'
                xhr.send("stuName=" + stuName.value + "&score=" + score.value);
            })

        </script>

很简单易懂吧~ 嘿嘿，不吝惜给我点个赞好不~