前面的话

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

GET

  GET是最常见的请求类型,最常用于向服务器查询某些信息,它适用于当URL完全指定请求资源,当请求对服务器没有任何副作用以及当服务器的响应是可缓存的情况下

【数据发送】

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

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

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

【编码】

  由于URL无法识别特殊字符,所以如果数据中包含特殊字符(如中文),则需要使用encodeURIComponent()进行编码

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

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

  上面的URL被编码为

test.php?name=%E5%B0%8F%E7%%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']) ."信息保存成功!";
}
?>

深入理解ajax系列第四篇——请求实例的更多相关文章

  1. 深入理解ajax系列第四篇——FormData

    前面的话 现代Web应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2级为此定义了FormData类型.FormData为序列化表单以及创建与表单格式相同的数据提供了便利. ...

  2. 深入理解ajax系列第四篇

    前面的话 现代Web应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2级为此定义了FormData类型.FormData为序列化表单以及创建与表单格式相同的数据提供了便利. ...

  3. 深入理解ajax系列第八篇——表单提交

    前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...

  4. 深入理解ajax系列第八篇

    前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...

  5. 深入理解ajax系列第三篇——响应解码

    前面的话 我们接收到的响应主体类型可以是多种形式的,包括字符串String.ArrayBuffer对象.二进制Blob对象.JSON对象.javascirpt文件及表示XML文档的Document对象 ...

  6. 深入理解ajax系列第七篇——传递JSON

    前面的话 虽然ajax全称是asynchronous javascript and XML.但目前使用ajax技术时,传递JSON已经成为事实上的标准.因为相较于XML而言,JSON简单且方便.本文将 ...

  7. 深入理解ajax系列第七篇

    前面的话 虽然ajax全称是asynchronous javascript and XML.但目前使用ajax技术时,传递JSON已经成为事实上的标准.因为相较于XML而言,JSON简单且方便.本文将 ...

  8. 深入理解ajax系列第三篇

    前面的话 我们接收到的响应主体类型可以是多种形式的,包括字符串String.ArrayBuffer对象.二进制Blob对象.JSON对象.javascirpt文件及表示XML文档的Document对象 ...

  9. 深入理解ajax系列第三篇——头部信息

    前面的话 每个HTTP请求和响应都会带有相应的头部信息,其中有的对开发人员有用.XHR对象提供了操作头部信息的方法.本文将详细介绍HTTP的头部信息 默认信息 默认情况下,在发送XHR请求的同时,还会 ...

随机推荐

  1. bzoj2599

    2599: [IOI2011]Race Time Limit: 70 Sec  Memory Limit: 128 MBSubmit: 2476  Solved: 733[Submit][Status ...

  2. Sublime Text 3 安装 Emmet 插件

    首先安装 Package Control 1.通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台 2.粘贴以下代码后回车安装 import  urllib.r ...

  3. PHP常用函数(收集)

    <?php //===============================时间日期=============================== //y返回年最后两位,Y年四位数,m月份数字 ...

  4. 才一年,H5的发展就成这样了......

    关于H5的发展,分享几个最近看到的惊人数据和新闻: 1.截至2015,有80%的App将全部或部分基于HTML5.这意味着大部分App的内容都将是以网页的形式呈现,典型的例子包括微信.Facebook ...

  5. Xcode 设置文件生成时的模板

    1. 目的 设置 Xcode 生成的文件的格式,如姓名.公司等. 2. 步骤 2.1. 找到文件 step 1. 右键Xcode图标 step 2. 显示包内容 step 3. 找到目录 /Conte ...

  6. jquery $.getJSON()跨域请求

    以前总是没搞明白是怎么回事,现在是迫不得已,就仔细看了看说明文档,终于测试成功了,记下   1,同一域名下和其他的请求可以是一样的 js: 代码如下: var url="http://loc ...

  7. HDFS存储系统

    HDFS存储系统 一.基本概念 1.NameNode HDFS采用Master/Slave架构.namenode就是HDFS的Master架构.主要负责HDFS文件系统的管理工作,具体包括:名称空间( ...

  8. netcat工具的使用

    用途:网络管理工具. 可以读,写TCP或UDP 网络连接.简写为:nc 常见参数: -h  帮助信息 -l 坚挺模式 -n 指定IP地址 -p 指定端口号 -v 详细输出 1 客户端:很容易建立一个客 ...

  9. EasyUI datagrid 删除的时候无法正确找到重复记录row index的问题

    EasyUI datagrid 删除的时候无法正确找到重复记录row index的问题: 如果无法正确找到重复记录的row index,就需要进行注意添加的时候所进行的 操作:如果添加的时候就是添加的 ...

  10. node源码详解(六) —— 从server.listen 到事件循环

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource6 本博客同步在https://cnodejs.o ...