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>