深入了解ajax系列第四篇——请求实例

深入理解ajax系列第四篇——请求实例

前面的话

　　在使用ajax的过程中，常用的请求方式是GET和POST两种。本文将以实例的形式来详细说明这两种请求方式

GET

　　GET是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器。对于XHR而言，位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行

　　使用GET请求经常会发生的一个错误，就是查询字符串的格式有问题。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL的末尾；而且所有名-值对儿都必须由和号(&)分隔

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

　　下面这个函数可以辅助向现有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添加一个随机数或时间戳

　　[注意]因为相对于GET用于请求数据而言，POST是用于提交数据的，而提交数据是不存在缓存问题的

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

　　在GET请求中，如果发送中文或特殊字符，则需要通过encodeURIComponent()函数进行编码。而POST请求中，因为已经设置了"application/x-www-form-urlencoded"的请求头，默认会带有编码的功能，所以就不需要重新编码了

POST

　　使用频率仅次于GET的是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，也就是表单提交时的内容类型，其次是以适当的格式创建一个字符串。POST数据的格式与查询字符串格式相同

xhr.open('post','example.php',true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(data);

　　[注意]如果不设置Content-Type头部信息，那么发送给服务器的数据就不会出现在$_POSR超级全局变量中。这时候，要访问同样的数据，就必须借助$HTTP_RAW_POST_DATA

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

【表单序列化】

　　随着Ajax的出现，表单序列化已经成为一种常见需求。在javascript中，可以利用表单字段的type属性，连同name和value属性一起实现对表单的序列化。在编写代码之前，有必须先搞清楚在表单提交期间，浏览器是怎样将数据发送给服务器的

　　浏览器对表单字段的名称和值进行URL编码，使用和号(&)分隔；不发送禁用的表单字段；只发送勾选的复选框和单选按钮；不发送type为"reset"和"button"的按钮；多选选择框中的每个选中的值单独一个条目；在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括type为"image"的input元素；select元素的值，就是选中的option元素的value特性的值。如果option元素没有value特性，则是option元素的文本值

　　在表单序列化过程中，一般不包含任何按钮字段，因为结果字符串很可能是通过其他方式提交的。除此之外的其他上述规则都应该遵循

　　[注意]使用表单序列化与使用表单提交是有区别的。使用表单提交，响应会在新页面打开，且并不需要使用xhr对象。而ajax中的POST请求使用表单序列化，只是利用serialize()函数来构造数据。所以，这个表单中不需要提交按钮，否则会与表单提交相混淆

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("&");
}

实例

　　下面以一个实例来说明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']) ."信息保存成功!";
}
?>

深入了解ajax系列第四篇——请求实例

前面的话

GET

POST

实例

相关推荐