ajax

通常在写ajax时有两种写法，分别为get和post方式

当使用get方式发送和接收数据时

    <h1 id="h">get方式</h1>
    <input type="button" onclick="xml();" value="Get发送请求" />

    <script type="text/javascript">
    
        function xml(){

            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    document.getElementById("h").innerHTML = xhr.responseText;
                }
            };

            // 指定连接方式和地址----文件方式
            xhr.open('get', "test.php");
            // 发送请求
            xhr.send();
        }
    </script>

 

当使用post方式发送和接收数据时

    <h1 id="h">Post发送请求</h1>
    <input type="button" onclick="xml();" value="Post发送请求" />


    <script type="text/javascript">

        function xml(){

            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    document.getElementById("h").innerHTML = xhr.responseText;
                  
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open('POST', "test.php");
            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
            // 发送请求
            xhr.send('n1=1;n2=2;');
        }
    </script>

 

通常我们在用form表单来提交给ajax数据时，为了不让页面进行跳转，会给form标签添加onsubmit="return false"属性，

这时要想获取输入的值，需要在ajax方法中声明变量来获取input的value值，后台php文件中接数据的时则无法通过接input的name值来获得输入的内容，

则直接接收ajax方法中的变量名。

 

<h1 id="h" get方式</h1>

<input type="button" onclick="xml();" value="Get发送请求" />

<script type="text/javascript">

 

function xml(){

var xhr = null;

if(XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

// 定义回调函数

xhr.onreadystatechange = function(){

if(xhr.readyState == 4){

// 已经接收到全部响应数据，执行以下操作

document.getElementById("h") = xhr.responseText;

}

};

// 指定连接方式和地址----文件方式

xhr.open('get', "test.php");

// 发送请求

xhr.send();

}

</script>