AJAX基础笔记

最新推荐文章于 2024-04-12 17:46:04 发布

qq_43645678

最新推荐文章于 2024-04-12 17:46:04 发布

阅读量1.1k

点赞数 4

分类专栏： # 前端进阶文章标签： AJAX Ajax基础 Ajax笔记 Ajax面试题

本文链接：https://blog.csdn.net/qq_43645678/article/details/100701604

版权

前端进阶专栏收录该内容

12 篇文章 1 订阅

订阅专栏

AJAX基础笔记

1. 服务器软件安装
2. PHP 基础语法
- 1. PHP基础
3. GET 请求
4. POST 请求
5. jQuery 中的 Ajax
6. Ajax-XML
- 1. XML 格式
- 2. Ajax-XML 基本使用
7. Ajax-json
- 1. 什么是 json
- 2. Ajax-json 基本使用
8. Cookie 使用
9. hash 使用

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

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 基本使用

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 基本使用

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));

qq_43645678

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
AJAX基础笔记

AJAX 基础笔记
复制链接

扫一扫

专栏目录

AJAX基础笔记

AJAX基础笔记

1. 服务器软件安装

1. 基本概念

1. 什么是服务器？

2. 如何让电脑能够提供某种服务?

3. 如何让电脑提供管理网站的服务?

2. Web 服务器搭建

1. 什么是 WAMPServer 软件?

2. 如何搭建Apache服务器?

3. 测试访问

4. 如何修改默认端口号?

3. 服务器原理

1. 什么是C/S架构(Client/Server)

2. 什么是B/S架构(Browser/Server)

3. HTTP请求头

4. HTTP响应头

5. 状态码相关解释

2. PHP 基础语法

1. PHP基础

3. GET 请求

1. GET 请求处理

2. Ajax-GET 基本使用

1. 什么是Ajax

2. 使用步骤

3. Ajax-GET-IE兼容问题

1. IE5 和 IE6 使用 ActiveXObject

2. Ajax 在IE中的缓存问题

4. Ajax-GET 封装

1. 简单封装(IE兼容）

2. 完善封装(传递参数)

3. 完成封装(超时功能,中文转码)

4. POST 请求

1. POST 请求处理

2. POST 上传文件

3. Ajax-POST 基本使用

1. 基本结构

2. 完全封装

5. jQuery 中的 Ajax

1. 基本使用

2. jQuery 中的 Ajax 优点

1. 不区分 GET 和 POST 大小写

2. 可以打乱参数位置

6. Ajax-XML

1. XML 格式

2. Ajax-XML 基本使用

7. Ajax-json

1. 什么是 json

2. Ajax-json 基本使用

8. Cookie 使用

1. 什么是cookie

2. cookie作用:

3. cookie生命周期:

4. cookie注意点:

5. cookie作用范围:

6. cookie 添加方法封装

9. hash 使用