【javascript】脚本操作HTTP请求技术Ajax-2(POST请求)

接下来我们来介绍一下Ajax的第二种请求方式,post请求。一般情况下,浏览器发送的请求如果要进行更新修改某一数据的时候,我们会采用post请求方式而不是get请求.因为这样会有几个好处。

1. 请求的长度不会有限制。一般情况下get请求方式具有字符限制(不同浏览器的标准也有所不同,服务器也有所不同)。
2. 在进行post请求的时候,浏览器会为我们的数执行urlEncodeComponent()方法,将一些特殊字符如空格进行转义。
3. 不会产生缓存,每一次post请求都是独立的。

---

当然这样也会带来一些问题。因此,具体情况下使用哪种请求方式是由需求决定的。
在使用post请求,同样的和之前的例子一样需要创建一个XMLHttpRequest的对象。为了方便我们将对象进行了一次处理。与之前的例子一样，代码如下：

function  createXHR(){
    if( typeof  XMLHttpRequest != "undefined"){
        return  new XMLHttpRequest();
    }
    if(typeof ActiveXobject == "undefined"){
        throw new Error(" not support ");
    }
    //判断是否为 IE6或IE6以下版本
    if(typeof arguments.callee.activeString != "string"){
        var versions = ["MSXML2.XMLHttp.6.0",
                   "MSXML2.XMLHttp3.0","MSXML2.XMLHttp"],
            i,len;

        for (var i = 0;i<versions.length;i++) {
            try{ 
                 //尝试使用不同版本的插件新建对象
                 new ActiveXobject(versions[i]);
                 //将合适的版本保存至 activeString属性中
                 //arguments.callee代表的是调用函数,这里指的是createXHR
                 arguments.callee.activeString=versions[i];
                 break;
            }catch(ex){
                //  no action
            }
        };
    }
    //返回实例对象
    return  new ActiveXobject(arguments.callee.activeString);
}

于是我们创建一个XMLHttpRequest对象

var request = createXHR(); // 函数返回XMLHttpRequest对象

---

简单的post请求
post请求的方式与get请求有许多地方还是类似的,不过在请求头部中会添加一个内容,描述请求方法是以html表单的形式传递。

function postData(url,data,callback){

    var xhr = createXHR();
    xhr.open("POST",url);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.onreadystatechange =  function(){

        if(xhr.readyState === 4 && (xhr.status >= 200 || xhr.status <=304 ) ){ //
            callback(xhr);
        }
    }
    xhr.send(encodeFormData(data)); //发送表单 编码数据
}

接下来我们来解释一下这个函数

 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置请求头部

这个操作在我们浏览器是可以看到的。使用浏览器调试工具F12,打开网络后,我们经常会看到请求头部和响应头部。

在Content-Type 这里 就是我们设置的请求内容的类型了。这样是为了让服务器认识到是何种请求格式,以及如何对数据进行处理。

这里的发送数据不在是将数据附加在url地址,而是直接使用的是

xhr.send(encodeFormData(data)); //encodeFormData 为上一个例子的函数,主要是将对象属性转为请求字符串格式。如 name1=value1&name2=value2

这里基本上可以看到了get请求与post请求的区别。

1. 请求类型 Content-Type 不同。
2. 传递数据的方法不一样。get请求附加在url地址栏,而post请求则放在xhr.send();方法内。

---

接下来我们用一个小小的案例,来让我们的请求生效。

var url = "http://localhost:3000/demo/post.php";
var data = { q : "normal post request", name : "user" };
postData(url,data,function(res){
    if(res.getResponseHeader("Content-Type") == "application/json"){
        //判断响应头部是否为json类型
        console.log(JSON.prase(res.responseText));
    }
}

这样我们就缺少一个服务端的代码,这时候我们使用原生php来接受这个请求。

<?php
header("Content-Type:application/json"); //设置响应头部
$q= isset($_POST['q'])?$_POST['q'] : "";
$time =date("Y-m-d H:i:s"); // 日期字符串
$res = array("q"=>$q, "time"=>$time);
echo json_encode($res);
?>

得到的结果如上图所示,我们发送过去的参数确实被服务端接受,服务端并且回传给浏览器。

简单的例子往往可以让人明白许多技术上的问题。善于把复杂的问题弄得简单是我追求的目标。