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. 状态码相关解释

http://baike.baidu.com/link?url=LarF3FUBzX-IU1BMZbwbxaC8oJPUSGOj3seQRNVSVbZ2F9A6BiE-Je0sxFwsQK8dFJkKH6VP_ghpK66p8C2Zvkdl9nABXBR8mIqZGJj_D59q6NJQwmw3GqjIx2bzAsEG

2. PHP 基础语法

1. PHP基础

1. PHP基础语法大部分和JS差不多

// 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 "
";
// PHP中取出数组中的内容
echo $arr[1];

// JS中如何定义对象
//var dict = {"name":"lnj", "age":"33"};
// dict["name"];

// PHP中如何定义对象
$dict = array("name"=>"lnj", "age"=>"33");
print_r($dict);
echo  "
";
// 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 "
";
}

$index = 0;
while ($index < count($arr)){
    echo $arr[$index];
    echo "
";
    $index++;
}
?>

2. 如何运行编写好的PHP文件?

• 因为PHP是服务端编程语言, 所以要在服务端运行
• php文件名称不能有中文
• php文件必须放到服务器文件夹下
• 通过ip找到服务器文件夹, 选中php文件访问

3. 服务端返回浏览器的是什么?

• php程序的执行结果
• 注意: 执行结果中有中文, 必须在php文件顶部设置header(“content-type:text/html; charset=utf-8”);
• 浏览器访问http服务器,接收到响应时,会根据响应报文头的内容进行一些具体的操作,在php中,我们能够使用 header来设置这些内容

3. GET 请求

1. GET 请求处理

1. 可以通过form标签的method属性指定发送请求的类型
2. 如果是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请求

	print_r($_GET);
	echo $_GET["userName"];
	echo $_GET["userPwd"];
?>

2. Ajax-GET 基本使用

1. 什么是Ajax

• AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
• AJAX存在的意义就是发送异步请求

2. 使用步骤

1. 创建一个异步对象

var xmlhttp=new XMLHttpRequest();

2. 设置请求方式和请求地址

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

xmlhttp.open("GET", "04-ajax-get.php", true);

3. 发送请求

xmlhttp.send();

4. 监听状态的变化

• 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("没有接收到服务器返回的数据");
        }
    }
}

5. 处理返回的结果

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 请求处理

1. 如果是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请求

	print_r($_POST);
	echo $_POST["userName"];
	echo $_POST["userPwd"];
?>

2. POST 上传文件

注意:

• 前端

1. 上传文件一般使用POST提交
2. 上传文件必须设置enctype=“multipart/form-data”

• 后端

1. 上传的文件在PHP中可以通过$_FILES获取
2. 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获取

//echo "post page";
//print_r($_POST);
//echo "
";
//print_r($_FILES);

// 1.获取上传文件对应的字典
$fileInfo = $_FILES["upFile"];
//print_r($fileInfo);
// 2.获取上传文件的名称
$fileName = $fileInfo["name"];
// 3.获取上传文件保存的临时路径
$filePath = $fileInfo["tmp_name"];

//echo $fileName;
//echo "
";
//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 格式

<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文件顶部设置
//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

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

经典面试题

1. 什么是Ajax，为什么要使用Ajax（请谈一下你对Ajax的认识）

• 什么是ajax：

  • AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。

• Ajax包含下列技术：

  • 基于web标准（standards-basedpresentation）XHTML+CSS的表示；
  • 使用 DOM（Document ObjectModel）进行动态显示及交互；
  • 使用 XML 和 XSLT 进行数据交换及相关操作；
  • 使用 XMLHttpRequest 进行异步数据查询、检索；
  • 使用 JavaScript 将所有的东西绑定在一起。

2. 为什么要用Ajax

• Ajax应用程序的优势在于：
  • 通过异步模式，提升了用户体验
  • 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
  • Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

3. Ajax最大的特点是什么

• Ajax可以实现动态不刷新（局部刷新）
• 能在不更新整个页面的前提下维护数据。
• 这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

4. 请谈一下Ajax的优点？

• 通过异步模式，提升了用户体验
• 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
• Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
• Ajax可以实现动态不刷新（局部刷新）

5. 原生JS写Ajax请求有几个步骤？分别是什么？

• 创建一个异步对象

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("没有接收到服务器返回的数据");
}

6. GET请求和POST请求的异同

• 相同点:
  都是将数据提交到远程服务器
• 不同点:
  • 提交数据存储的位置不同
    • GET请求会将数据放到URL后面
    • POST请求会将数据放到请求头中
  • 提交数据大小限制不同
    • GET请求对数据有大小限制
    • POST请求对数据没有大小限制

7. GET/POST请求应用场景

• GET请求用于提交非敏感数据和小数据
• POST请求用于提交敏感数据和大数据

8. AJAX使用了哪些技术？

• HTML / XHTML和CSS - 这些技术用于显示内容和样式。
• DOM - 用于动态显示和与数据交互。
• XML - 用于与服务器之间传送数据
• XMLHttpRequest - 用于客户端和服务器之间的异步通信。
• JavaScript - 主要用于客户端验证。

9. 常见的AJAX框架是什么？

• Dojo Toolkit
• YUI
• Google Web Toolkit（GWT）
• Spry
• MooTools
• Prototype

10. XMLHttpRequest的目的是什么？

• 将后台数据发送到服务器。
• 从服务器请求数据。
• 从服务器接收数据。
• 在不重新加载页面的情况下更新数据。

11. XMLHttpRequest的属性是什么？

• onReadyStateChange - 只要readystate属性发生变化，就会调用它。
• readyState - 表示请求的状态。
• responseText - 它将响应作为文本返回。
• responseXML - 它以XML格式返回响应。
• status - 返回请求的状态编号。
• statusText - 返回状态的详细信息。

12. XMLHttpRequest的重要方法是什么？

• abort() - 用于取消当前请求。
• getAllResponseHeaders() - 返回标题详细信息。
• getResponseHeader() - 返回特定的标题详细信息。
• open() - 用于打开请求。
• send() - 用于发送请求。
• setRequestHeader() - 它添加了请求标头。

13. XMLHttpRequest使用的open()方法有哪些类型？

• open(method,URL) - 它打开指定get或post方法和URL的请求。
• open(method,URL,async) - 它与上面相同但是指定异步或不指定。
• open(method,URL,async,userName,password) - 与上面相同，但指定用户名和密码。

14. 调试AJAX应用程序的工具有哪些？

• 适用于Mozilla Firefox的Firebug
• 适用于IE的Fiddler（Internet Explorer）
• JavaScript HTML调试器
• MyEclipse AJAX工具
• 脚本调试器

15. JavaScript和AJAX有什么区别？

JavaScript	AJAX
JavaScript是一种基于对象的脚本语言。	AJAX是一组相互关联的技术，如JavaScript，XML，HTML，CSS等
它请求服务器并等待响应。	它向服务器发送请求，不等待响应。
重新加载页面时会占用更多带宽。	它不会重新加载页面，因此占用的带宽更少。

16. 什么情况造成跨域？

同源策略限制 不同源会造成跨域。以下任意一种情况不同，都是不同源。
例子：

http://	协议不同
www	子域名不同
baidu.com	主域名不同
8080	端口号不同
www.baidu.com	ip地址和网址不同

17. 跨域解决方案有哪些？

1. jsonp (只能解决 get 跨域)

• 原理：
  • 动态创建一个script标签。利用script标签的src属性不受同源策略限制。
  • 因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。
• 步骤：
  • 去创建一个script标签
  • script的src属性设置接口地址
  • 接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
  • 通过定义函数名去接收后台返回数据

//去创建一个script标签
var  script = document.createElement("script");
//script的src属性设置接口地址 并带一个callback回调函数名称
script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据
function jsonpCallback(data){
    //注意  jsonp返回的数据是json对象可以直接使用
    //ajax  取得数据是json字符串需要转换成json对象才可以使用。
}

2. CORS(跨域资源共享)

• 原理：
  • 服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求
• 限制：
  • 浏览器需要支持HTML5，可以支持POST，PUT等方法兼容ie9以上
• 需要后台设置

Access-Control-Allow-Origin: *              //允许所有域名访问
或者
Access-Control-Allow-Origin: http://a.com   //只允许所有域名访问

3. 设置 document.domain

• 原理：
  • 相同主域名不同子域名下的页面，可以设置document.domain让它们同域
• 限制：
  • 同域document提供的是页面间的互操作，需要载入iframe页面

// URL http://a.com/foo
var ifr = document.createElement('iframe');
ifr.src = 'http://b.a.com/bar'; 
ifr.onload = function(){
    var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementsById("foo").innerHTML);
};

ifr.style.display = 'none';
document.body.appendChild(ifr);

4. 用Apache做转发(逆向代理)

• 让跨域变成同域