AJAX基础笔记
1. 服务器软件安装
1. 基本概念
1. 什么是服务器?
- 服务器也是电脑,只不过是一台24小时不断电,不关机的电脑
- 根据提供的服务功能不同:文件服务器,邮件服务器,Web服务器等等;
- 简而言之,服务器其实就是一台“提供了某种功能”的超级电脑
2. 如何让电脑能够提供某种服务?
- 如何让电脑可以聊天?听歌?浏览网页?
- 想让电脑提供聊天服务,可以安装相应的聊天软件, 例如:QQ/旺旺…
- 想让电脑可以提供听歌服务,可以安装相应音乐软件, 例如:酷我/酷狗…
- 想让电脑可以提供浏览网页服务,可以安装相应浏览网页软件, 例如:谷歌/欧朋…
3. 如何让电脑提供管理网站的服务?
- 安装Web服务相关软件, 例如: Apache、IIS、Tomcat、Nginx、NodeJS等;
- 安装了Web服务软件的电脑, 我们称之为"Web服务器"
- Web服务器软件:Apache、IIS、Tomcat、Nginx、NodeJS等;
2. Web 服务器搭建
1. 什么是 WAMPServer 软件?
- W: Windows操作系统
- A: Apache 世界排名第一的服务器软件,特点是简单,速度快,性能稳定
- M: MySQL 开源免费的数据库软件,特点是体积小、速度快、使用成本低
- P: PHP 超文本预处理器,直接将代码嵌入HTML文档中执行, 特点是简单易学,容易上手
2. 如何搭建Apache服务器?
- 双击提供的安装包
- 点击Next
- 选择安装路径(注意:路径中不要出现中文)
- 勾选两个方框,点击next继续安装
- 点击install开始安装
- 安装完毕以后点击finish即可启动wamp
3. 测试访问
打开浏览器输入127.0.0.1查看显示的内容
4. 如何修改默认端口号?
- 在httpd.conf文件中搜索Listen , 改为你想要的数字即可
- 重启WAMP
3. 服务器原理
1. 什么是C/S架构(Client/Server)
- 对于C/S架构,最为常见的例子就是网络游戏,例如"魔兽世界"如果不联网无法使用,你在软件内所做的所有操作通过互联网能够传递到其他玩家身上
- 优点:性能较高/界面酷炫/用户体验好
- 缺点:更新软件/重量级
2. 什么是B/S架构(Browser/Server)
- 对于B/S架构, 现在所有的网站都是B/S架构,较为常见的例子有百度,淘宝,网易云音乐等等,所有只需要通过浏览器即可使用
- 优点:更新软件/轻量级/用户体验稍差
- 缺点:性能较低/兼容问题
3. HTTP请求头
属性 | 功能 | 例子 |
---|---|---|
User-Agent | 浏览器的具体类型 | User-Agent:Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/20100101 Firefox/17.0 |
Accept | 浏览器支持哪些数据类型 | Accept: text/html,application/xhtml+xml,application/xml;q=0.9 |
Accept-Charset | 浏览器采用的是哪种编码 | Accept-Charset: ISO-8859-1 |
Accept-Encoding | 浏览器支持解码的数据压缩格式 | Accept-Encoding: gzip, deflate |
Accept-Language | 浏览器的语言环境 | Accept-Language zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3 |
Host | 请求的主机名,允许多个域名同处一个IP地址,即虚拟主机 | Host:www.baidu.com |
Connection | 表示是否需要持久连接。Keep-Alive/close,HTTP1.1默认是持久连接,它可以利用持久连接的优点,当页面包含多个元素时(例如Applet,图片),显著地减少下载所需要的时间。要实现这一点,Servlet需要在应答中发送一个Content-Length头,最简单的实现方法是:先把内容写入ByteArrayOutputStream,然后在正式写出内容之前计算它的大小。 | Connection: Keep-Alive |
Content-Length | 表示请求消息正文的长度。对于POST请求来说Content-Length必须出现。 | |
Content-Type | WEB服务器告诉浏览器自己响应的对象的类型和字符集 | Content-Type: text/html; charset=‘gb2312’ |
Content-Encoding | WEB服务器表明自己使用了什么压缩方法(gzip,deflate)压缩响应中的对象 | Content-Encoding:gzip |
Content-Language | WEB服务器告诉浏览器自己响应的对象的语言 | |
Cookie | 最常用的请求头,浏览器每次都会将cookie发送到服务器上,允许服务器在客户端存储少量数据 | |
Referer | 包含一个URL,用户从该URL代表的页面出发访问当前请求的页面。服务器能知道你是从哪个页面过来的 | Referer: http://www.baidu.com/ |
4. HTTP响应头
属性 | 功能 | 例子 |
---|---|---|
Server | WEB 服务器表明自己是什么软件及版本等信息 | Server:Apache/2.0.61 (Unix) |
Accept-Ranges | WEB服务器表明自己是否接受获取其某个实体的一部分(比如文件的一部分)的请求。bytes:表示接受,none:表示不接受 | |
Content-Type | WEB 服务器告诉浏览器自己响应的对象的类型 | Content-Type:application/xml |
Etag | 就是一个对象(比如URL)的标志值,就一个对象而言,比如一个html文件,如果被修改了,其Etag也会别修改,所以,ETag的作用跟Last-Modified的作用差不多,主要供WEB服务器判断一个对象是否改变了。比如前一次请求某个html文件时,获得了其 ETag,当这次又请求这个文件时,浏览器就会把先前获得ETag值发送给WEB服务器,然后WEB服务器会把这个ETag跟该文件的当前ETag进行对比,然后就知道这个文件有没有改变了。 | |
Allow | 服务器支持哪些请求方法(如GET、POST等) | |
Location | 表示客户应当到哪里去提取文档,用于将接收端定位到资源的位置(URL)上。Location通常不是直接设置的,而是通过HttpServletResponse的sendRedirect方法,该方法同时设置状态代码为302。 | |
Content-Base | 解析主体中的相对URL时使用的基础URL | |
Content-Encoding | WEB服务器表明自己使用了什么压缩方法(gzip,deflate)压缩响应中的对象 | Content-Encoding:gzip |
Content-Language | WEB 服务器告诉浏览器理解主体时最适宜使用的自然语言。 | |
Content-Length | WEB服务器告诉浏览器自己响应的对象的长度或尺寸 | Content-Length: 26012 |
Content-Location | 资源实际所处的位置 | |
Content-MD5 | 主体的MD5校验和 | |
Content-Range | 实体头用于指定整个实体中的一部分的插入位置,他也指示了整个实体的长度。在服务器向客户返回一个部分响应,它必须描述响应覆盖的范围和整个实体长度。一般格式: Content-Range:bytes-unitSPfirst-byte-pos-last-byte-pos/entity-legth | 传送头500个字节次字段的形式:Content-Range:bytes0- 499/1234如果一个http消息包含此节(例如,对范围请求的响应或对一系列范围的重叠请求),Content-Range表示传送的范围,Content-Length表示实际传送的字节数。 |
Expires | WEB服务器表明该实体将在什么时候过期,对于过期了的对象,只有在跟WEB服务器验证了其有效性后,才能用来响应客户请求。是 HTTP/1.0 的头部 | Expires:Sat, 23 May 2009 10:02:12 GMT |
Last-Modified | WEB服务器认为对象的最后修改时间,比如文件的最后修改时间,动态页面的最后产生时间等等 | Last-Modified:Tue, 06 May 2008 02:42:43 GMT |
5. 状态码相关解释
2. PHP 基础语法
1. PHP基础
- PHP基础语法大部分和JS差不多
<?php
// 1.JS中有两种注释
// 1.1单行注释
// 1.2多行注释
//
/* */
// 2.JS中如何定义变量?
//var num = 10;
// PHP中如何定义变量?
$num = 10;
// 3.JS中如何打印内容?
//console.log();
// 注意点: 后端编写的代码不能直接运行, 只能放到服务器对应的文件夹下, 通过服务器运行
// 如何通过服务器运行: 通过ip地址找到服务器对应的文件夹, 然后再找到对应的文件运行
// PHP中如何打印内容?
echo $num;
// 4.JS中如何定义集合
// 4.1数组
// 4.2字典(对象)
//var arr = [1, 3, 5];
// arr[0];
// PHP中如何定义集合
$arr = array(1, 3, 5);
print_r($arr);
echo "<br>";
// PHP中取出数组中的内容
echo $arr[1];
// JS中如何定义对象
//var dict = {"name":"lnj", "age":"33"};
// dict["name"];
// PHP中如何定义对象
$dict = array("name"=>"lnj", "age"=>"33");
print_r($dict);
echo "<br>";
// PHP中取出对象中的内容
echo $dict["name"];
// 5.PHP中的分支循环语句
// if/switch/三目/for/while
$age = 16;
if($age >= 18){
echo "成年人";
}else{
echo "未成年人";
}
$res = ($age >= 18) ? "成年人" : "未成年人";
echo $res;
switch ($age){
case -1:
echo "非人类";
break;
case 18:
echo "成年人";
break;
default:
echo "未成年人";
break;
}
$arr = array(1, 3, 5);
for($i = 0; $i < count($arr); $i++){
echo $arr[$i];
echo "<br>";
}
$index = 0;
while ($index < count($arr)){
echo $arr[$index];
echo "<br>";
$index++;
}
?>
- 如何运行编写好的PHP文件?
- 因为PHP是服务端编程语言, 所以要在服务端运行
- php文件名称不能有中文
- php文件必须放到服务器文件夹下
- 通过ip找到服务器文件夹, 选中php文件访问
- 服务端返回浏览器的是什么?
- php程序的执行结果
- 注意: 执行结果中有中文, 必须在php文件顶部设置header(“content-type:text/html; charset=utf-8”);
- 浏览器访问http服务器,接收到响应时,会根据响应报文头的内容进行一些具体的操作,在php中,我们能够使用 header来设置这些内容
3. GET 请求
1. GET 请求处理
- 可以通过form标签的method属性指定发送请求的类型
- 如果是get请求会将提交的数据拼接到URL后面(?userName=lnj&userPwd=123456)
- 前端发送get请求
<form action="02-get-post.php" method="get">
<input type="text" name="userName"><br>
<input type="password" name="userPwd"><br>
<input type="submit" value="提交"><br>
</form>
- 后端获取get请求
<?php
print_r($_GET);
echo $_GET["userName"];
echo $_GET["userPwd"];
?>
2. Ajax-GET 基本使用
1. 什么是Ajax
- AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
- AJAX存在的意义就是发送异步请求
2. 使用步骤
- 创建一个异步对象
var xmlhttp=new XMLHttpRequest();
- 设置请求方式和请求地址
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
xmlhttp.open("GET", "04-ajax-get.php", true);
- 发送请求
xmlhttp.send();
- 监听状态的变化
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
xmlhttp.onreadystatechange = function (ev2) {
if(xmlhttp.readyState === 4){
// 判断是否请求成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// 5.处理返回的结果
console.log("接收到服务器返回的数据");
}else{
console.log("没有接收到服务器返回的数据");
}
}
}
- 处理返回的结果
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// 5.处理返回的结果
console.log("接收到服务器返回的数据");
}else{
console.log("没有接收到服务器返回的数据");
}
3. Ajax-GET-IE兼容问题
1. IE5 和 IE6 使用 ActiveXObject
- 为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。
- 如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2. Ajax 在IE中的缓存问题
- 在IE浏览器中, 如果通过Ajax发送GET请求, 那么IE浏览器认为同一个URL只有一个结果
xhr.open("GET","05-ajax-get.txt?t="+(new Date().getTime()),true);
4. Ajax-GET 封装
1. 简单封装(IE兼容)
function ajax(url,success, error) {
// 1.创建一个异步对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置请求方式和请求地址
xmlhttp.open("GET", url+"?"+(new Date().getTime()), true);
// 3.发送请求
xmlhttp.send();
// 4.监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
if(xmlhttp.readyState === 4){
// 判断是否请求成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// 5.处理返回的结果
// console.log("接收到服务器返回的数据");
success(xmlhttp);
}else{
// console.log("没有接收到服务器返回的数据");
error(xmlhttp);
}
}
}
}
2. 完善封装(传递参数)
function obj2str(obj) {
/*
{
"userName":"lnj",
"userPwd":"123456",
"t":"3712i947132987649813å2"
}
*/
obj = obj || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
obj.t = new Date().getTime();
var res = [];
for(var key in obj){
// 在URL中是不可以出现中文的, 如果出现了中文需要转码
// 可以调用encodeURIComponent方法
// URL中只可以出现字母/数字/下划线/ASCII码
res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key])); // [userName=lnj, userPwd=123456];
}
return res.join("&"); // userName=lnj&userPwd=123456
}
function ajax(url, obj,success, error) {
// 0.将对象转换为字符串
var str = obj2str(obj); // key=value&key=value;
// 1.创建一个异步对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置请求方式和请求地址
xmlhttp.open("GET", url+"?"+str, true);
// 3.发送请求
xmlhttp.send();
// 4.监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
if(xmlhttp.readyState === 4){
clearInterval(timer);
// 判断是否请求成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// 5.处理返回的结果
// console.log("接收到服务器返回的数据");
success(xmlhttp);
}else{
// console.log("没有接收到服务器返回的数据");
error(xmlhttp);
}
}
}
}
3. 完成封装(超时功能,中文转码)
function obj2str(obj) {
obj = obj || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
obj.t = new Date().getTime();
var res = [];
for(var key in obj){
// 在URL中是不可以出现中文的, 如果出现了中文需要转码
// 可以调用encodeURIComponent方法
// URL中只可以出现字母/数字/下划线/ASCII码
res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key])); // [userName=lnj, userPwd=123456];
}
return res.join("&"); // userName=lnj&userPwd=123456
}
function ajax(url, obj, timeout, success, error) {
// 0.将对象转换为字符串
var str = obj2str(obj); // key=value&key=value;
// 1.创建一个异步对象
var xmlhttp, timer;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置请求方式和请求地址
xmlhttp.open("GET", url+"?"+str, true);
// 3.发送请求
xmlhttp.send();
// 4.监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
if(xmlhttp.readyState === 4){
clearInterval(timer);
// 判断是否请求成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// 5.处理返回的结果
// console.log("接收到服务器返回的数据");
success(xmlhttp);
}else{
// console.log("没有接收到服务器返回的数据");
error(xmlhttp);
}
}
}
// 判断外界是否传入了超时时间
if(timeout){
timer = setInterval(function () {
console.log("中断请求");
xmlhttp.abort();
clearInterval(timer);
}, timeout);
}
}
4. POST 请求
1. POST 请求处理
- 如果是post请求会将提交的数据放到请求头中
- 前端发送post请求
<form action="02-get-post.php" method="post">
<input type="text" name="userName"><br>
<input type="password" name="userPwd"><br>
<input type="submit" value="提交"><br>
</form>
- 后端获取post请求
<?php
print_r($_POST);
echo $_POST["userName"];
echo $_POST["userPwd"];
?>
2. POST 上传文件
注意:
- 前端
- 上传文件一般使用POST提交
- 上传文件必须设置enctype=“multipart/form-data”
- 后端
- 上传的文件在PHP中可以通过$_FILES获取
- PHP中文件默认会上传到一个临时目录, 接收完毕之后会自动删除
默认情况下服务器对上传文件的大小是有限制的, 如果想修改上传文件的限制可以修改php.ini文件
属性 | 功能 |
---|---|
file_uploads = On | 是否允许上传文件 On/Off 默认是On |
upload_max_filesize = 2048M | 上传文件的最大限制 |
post_max_size = 2048M | 通过Post提交的最多数据 |
max_execution_time = 30000 | 脚本最长的执行时间 单位为秒 |
max_input_time = 30000 | 接收提交的数据的时间限制 单位为秒 |
memory_limit = 2048M | 最大的内存消耗 |
- 前端post上传文件
<form action="03-post-file.php" method="post" enctype="multipart/form-data">
<input type="file" name="upFile"><br>
<input type="submit" value="上传"><br>
</form>
- 后端post获取
<?php
//echo "post page";
//print_r($_POST);
//echo "<br>";
//print_r($_FILES);
// 1.获取上传文件对应的字典
$fileInfo = $_FILES["upFile"];
//print_r($fileInfo);
// 2.获取上传文件的名称
$fileName = $fileInfo["name"];
// 3.获取上传文件保存的临时路径
$filePath = $fileInfo["tmp_name"];
//echo $fileName;
//echo "<br>";
//echo $filePath;
// 4.移动文件
move_uploaded_file($filePath, "./source/".$fileName);
?>
3. Ajax-POST 基本使用
1. 基本结构
var xhr;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
// var xhr = new XMLHttpRequest();
xhr.open("POST","08-ajax-post.php",true);
// 注意点: 以下代码必须放到open和send之间
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("userName=zs&userPwd=321");
xhr.onreadystatechange = function (ev2) {
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300 ||
xhr.status === 304){
// alert("请求成功");
alert(xhr.responseText);
}else{
alert("请求失败");
}
}
}
2. 完全封装
function obj2str(data) {
data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
data.t = new Date().getTime();
var res = [];
for(var key in data){
res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key])); // [userName=lnj, userPwd=123456];
}
return res.join("&"); // userName=lnj&userPwd=123456
}
function ajax(option) {
// 0.将对象转换为字符串
var str = obj2str(option.data); // key=value&key=value;
// 1.创建一个异步对象
var xmlhttp, timer;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置请求方式和请求地址(判断请求方式为 GET 还是 POST)
if(option.type.toLowerCase() === "get"){
xmlhttp.open(option.type, option.url+"?"+str, true);
// 3.发送请求
xmlhttp.send();
}else{
xmlhttp.open(option.type, option.url,true);
// 注意点: 以下代码必须放到open和send之间
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(str);
}
// 4.监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
if(xmlhttp.readyState === 4){
clearInterval(timer);
// 判断是否请求成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// 5.处理返回的结果
// console.log("接收到服务器返回的数据");
option.success(xmlhttp);
}else{
// console.log("没有接收到服务器返回的数据");
option.error(xmlhttp);
}
}
}
// 判断外界是否传入了超时时间
if(option.timeout){
timer = setInterval(function () {
console.log("中断请求");
xmlhttp.abort();
clearInterval(timer);
}, option.timeout);
}
}
5. jQuery 中的 Ajax
1. 基本使用
$.ajax({
url: "09-ajax-jquery.php",
type: "get",
data: "userName=lnj&userPwd=654321",
success: function(msg){
alert(msg );
},
error: function (xhr) {
alert(xhr.status);
}
});
2. jQuery 中的 Ajax 优点
1. 不区分 GET 和 POST 大小写
toLowerCase() === "get"
2. 可以打乱参数位置
- 将参数归为一个对象
- 获取参数即向对象中取
function ajax(option)
ajax({
url:"04-ajax-get.php",
data:{
"userName":"lnj",
"userPwd":"123456"
},
timeout: 3000,
type:"post",
success: function (xhr) {
alert(xhr.responseText);
},
error: function (xhr) {
alert("请求失败");
}
});
6. Ajax-XML
1. XML 格式
<?xml version="1.0" encoding="UTF-8" ?>
<person> // 根节点(随便写)
// 数据
</person>
2. Ajax-XML 基本使用
js
ajax({
type:"get",
url:"11-ajax-xml.php",
success: function (xhr) {
// console.log(xhr.responseXML);
// console.log(document);
var res = xhr.responseXML;
console.log(res.querySelector("name").innerHTML);
console.log(res.querySelector("age").innerHTML);
},
error: function (xhr) {
console.log(xhr.status);
}
})
php
<?php
// 执行结果中有中文, 必须在php文件顶部设置
//header("content-type:text/html; charset=utf-8");
// 如果PHP中需要返回XML数据, 也必须在PHP文件顶部设置
header("content-type:text/xml; charset=utf-8");
echo file_get_contents("info.xml");
7. Ajax-json
1. 什么是 json
-
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
-
josn 语法规则
- JSON是一个标记符的序列。这套标记符包含六个构造字符、字符串、数字和三个字面名。
- JSON是一个序列化的对象或数组。
-
JSON 与 JS 对象的关系
-
JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。
var obj = {a: 'Hello', b: 'World'}; //这是一个对象,注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串,本质是一个字符串
- JSON 和 JS 对象互转
- 要实现从JSON字符串转换为JS对象,使用 JSON.parse() 方法:
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
- 要实现从JS对象转换为JSON字符串,使用 JSON.stringify() 方法:
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'
2. Ajax-json 基本使用
js
ajax({
type:"get",
url:"12-ajax-json.php",
success: function (xhr) {
// console.log(xhr.responseText);
var str = xhr.responseText;
/*
在低版本的IE中, 不可以使用原生的JSON.parse方法, 但是可以使用json2.js这个框架来兼容
*/
var obj = JSON.parse(str);
// console.log(obj);
console.log(obj.name);
console.log(obj.age);
},
error: function (xhr) {
console.log(xhr.status);
}
})
php
<?php
echo file_get_contents("12-ajax-json.txt");
json
{
"name":"lnj",
"age":"33"
}
8. Cookie 使用
1. 什么是cookie
-
cookie
- 会话跟踪技术(客户端)
- 指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密)。
-
session
- 会话跟踪技术(服务端)
- Session对象存储特定用户会话所需的属性及配置信息。
- 当用户在应用程序的Web页之间跳转时,存储在Session对象中的变量将不会丢失,而是在整个用户会话中一直存在下去。
2. cookie作用:
- 将网页中的数据保存到浏览器中
document.cookie = "name=lnj;";
document.cookie = "age=33;";
3. cookie生命周期:
- 默认情况下生命周期是一次会话(浏览器被关闭)
- 如果通过expires=设置了过期时间, 并且过期时间没有过期, 那么下次打开浏览器还是存在
- 如果通过expires=设置了过期时间, 并且过期时间已经过期了,那么会立即删除保存的数据
var date = new Date();
date.setDate(date.getDate() - 1);
document.cookie = "age=33;expires="+date.toGMTString()+";";
4. cookie注意点:
- cookie默认不会保存任何的数据
- cookie不能一次性保存多条数据, 要想保存多条数据,只能一条一条的设置
- cookie有大小和个数的限制
- 个数限制: 20~50
- 大小限制: 4KB左右
5. cookie作用范围:
- 同一个浏览器的同一个路径下访问(默认)
- 如果在同一个浏览器中, 默认情况下下一级路径就可以访问
- 如果在同一个浏览器中, 想让上一级目录也能访问保存的cookie, 那么需要添加一个path属性才可以;
document.cookie = "name=zs;path=/;domain=127.0.0.1;";
6. cookie 添加方法封装
window.onload = function (ev) {
function addCookie(key, value, day, path, domain) {
// 1.处理默认保存的路径
// if(!path){
// var index = window.location.pathname.lastIndexOf("/")
// var currentPath = window.location.pathname.slice(0, index);
// path = currentPath;
// }
var index = window.location.pathname.lastIndexOf("/")
var currentPath = window.location.pathname.slice(0, index);
path = path || currentPath;
// 2.处理默认保存的domain
domain = domain || document.domain;
// 3.处理默认的过期时间
if(!day){
document.cookie = key+"="+value+";path="+path+";domain="+domain+";";
}else{
var date = new Date();
date.setDate(date.getDate() + day);
document.cookie = key+"="+value+";expires="+date.toGMTString()+";path="+path+";domain="+domain+";";
}
}
function getCookie(key) {
// console.log(document.cookie);
var res = document.cookie.split(";");
// console.log(res);
for(var i = 0; i < res.length; i++){
// console.log(res[i]);
var temp = res[i].split("=");
// console.log(temp);
if(temp[0].trim() === key){
return temp[1];
}
}
}
console.log(getCookie("name"));
// 默认情况下只能删除默认路径中保存的cookie, 如果想删除指定路径保存的cookie, 那么必须在删除的时候指定路径才可以
function delCookie(key, path) {
addCookie(key, getCookie(key), -1, path);
}
delCookie("name", "/");
}
9. hash 使用
- 记录当前页码
window.location.hash = 3;
console.log(window.location.hash.substring(1));