ajax异步请求的get方法和post方法简单使用

GET请求方法：

function checkname(){
            //ajax方式校验用户名
            //A. 获得被校验的用户名信息
            var nm = document.getElementById('username').value;
            //对 & 、= 等符号需要进行特殊处理，否则产生歧义
            //encodeURIComponent()可以对特殊符号进行处理
            //处理后的信息是"%后边有两个十六进制数",其实所有浏览器通用识别的信息
            nm = encodeURIComponent(nm);
            //B. ajax带着该名字信息去服务器端校验
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){
                    alert(xhr.responseText);
                }
            }
            xhr.open('get','./04.php?name='+nm+'&age=23');
            xhr.send(null);
        }
        </script>

        <h2>ajax之get请求</h2>
        <p>用户名:<input type="text" id="username" onblur="checkname()" /></p>
        <p>密码:<input type="text" id="userpwd" /></p>

POST请求方法：

    <script type="text/javascript">
        function checkname(){
            //ajax方式校验用户名
            //A. 获得被校验的用户名信息
            var nm = document.getElementById('username').value;
            //对 & 、= 等符号需要进行特殊处理，否则产生歧义
            //encodeURIComponent()可以对特殊符号进行处理
            //处理后的信息是"%后边有两个十六进制数",其实所有浏览器通用识别的信息
            nm = encodeURIComponent(nm);
            //把需要传递的信息变为"请求字符串"格式，并设置为send()方法参数
            var info = "name="+nm+"&age=20";

            //B. ajax带着该名字信息去服务器端校验
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){
                    alert(xhr.responseText);
                }
            }
            //post方式传递数据是模拟form表单方式传递数据
            //form表单的数据实际是组织为xml格式传递给服务器端的
            xhr.open('post','./06.php?color=red');
            //设置http头协议，把传递的post
            //数据组织为xml格式
            //一下setRequestHeader方法必须在open方法后边调用
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
            xhr.send(info);
        }
    </script>


<h2>ajax之post请求</h2>
<p>用户名:<input type="text" id="username" onblur="checkname()" /></p>
<p>密码:<input type="text" id="userpwd" /></p>