前端3DOM编程3——Ajax和服务端通信
1、通信基础 2、HTTP协议 3、Ajax 4、cookie
六、Ajax和服务端通信
1、通信基础
（1）Web服务器搭建
服务器是一台24h不断电、不关机，提供某种服务（文件、邮件、Web等）的超级电脑。为了让电脑提供某种服务，需要安装相应的软件，如让电脑提供管理网站的服务，安装Web服务器软件：Apache、IIS、Tomcat、Nginx、NodeJS等。
WAMPServer软件：Windows操作系统；Apache世界排名第一的服务器软件，特点是简单、速度快、性能稳定；MySQL开源免费的数据库软件，特点是体积小、速度快、使用成本低；PHP超文本预处理器，直接将代码嵌入HTML文档中执行。
打开软件，图标红->黄->绿
，服务器启动成功。打开浏览器输入127.0.0.1（服务器地址）查看显示内容。文件的名称和路径不要出现中文，否则会乱码。
（2）php
浏览器与服务器交换数据，服务器对请求进行处理，需编写后端相关的代码。
后端编写的代码不能直接在浏览器运行，只能放到服务器的环境下运行。把代码先放到服务器对应的文件夹，通过ip地址找到服务器对应的文件夹，再找到对应的文件，才能运行。默认情况下，WAMP服务器对应的文件夹d:\wamp64\www，通过127.0.0.1访问的是该文件夹下面的index.php文件，如果该文件不存在则显示目录。
1 [1] => 3 [2] => 5 )
echo "
";
echo $arr[1]; //3
$dict=array("name"=>"yc","age"=>"33"); //字典（对象）
print_r($dict); //Array ( [name] => yc [age] => 33 )
echo $dict["name"]; //yc
//分支循环语句：if/switch/?:/for/while
?>
（3）get、post请求
php的$_GET、$_POST全局变量，是一个数组，获取前端通过get、set请求提交的数据，通过name获取相应的value值。
get请求常用于向服务器查询某些信息，post请求用于向服务器发送应该被保存的数据。
|
|
get |
post |
| 相同点 |
均是将数据提交到远程服务器 |
|
| 数据存储位置 |
URL后面 |
请求头 |
| 数据大小 |
不超过2000字符 |
无限制 |
| 应用场景 |
非敏感数据和小数据 |
敏感数据和大数据 |
（4）文件上传
上传文件一般使用post提交，必须设置enctype="multipart/form-data"；使用$_FILES获取；文件默认上传至一个临时目录，过一定时间会自动删除，如果需要使用上传的文件，需要将其存储至另外的文件夹。
Array ( [name] => ab.png [type] => image/png [tmp_name] => D:\wamp64\tmp\phpBE38.tmp [error] => 0 [size] => 87288 ) )
//把上传的文件从临时路径存储至指定路径
//1.获取上传文件对应的字典
$fileInfo=$_FILES["upFile"];
//2.获取上传文件的名称
$fileName=$fileInfo["name"];
//3.获取上传文件保存的临时路径
$filePath=$fileInfo["tmp_name"];
//4.移动文件
move_uploaded_file($filePath,"./source/".$fileName);
?>
默认情况下，web服务器对上传文件的大小有限制，上传大文件需要修改web服务器配置，php.ini文件（WAMP安装目录）。在开发工具打开该文件，记事本容易发生编码问题，将下列参数修改后保存。左键点击图标、Restart重启服务器
| file_uploads=On |
是否允许上传文件，默认On |
| upload_max_filesize=2048M |
上传文件的最大限制 |
| post_max_size=2048M |
通过post提交的最多数据 |
| max_execution_time=3000 |
脚本最长的执行时间，单位s |
| max_input_time=3000 |
接收提交的数据的时间限制，单位s |
| memory_limit=2048M |
最大的内存消耗 |
2、HTTP协议
浏览器和服务器端进行通信，最常用的通信协议之一就是HTTP协议。
HTTP请求的过程：浏览器向服务器端发送一个包含命令和URL的HTTP请求报文，服务器端接收到请求报文后进行一系列的计算，向浏览器返回一个响应报文，浏览器接收到响应报文后将报文主体显示在浏览器端上。
HTTP报文分为请求报文和响应报文，均由三部分组成，分别是头行、头部和主体。
（1）请求报文格式
头行，HTTP方法、主机地址、HTTP版本。
头部由许多键值对构成。默认在发送XHR请求的同时，还会发送下列头部信息。
Accept：浏览器端可以接收的媒体类型；
Accept-Charset：浏览器可以显示的字符集；
Accept-Encoding：浏览器端接收媒体类型的编码方式；
Accept-Language：浏览器端可以接收的语言类型；
Cache-Control：缓存策略，no-cache不进行缓存；
Connection：浏览器与服务器之间连接的类型；
Cookie：当前页面设置的任何Cookie值，保存用户信息，访问相应网站会显示登录状态；
Host：发出请求的页面所在的域；
Referer：发出请求页面的URI，以便安全性判断；
User-Agent：浏览器的用户代理字符串（当前浏览器版本），打印客户端信息，服务器就能针对不同客户端进行处理。
GET方法请求体为空。
（2）响应报文格式
头行，HTTP协议的版本、HTTP状态码和HTTP状态码描述。
Expires：指定缓存有效时间，如果设置缓存策略为浏览器端进行缓存，可给Expires设置一个时间戳，当时间到达时间戳时，浏览器的缓存过期；
Server：指定服务器端的HTTP服务器使用的nginx服务器。
主体，访问页面时，主体是完整的html文件。
（3）常用HTTP方法
| 方法 |
描述 |
是否包含主体 |
| GET |
从服务器获取一份文档 |
否 |
| POST |
向服务器发送需要处理的数据 |
是 |
| PUT |
将请求的主体部分存储在服务器上 |
是 |
| DELETE |
从服务器上删除一份文档 |
否 |
| HEAD |
只从服务器获取文档的头部 |
否 |
| TRACE |
对可能经过代理服务器传送到服务器上去的报文进行追踪 |
否 |
| OPTIONS |
决定可以在服务器上执行哪些方法 |
否 |
（4）URL构成
protocol（协议）、hostname（主机名）
port（端口）、host（主机地址）、pathname（路径）、search（查询字符串）、hash（哈希，当前文档片段）->不必须
（5）HTTP版本
HTTP/0.9：1991年，HTTP的原型，有很多设计缺陷；
HTTP/1.0：很快取代HTTP/0.9，成为第一个广泛应用的版本；
HTTP/1.0+：添加持久的keep-alive连接、虚拟主机支持，以及代理连接支持，成为非官方的事实标准；
HTTP/1.1：校正了结构性缺陷，明确语义，引入重要的性能优化措施，删除不好特性。
（6）HTTP状态码
| 状态码 |
描述 |
原因短语 |
| 200 |
请求成功。一般用于GET和POST方法 |
OK |
| 301 |
资源移动。所请求资源已移动，浏览器自动跳转到新的URL |
Moved Permanently |
| 304 |
未修改。所请求资源未修改，浏览器读取缓存数据 |
Not Modified |
| 400 |
请求语法错误，服务器无法理解 |
Bad Request |
| 404 |
未找到资源，可以设置个性“404页面” |
Not Found |
| 500 |
服务器内部错误 |
Internal Server Error |
3、Ajax
Ajax（Asynchronous JavaScript and XML）用js去异步的获取XML作为数据交换的格式，不局限于XML，还有纯文本、html、JSON等格式。
Ajax核心是XMLHttpRequest对象（简称XHR），XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步（得到服务器响应之前，允许执行后续的js代码）方式从服务器取得更多信息，意味着用户单击后可以不必刷新页面也能取得新数据。
（1）XHR的用法
var xhr=new XMLHttpRequest();创建XHR对象。
xhr.open(method,url[,async=true]);open()向服务器端发起请求，只是启动一个请求以备发送。参数为请求类型、请求的URL（相对或绝对路径）、是否异步。
xhr.setRequestHeader(header,value);setRequestHeader()设置自定义的请求头部信息，参数头部字段的名称和头部字段的值，必须在调用open()方法之后且send()方法之前调用该方法。如表单编码header设置为Content-Type，value设置为application/x-www-form-urlencoded，带文件上传multipart/form-data。
xhr.send(null);send()发送请求，接收一个参数作为请求主体发送的数据。如果不需要通过请求主体发送数据，必须传入null。调用send()后，请求就会被分派到服务器。
多数情况下，发送异步请求，让js继续执行而不必等待响应。XHR对象的readyState属性表示请求或响应过程的当前活动阶段，只要该属性值发生改变，就会触发readystatechange事件，在调用open()之前指定onreadystatechange事件处理程序才能确保兼容性。
状态4收到响应后，响应的数据自动填充XHR对象的属性status和responseText。status表示HTTP状态，状态码为200表示请求成功，304表示请求资源未被修改，直接使用浏览器中缓存的版本。responseText保存作为响应主体被返回的文本（字符串形式）。
| readyState |
|
| 0 |
初始状态 |
| 1 |
open()方法开启请求，服务器连接已建立 |
| 2 |
send()向服务器端发送请求，请求已接收 |
| 3 |
请求处理中，服务器端返回请求数据，浏览器端接收数据 |
| 4 |
请求已完成，且相应已就绪 |
IE兼容，创建对象IE5,6使用ActiveXObject；保证每次访问地址不同。IE缓存问题，如果Ajax发送get请求，IE浏览器认为同一个URL只有一个结果。如果地址没有发生变化，不能拿到文件中的实时数据。
//myAjax.js
function serialize(data){//将对象转化为字符串，key=value&key=value;
if(!data) return '';
data.t=new Date().getTime();//在地址后面添加随机数保证每次访问地址不同
var pairs=[];
for(var name in data){
if(!data.hasOwnProperty(name)) continue;
if(typeof data[name]==='function') continue;
var value=data[name].toString();
name=encodeURIComponent(name);//避免提交了中文等
value=encodeURIComponent(value);
pairs.push(name+'='+value);
}
return pairs.join('&');
}
function ajax(type,url,obj,timeout,success,error){
//将对象转化为字符串
var str=serialize(obj);
//创建XHR对象
var xhr,timer;
if (window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
}else{//code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//监听状态，处理返回数据
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
clearInterval(timer);
if(xhr.status>=200&&xhr.status<300||xhr.status==304){
success(xhr);
}else{
error(xhr);
}
}
}
if(type==="get"){//get请求
xhr.open("get",url+"?"+str,true);
xhr.send(null);
}else{//post请求
xhr.open("post",url,true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(str);
}
//判断外界是否传入超时时间
if(timeout){
timer=setInterval(function(){
console.log("中断请求");
xhr.abort();//中断请求
clearInterval(timer);//清除定时器
},timeout);
}
}
（2）跨域资源访问
如果是相对于当前文档路径的相对路径，两个页面拥有相同的协议protocol、端口port和主机host，那么这两个页面就属于同一个源。不满足同源策略的资源访问，叫跨域资源访问。
W3C定义了CORS标准，实现跨域资源的访问，现代浏览器已经实现对CORS的支持。CORS通信与同源的Ajax通信代码没有差别，浏览器一旦发现Ajax请求跨源，就会自动添加头部。发送请求时，给它附加一个Origin头部，包含请求页面的源信息；如果服务器认为这个请求可以接受，则在Access-Control-Allow-Origin头部中返回相同的信息。
Origin:http://www.baidu.com
Access-Control-Allow-Origin:http://www.baidu.com
具体过程：浏览器捕获到A应用往S服务器发起的请求，根据请求的情况确定是否需要做一次预请求，来验证S服务器是否允许发送当前请求，需要的话，判断源信息和返回的信息匹配时，把具体的内容推送给服务端，服务端接收内容进行具体的响应。
Frame代理，A应用向S服务器取数据时，先请求代理文件，载入代理文件，A应用将发送的指令通过消息通信的方式传递给代理文件，代理文件验证A是否在预先配置的白名单中，如果在则发送请求到S服务器，否则异常退出。服务器返回数据至代理文件，代理文件通过消息机制将请求的结果返回给A应用。
参照CORS标准，支持各种请求方法；但需要在目标服务器放代理文件，首次发起请求需要载入代理文件，会有一定延时；低版本浏览器受限于消息通讯机制的限制，并发量大的请求返回时有较大延时。
JSONP（JSON with padding，填充式JSON），