前端训练营——JavaScript课件：二：ajax
2.1：基本概念
Ajax（Asynchronous Javascript And XML），即是异步的JavaScript和XML，Ajax其实就是浏览器与服务器之间的一种异步通信方式。它可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，在这种情况下，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据。
XML：是前后端数据通信时传输数据的一种格式，现在已经不怎么用了，现在比较常用的是 JSON
所以归纳上述的概念，Ajax就是在浏览器不重新加载网页的情况下，对页面的某部分进行更新。
以下是示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
<title>Title</title></head>
<body><!--Ajax是与服务器交换数据并在不重新加载整个页面的情况下更新部分页面的技术-->
<script> window.onload = function (){ let btn = document.querySelector("button");
btn.onclick = function (){
// 1.创建一个异步对象 let xhr; if(window.XMLHttpRequest)
{ // 兼容高级浏览器
xhr = new XMLHttpRequest(); } else
{ // 兼容IE5和IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} // 2.设置请求方式和请求地址,为了IE浏览器返回缓存，需要加上随机数使IE每次都返回最新数据
/*
* xmlhttp.open("method","url",async);
* method:请求的类型：GET或POST
* url:文件在服务器上的位置
* async:true（异步）或false（同步）
*/xhr.open("GET","resource/Ajax-GET.txt?t="+(new Date().getTime()),true);
// 3.发送请求
xhr.send(); // 4.监听状态的变化
xhr.onreadystatechange = function (){ /*
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求已完成，且响应已就绪 */
if (xhr.readyState === 4){ // 判断是否请求成功
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 340){// 5.处理返回的结果
alert(xhr.responseText); }
else{ console.log("请求失败");
} } } } }
</script><button>click</button></body></html>
image
2.2：会话技术
会话技术介绍： web会话可以简单理解为：用户打开一个浏览器，访问某一个web站点，在这个站点点击多个超链接，访问服务器多个web资源，然后关闭浏览器，整个过程称之为一个会话。
HTTP协议的特点是无状态/无连接，当一个浏览器连续多次请求同一个web服务器时，服务器是无法区分多个操作是否来自于同一个浏览器(用户)。会话技术就是通过HTTP协议想办法让服务器能够识别来自同一个浏览器的多次请求，从而方便浏览器(用户)在访问同一个网站的多次操作中，能够持续进行而不需要进行额外的身份验证。
会话技术分类：
cookie技术：cookie技术是在HTTP协议下，服务器或脚本可以维持客户工作站上信息的一种方式，cookie是由Web服务器保存在用户浏览器(客户端)上的小文本文件(HTTP协议响应头)，它可以包含有关用户的信息。无论何时用户链接到服务器，Web站点都可以访问cookie信息。
session技术：session直接翻译成中文比较困难，一般都翻译成时域，在计算机专业术语中，session是指一个终端用户与交互系统进行通信的时间间隔，通常指从注册进入系统到注销退出系统之间所经历的时间。以及如果需要的话，可能还有一定的操作空间。session技术是将数据保存到服务器端，无论何时用户链接到服务器，Web站点都可以访问session信息。session技术的实现是依赖cookie技术的。
两种会话技术的区别：
安全性方面：
session存储在服务器端，安全性高
cookie存储在浏览器端，安全性低
数据大小方面
session数据存储不限
cookie的数量和大小都有限制(一个网站最多20个cookie，长度最多4k)
可用数据类型
session 可以存复杂数据(自动序列化)
cookie只能存储简单数据，数值或字符串