深刻理解ajax系列第二篇——请求方式

时间 2019-11-12

标签深刻理解 ajax 系列第二请求方式栏目 Ajax 繁體版

原文原文链接

前面的话

　　在上一篇中，概要地介绍了XHR对象的使用。本文将详细介绍使用XHR对象发送请求的两种方式——GET和POST。下面将以实例的形式来详细说明javascript

GET

　　GET是最多见的请求类型，最经常使用于向服务器查询某些信息，它适用于当URL彻底指定请求资源，当请求对服务器没有任何反作用以及当服务器的响应是可缓存的状况下php

【数据发送】html

　　使用GET方式发送请求时，数据被追加到open()方法中URL的末尾前端

　　数据以问号开始，名和值之间用等号连接，名值对之间用和号(&)分隔。使用GET方式发送的数据经常被称为查询字符串java

xhr.open("get","example.php?name1=value1&name2=value2",true)

【编码】ajax

　　因为URL没法识别特殊字符，因此若是数据中包含特殊字符(如中文)，则须要使用encodeURIComponent()进行编码数据库

　　[注意]encodeURIComponent()只是6种编解码方法的一种，关于它们的详细信息移步至此json

var url = 'test.php' +'?name='  + encodeURIComponent("小火柴");
xhr.open('get',url,true);

　　上面的URL被编码为后端

test.php?name=%E5%B0%8F%E7%81%AB%E6%9F%B4

【编码函数】数组

　　下面这个函数能够辅助向现有URL的末尾添加查询字符串参数

function addURLParam(url,name,value){
    url += (url.indexOf("?") == -1 ? "?" : "&");
    url +=encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}

　　这个addURLParam()函数接受三个参数：要添加参数的URL、参数的名称和参数的值。这个函数首先检查URL是否包含问号(以肯定是否已经有参数存在)。若是没有，就添加一个问号；不然，就添加一个和号。而后，将参数名称和值进行编码，再添加到URL的末尾。最后返回添加参数以后的URL

var url = 'test.php';
url = addURLParam(url,'name','aaa');
url = addURLParam(url,'data','bbb');

xhr.open('get',url,true);

【缓存】　　

　　在GET请求中，为了不缓存的影响，能够向URL添加一个随机数或时间戳

xhr.open('get',url+'&'+Number(new Date()),true);
xhr.open('get',url+'&'+Math.random(),true);

【封装函数】

　　下面把使用get方式发送ajax请求的操做封装为get()函数

function get(url,data,callback){
    //建立xhr对象
    var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //异步接受响应
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                //实际操做
                callback && callback(xhr.responseText);
            }
        }
    }
    for(var key in data){
        url += (url.indexOf("?") == -1 ? "?" : "&");
        //编码特殊字符
        url += encodeURIComponent(key) + "=" + encodeURIComponent(data[key]);
    }
    //增长随机数，防止缓存    
    xhr.open('get',url+'&'+Number(new Date()),true);
    //发送请求
    xhr.send();
}

//前端
<script>
get('form.php',{
    a:1,
    b:2,
    c:3
},function(data){
    //'a:1;b:2;c:3;'
    console.log(data);
})

//后端
<?php
foreach($_GET as $key => $value){
    if(!empty($value)){
        echo $key. ":" .$value .";";        
    }
}
?>

POST

　　使用频率仅次于GET的是POST请求，一般用于服务器发送应该被保存的数据。"POST"方法经常使用于HTML表单。它在请求主体中包含额外数据且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器获得的响应可能不一样，同时不该该缓存使用这个方法的请求

　　POST请求应该把数据做为请求的主体提交，而GET请求传统上不是这样。POST请求的主体能够包含很是多的数据，并且格式不限。在open()方法第一个参数的位置传入"post"，就能够初始化一个POST请求

xhr.open("post","example.php",true);

【设置请求头】

　　发送POST请求的第二步就是向send()方法中传入某些数据。因为XHR最初的设计主要是为了处理XML，所以能够在此传入XML DOM文档，传入的文档经序列化以后将做为请求主体被提交到服务器。固然，也能够在此传入任何想发送到服务器的字符串

　　默认状况下，服务器对POST请求和提交Web表单的请求并不会一视同仁。所以，服务器端必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。不过，可使用XHR来模仿表单提交：首先将Content-Type头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

　　若是不设置Content-Type，发送给服务器的数据就不会出如今$_POSR超级全局变量中。这时要访问一样的数据，须借助$HTTP_RAW_POST_DATA

　　若是对相同的头调用屡次setReQuestHeader()，新值不会取代以前指定的值。相反，HTTP请求将包含这个头的多个副本或这个头将指定多个值

【发送主体】

　　接下来要以适当的格式建立一个字符串，并使用send()方法发送

　　POST数据的格式与查询字符串格式相同，名和值之间用等号连接，名值对之间用和号(&)分隔，以下所示

xhr.send('name="abc"&num=123');

【编码和缓存】

　　因为使用POST方式传递数据时，须要设置请求头"content-type"，这一步骤已经可以自动对特殊字符(如中文)进行编码，因此就再也不须要使用encodeURIComponent()方法了

　　POST请求主要用于数据提交，相同URL的重复POST请求从服务器获得的响应可能不一样，因此不该该缓存使用POST方法的请求

【性能】

　　GET对所发送信息的数量有限制，通常在2000个字符。与GET请求相比，POST请求消耗的资源会更多一些。从性能角度来看，以发送相同的数据计，GET请求的速度最多可POST请求的两倍

【封装函数】

　　下面把使用post方式发送ajax请求的操做封装为post()函数

function post(url,data,callback){
    //建立xhr对象
    var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //异步接受响应
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                //实际操做
                callback && callback(xhr.responseText);
            }
        }
    }
    var strData = '';
    for(var key in data){
        strData += '&' + key + "=" + data[key];
    }
    strData = strData.substring(1); 
    xhr.open('post',url,true);
    //设置请求头
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
    //发送请求
    xhr.send(strData);    
}

//前端
<script>
post('form.php',{
    a:1,
    b:2,
    c:3
},function(data){
    //'a:1;b:2;c:3;'
    console.log(data);
})
</script>

//后端
<?php
foreach($_POST as $key => $value){
    if(!empty($value)){
        echo $key. ":" .$value .";";        
    }
}
?>

函数封装

　　在get和post这两个段落中，分别对get和post这两种方式进行了函数封装。下面对它们进行整合，封装为一个可选择请求方式的ajax()函数，并储存为ajax.js文件

function ajax(obj){
    //method为ajax提交的方式，默认为'get'方法
    obj.method = obj.method || 'get';
    //建立xhr对象
    var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //异步接受响应
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                //callback为回调函数，若是不设置则无回调
                obj.callback && obj.callback(xhr.responseText);
            }
        }
    }
    //建立数据字符串，用来保存要提交的数据
    var strData = '';
    if(obj.method == 'post'){
        for(var key in obj.data){
            strData += '&' + key + "=" + obj.data[key];
        }    
        //去掉多余的'&'
        strData = strData.substring(1); 
        xhr.open('post',obj.url,true);
        //设置请求头
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        //发送请求
        xhr.send(strData);    
    }else{
        //若是是get方式，则对字符进行编成
        for(var key in obj.data){
            strData += '&' + encodeURIComponent(key) + "=" + encodeURIComponent(obj.data[key]);
        }    
        //去掉多余的'&'，并增长随机数，防止缓存
        strData = strData.substring(1) + '&'+Number(new Date());   
        xhr.open('get',obj.url+'?'+strData,true);
        //发送请求
        xhr.send();    
    }
}

<select name="year" id="year">
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
</select>
<select name="month" id="month">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select name="day" id="day">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<button id="btn">发送</button>
<span id="result"></span>
<script>
btn.onclick = function(){
    ajax({
        url:'form.php',
        data:{year:year.value,month:month.value,day:day.value},
        callback:function(data){
            result.innerHTML = data;
        }
    })    
}
</script>

<?php
echo '你选择的日期是' .$_GET['year'] .'年' .$_GET['month'] .'月'.$_GET['day'] .'日';
?>

实例

　　下面以一个实例来讲明GET和POST两种请求方式的应用

<!-- 前端页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{font-size: 30px;margin: 0;line-height: 1.5;}
select,button,input{font-size: 30px;line-height: 1.5;}
</style>
</head>
<body>
<h2>员工查询</h2>    
<label>请输入员工编号:</label>
<input type="text" id="keyword">
<button id="search">查询</button>
<p id="searchResult"></p>

<h2>员工建立</h2>
<form id="postForm">
    <label>请输入员工姓名：</label>
    <input type="text" name="name"><br>
    <label>请输入员工编号：</label>
    <input type="text" name="number"><br>
    <label>请输入员工性别：</label>
    <select name="sex">
    <option value="男">男</option>
    <option value="女">女</option>
    </select><br>
    <label>请输入员工职位：</label>
    <input type="text" name="job"><br>
    <button id="save" type="button">保存</button>    
</form>
<p id="createResult"></p>
<script>
/*get*/
//查询
var oSearch = document.getElementById('search');
//get方式添加数据
function addURLParam(url,name,value){
    url += (url.indexOf("?") == -1 ? "?" : "&");
    url +=encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}
oSearch.onclick = function(){
    //建立xhr对象
    var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //异步接受响应
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                //实际操做
                document.getElementById('searchResult').innerHTML = xhr.responseText;
            }else{
                alert('发生错误：' + xhr.status);
            }
        }
    }
    //发送请求
    var url = 'service.php';
    url = addURLParam(url,'number',document.getElementById('keyword').value);
    xhr.open('get',url,true);
    xhr.send();
}

/*post*/
//建立
var oSave = document.getElementById('save');
//post方式添加数据
function serialize(form){        
    var parts = [],field = null,i,len,j,optLen,option,optValue;
    for (i=0, len=form.elements.length; i < len; i++){
        field = form.elements[i];
        switch(field.type){
            case "select-one":
            case "select-multiple":
                if (field.name.length){
                    for (j=0, optLen = field.options.length; j < optLen; j++){
                        option = field.options[j];
                        if (option.selected){
                            optValue = "";
                            if (option.hasAttribute){
                                optValue = (option.hasAttribute("value") ? option.value : option.text);
                            } else {
                                optValue = (option.attributes["value"].specified ? option.value : option.text);
                            }
                            parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                        }
                    }
                }
                break;              
            case undefined:     //fieldset
            case "file":        //file input
            case "submit":      //submit button
            case "reset":       //reset button
            case "button":      //custom button
                break;                
            case "radio":       //radio button
            case "checkbox":    //checkbox
                if (!field.checked){
                    break;
                }
                /* falls through */
            default:
                //don't include form fields without names
                if (field.name.length){
                    parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
                }
        }
    }        
    return parts.join("&");
}
oSave.onclick = function(){
    //建立xhr对象
    var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    //异步接受响应
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                //实际操做
                document.getElementById('createResult').innerHTML = xhr.responseText;
            }else{
                alert('发生错误：' + xhr.status);
            }
        }
    }
    //发送请求
    xhr.open('post','service.php',true);
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
    xhr.send(serialize(document.getElementById('postForm')));
}
</script>
</body>
</html>

<!-- 后端页面 -->
<?php 

//用于过滤不安全的字符
function test_input($data) {
   $data = trim($data);
   $data = stripslashes($data);
   $data = htmlspecialchars($data);
   return $data;
}
//设置页面内容的html编码格式是utf-8，内容是纯文本
header("Content-Type:text/plain;charset=utf-8");
//header("Content-Type:application/json;charset=utf-8");
//header("Content-Type:text/xml;charset=utf-8");
//header("Content-Type:text/html;charset=utf-8");
//header("Content-Type:application/javascript;charset=utf-8");
//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array(
    array("name"=>"洪七","number"=>"101","sex"=>"男","job"=>'总经理'),
    array("name"=>"郭靖","number"=>"102","sex"=>"男","job"=>'开发工程师'),
    array("name"=>"黄蓉","number"=>"103","sex"=>"女","job"=>'产品经理')
    );

//判断若是是get请求，则进行搜索；若是是POST请求，则进行新建
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if($_SERVER["REQUEST_METHOD"] == "GET"){
    search();
}else if($_SERVER["REQUEST_METHOD"] == "POST"){
    create();
}

//经过员工编号搜索员工
function search(){
    //检查是否有员工编号的参数
    //isset检测变量是否设置；empty判断值是否为空
    if(!isset($_GET['number']) || empty($_GET['number'])){
        echo '参数错误';
        return;
    }
    global $staff;
    $number = test_input($_GET['number']);
    $result = '没有找到员工';

    //遍历$staff多维数组，查找key值为number的员工是否存在。若是存在，则修改返回结果
    foreach($staff as $value){
        if($value['number'] == $number){
            $result = "找到员工：员工编号为" .$value['number'] ."，员工姓名为" .$value['name'] ."，员工性别为" .$value['sex'] ."，员工职位为" .$value['job'];
            break;
        }
    }
    echo $result;
}

//建立员工
function create(){
    //判断信息是否填写彻底
    if(!isset($_POST['name']) || empty($_POST['name']) || 
       !isset($_POST['number']) || empty($_POST['number']) ||
       !isset($_POST['sex']) || empty($_POST['sex']) ||
       !isset($_POST['job']) || empty($_POST['job']) 
        ){
        echo "参数错误，员工信息填写不全";
        return;
    }

    echo "员工" .test_input($_POST['name']) ."信息保存成功!";
}
?>