ajax知识整理

Posted 2020-08-26

HTTP服务
1、服务器
服务器类型
服务类型：文件服务器、数据库服务器、邮件服务器、Web服务器等；
操作系统：Linux服务器、Windows服务器等；
应用软件：Apache服务器、nginx 服务器、IIS服务器、Tomcat服务器、 weblogic服务器、WebSphere服务器、boss服务器、 Node服务器等；
服务器软件
概念：使计算机具备提供某种服务能力的应用软件，称为服务器软件， 通过安装相应的服务软件，然后进行配置后就可以使计算具备了提供某种服务的能力
文件服务器：Server-U、FileZilla、VsFTP等（FTP是File Transfer Protocol文件传输协议）；
数据库服务器：oracle、mysql、SQL server、DB2、ACCESS等；
邮件服务器：Postfix、Sendmail等；
HTTP服务器：Apache、Nginx、IIS、Tomcat、NodeJS等；
HTTP服务器：
即网站服务器，主要提供文档(文本、图片、视频、音频)浏览服务，一般安装Apache、Nginx服务器软件。
服务端开发：HTTP服务器可以结合某一编程语言处理业务逻辑，由此进行的开发，通常称之为服务端开发
运行在服务端的编程语言： php、java、.net、Python、Ruby、Perl等。
2、客户端
具有向服务器索取服务能力的终端
客户端软件：通过安装不同的客户端软件， 可以获取不同的服务，比如通过QQ获得即时通讯服务、通过迅雷获得下载服务等。常见的客户端软件：浏览器、QQ、迅雷、Foxmail等。
前端开发：以浏览器为宿主环境，结合 html、CSS、javascript等技术，而进行的一系列开发，通常称之为前端开发。
3、网络基础
IP地址
给每个连接在互联网上的主机分配的一个32位地址。(就像每部手机能正常通话需要一个号码一样)；
查看本机IP地址 ping、ipconfig、ifconfig（linux）
域名
域名是一个IP地址的“面具”； 域名与IP地址一一映射，就像手机号与所代表的人一样
DNS服务
DNS（Domain Name System） 因特网上作为域名和IP地址相互映射的一个分布式数据库
查找优先级 本机hosts文件、DNS服务器
ipconfig /flushdns 刷新DNS
端口
端口号是计算机与外界通讯交流的出口，每个端口对应不同的服务。
查看端口占用情况 netstat -an
常见端口号 80、8080、3306、21、22
4、软件架构
C/S结构
Client、Server 不同的服务需要安装不同的客户端软件
比如QQ、迅雷、Foxmail这种情况下安装的软件会越来越多，同时也有许多弊端，不方便，如果当前客户端上面没有安装软件，如QQ就看不到消息，需要下载登录才能查看信息
B/S结构
Broswer、Server 将所有的服务都可以通过浏览器来完成
但B/S也有一些不利，比如操作稳定性、流畅度等方面相对较弱。
5、搭建HTTP服务
1、安装WampServer Windows + Apache + Mysql + PHP，首字母组合。 指定安装路径
2、管理HTTP服务 绿色为正常启动状态
注意事项
1、检查网络是不是通的 ping 对方IP
2、检查防火墙是否开启，如果开启将不能正常被访问
3、检查访问权限 Allow from all
4、理解默认索引
5、确保端口没有被其它程序占用
6、“#”表示注释
7、修改配置要格外小心，禁止无意修改其它内容
3、配置根目录
1、打开配置文件
wampserver安装目录下bin\apache\Apache2.2.21\conf\httpd.conf
2、设定根目录，查找并修改
DocumentRoot "D:/wamp/www/" 改成 DocumentRoot "E/www/" 这样就指定了 "E:/www/"为存放网站的根目录。
3、配置根目录
查找 <Directory "D:wamp/www/"> 修改成 <Directory "E:/www/">
4、重启Apache
4、网站部署
将制作好的网页拷贝到配置好的根目录下，浏览器访问127.0.0.1即可
5、配置虚拟主机
更改host文件
6、PHP基础
1、 <?php 这里是代码 ?>
1、避免使用中文目录和中文文件名
2、php页面无法直接打开，需要运行在服务器环境当中
2、变量
1、变量以$开头 字母/数字/下划线 不能以数字开头
2、大小写敏感（区分大小写）
举例 ： // 声明一个变量$a并赋值为10 $a = 10;
3、数据类型
字符型 $str = ‘hello world!‘;
整型 $num = 10;
浮点型 $float = 10.5;
布尔型 $bool = true;
数组
$arr = array(1, 2, 3); // 这种方式叫做**索引数组**
$arr1 = array(‘name‘=>‘itcast‘, ‘age‘=>10) // 这种方式叫做**关联数组**
对象
class Person {
public $name = ‘itcast‘;
public $age = 10;
}
$person = new Person;
// PHP访问一个对象属性的语法是不一样的
echo $person->name;
// obj[‘name‘]; obj.name 不行
NULL
//PHP中一种特殊的数据类型，表示空值，即表示没有为该变量设置任何值null(空值)不区分大小写，null和NULL是一样的。
单引号&双引号区别
单引号内部的变量不会执行 双引号会执行
举例 $name = ‘小明‘；
echo ‘name is $name‘;//输出 name is $name
echo "name is $name";//输出 name is 小明
4、运算符
基本与Javascript语法一致 .号表示字符串拼接符，Javascript中为+号
5、内容输出
echo：输出简单数据类型，如字符串、数值
print_r()：输出复杂数据类型，如数组
var_dump()：输出详细信息，如对象、数组（了解）
6、函数
1、PHP中函数不可以省略参数
2、PHP可以设置默认参数
3、函数名对大小写不敏感
4、基本与Javascript基本一致
举例： function sayHello($name=‘web developer‘) { echo $name . ‘你好!‘;}
sayHello();
7、分支， 循环语句
foreach 数组遍历函数，类似Javascript中的 for in
foreach($arr as $k=>$v) {
echo $k . ‘~~~‘ . $v;
};
$length = count($arr); // PHP函数，计算数组的长度
8、表单处理
表单name属性的是用来提供给服务端接收所传递数据而设置的
表单action属性设置接收数据的处理程序
表单method属性设置发送数据的方式
当上传文件是需要设置 enctype="multipart/form-data"，且只能post方式
$_GET接收 get 传值
$_POST接收 post 传值
$_FILES接收文件上传 举例如下
<form action="login.php" method="post">
<div class="row">
<label>用户：</label><input type="text" name="username"/>
</div>
<div class="row">
<label>密码：</label><input type="password" name="password"/>
</div>
<div class="row">
<input type="submit" value="登录"/>
</div>
</form>
<form action="login.php" method="post" enctype="multipart/form-data">
<div class="row">
<label>图片：</label><input type="file" name="image"/>
</div>
<div class="row">
<input type="submit" value="上传"/>
</div>
</form>
move_uploaded_file($_FILES[‘image‘][‘tmp_name‘], ‘test.jpg‘);
9、文件导入
include ‘07.form.html‘;
require ‘07.form.php‘
10、常用php函数
$array = array(
‘username‘=>‘itcast‘,
‘password‘=>‘123456‘
);

echo ‘获取数组的长度：‘.count($array);
echo ‘<br>‘;
echo ‘判断是否在数组中：‘.in_array(‘itcast‘,$array);
echo ‘<br>‘;
echo ‘检测数组中是否存在key：‘.array_key_exists(‘username‘,$array);
echo ‘<br>‘;
7、网络传输协议
1、常见协议
1、HTTP、HTTPS 超文本传输协议
2、FTP 文件传输协议
3、SMTP 简单邮件传输协议
2、http协议
超文本传输协议（HTTP，HyperText Transfer Protocol) 网站是基于HTTP协议的， 例如网站的图片、CSS、JS等都是基于HTTP协议进行传输的。
html 超文本标记语言 HTML Hypertext Markup Language
HTTP协议是由从客户机到服务器的请求(Request)和从服务器到客户机的响应(Response)进行了约束和规范。
即HTTP协议主要由请求和响应构成
常用请求方法 POST、GET、PUT、DELETE
3、请求和请求报文
请求由客户端发起，其规范格式为：请求行、请求头、请求主体。
1、请求行
由请求方式、请求URL和协议版本构成
GET /day01/code/login.php?username=123&password=123 HTTP/1.1
POST /day01/code/login.php HTTP/1.1
2、请求头
Host：localhost请求的主机
Cache-Control：max-age=0控制缓存
Accept：/ 接受的文档MIME类型
User-Agent：很重要
Referer：从哪个URL跳转过来的
Accept-Encoding：可接受的压缩格式
If-None-Match：记录服务器响应的ETag值，用于控制缓存 此值是由服务器自动生成的
If-Modified-Since：记录服务器响应的Last-Modified值 此值是由服务器自动生成的
3、请求主体
即传递给服务端的数据
当以post形式提交表单的时候，请求头里需要设置 Content-Type: application/x-www-form-urlencoded，以get形式当不需要
4、响应和响应报文
响应由服务器发出，其规范格式为：状态行、响应头、响应主体
1、响应状态行
由协议版本号、状态码和状态信息构成 HTTP/1.1 200 OK
2、响应头
Date：响应时间
Server：服务器信息
Last-Modified：资源最后修改时间 由服务器自动生成
ETag：资源修改后生成的唯一标识 由服务器自动生成
Content-Length：响应主体长度
Content-Type：响应资源的类型
3、响应主体
即服务端返回给客户端的内容；
4、状态码 xhr.status 的值
常见的有200代表成功、304文档未修改、403没有权限、404未找到、500服务器错误
8 、 AJAX编程
即 Asynchronous [e‘s??kr?n?s] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
异步
指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步
其优势在于不阻塞程序的执行，从而提升整体执行效率。
XMLHttpRequest可以以异步方式的处理程序。
XMLHttpRequest
浏览器内建对象，用于在后台与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。
js 内置的 http 请求对象 XMLHttpRequest
XMLHttpRequest 请求
请求行
xhr.open(‘post‘,‘01.php‘);
请求头
xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
get请求可以不设置
请求主体
xhr.send("name=xjj&age=10");
get可以传空 null
注意书写顺序
XMLHttpRequest 响应 知识点
HTTP响应是由服务端发出的
HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。
由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。
onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态
xhr.readyState 响应状态
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
响应成功获取信息
1、获取状态行 状态码 和 状态信息
xhr.status 状态码
xhr.statusText 状态码信息
2、获取响应头
xhr.getResponseHeader(‘Content-Type‘); 传参获取部分信息
xhr.getAllResponseHeaders(); 获取响应头中的所有信息
3、获取响应主体
xhr.responseText 获取json格式的数据
xhr.responseXML 获取XML格式的数据
我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML
API详解
xhr.open() 发起请求，可以是get、post方式，默认get
xhr.setRequestHeader() 设置请求头 get不用设置 post需要设置
xhr.send() 发送请求主体get方式使用xhr.send(null) post需要传数据 可以是json对象、带&的字符串，固定样式的数组
xhr.onreadystatechange = function () {} 监听响应状态
xhr.status表示响应码，如200
xhr.statusText表示响应信息，如OK
xhr.getAllResponseHeaders() 获取全部响应头信息
xhr.getResponseHeader(‘key‘) 获取指定头信息
xhr.responseText、xhr.responseXML都表示响应主体
get 和 post 请求方式的差异
1、GET没有请求主体，使用xhr.send(null)
2、GET可以通过在请求URL上添加请求参数
3、POST可以通过xhr.send(‘name=itcast&age=10‘)
4、POST需要设置
5、GET效率更好（应用多）
6、GET大小限制约4K，POST则没有限制
XML数据
1、必须有一个根元素
2、不可有空格、不可以数字或.开头、大小写敏感
3、不可交叉嵌套
4、属性双引号（浏览器自动修正成双引号了）
5、特殊符号要使用实体
6、注释和HTML一样
虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以实现开发已经很少使用了。
JSON
即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。
数据结构的要求
1、数据在名称/值对中
2、数据由逗号分隔(最后一个健/值对不能带逗号)
3、花括号保存对象方括号保存数组
4、使用双引号
JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取
PHP解析方法
/*将php数组转化成json字符*/
$json_array = json_encode($array);
/*将json字符转化成php数组*/
$array_json = json_decode($json_array);
Javascript 解析方法
JSON对象 JSON.parse()、JSON.stringify()；
JSON兼容处理json2.js
总结：JSON体积小、解析方便且高效，在实际开发成为首选。
/*需要把字符串转化成JSON对象*/
var json_obj = JSON.parse(text);
/*我们也可以把JSON对象转化成字符串*/
var json_str = JSON.stringify(json_obj);
兼容性
IE的兼容 需要加标识
9、封装ajax工具函数 参数对象思路
*1. 请求的类型 type get post
* 2. 请求地址 url
* 3. 是异步的还是同步的 async false true
* 4. 请求内容的格式 contentType
* 5. 传输的数据 data json对象
* 6.响应成功处理函数 success function
* 7.响应失败的处理函数 error function
10、jQuary的ajax方法
jQuery为我们提供了更强大的Ajax封装
$.ajax({}) 可配置方式发起Ajax请求
$.get() 以GET方式发起Ajax请求
$.post() 以POST方式发起Ajax请求
$(‘form‘).serialize() 序列化表单（即格式化key=val&key=val）
url 接口地址
type 请求方式
timeout 请求超时
dataType 服务器返回格式 json *jsonp等......
data 发送请求数据
beforeSend: function () {} 请求发起前调用
success 成功响应后调用
error 错误响应时调用
complete 响应完成时调用（包括成功和失败）
11、模板引擎
artTemplate 简介语法模板
<script src="dist/template.js"></script>
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul></script>
var data = {
title: ‘标签‘,
list: [‘文艺‘, ‘博客‘, ‘摄影‘, ‘电影‘, ‘民谣‘, ‘旅行‘, ‘吉他‘]
};
var html = template(‘test‘, data);
document.getElementById(‘content‘).innerHTML = html;
artTemplate 原生 js 模板语法版
<script src="dist/template-native.js"></script>
<% 与 %> 符号包裹起来的语句则为模板的逻辑表达式。
模板不能访问全局对象 使用template.helper(name, callback) 然后在模板当中调用name()方法 声明一变量接受 就可以调用成员变量了
12 同源 & 跨域
同源
所谓同源是指，域名，协议，端口完全相同， 同源策略是浏览器的一种安全策略。
跨域
不同源则跨域
跨域方案
1、顶级域名相同的可以通过domain.name来解决，即同时设置 domain.name = 顶级域名（如example.com）
2、document.domain + iframe
3、window.name + iframe
4、location.hash + iframe
5、window.postMessage()
jsonp
JSON with Padding
其本质是利用了标签具有可跨域的特性， 由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来， 此方法需要前后端配合完成。
<script>
function fuc(data){
console.log(data.name);
}
</script>
<script src="http://www.guangzhou.com/api.php?callback=fuc"></script>
1、服务器
服务器类型
服务类型：文件服务器、数据库服务器、邮件服务器、Web服务器等；
操作系统：Linux服务器、Windows服务器等；
应用软件：Apache服务器、Nginx 服务器、IIS服务器、Tomcat服务器、 weblogic服务器、WebSphere服务器、boss服务器、 Node服务器等；
服务器软件
概念：使计算机具备提供某种服务能力的应用软件，称为服务器软件， 通过安装相应的服务软件，然后进行配置后就可以使计算具备了提供某种服务的能力
文件服务器：Server-U、FileZilla、VsFTP等（FTP是File Transfer Protocol文件传输协议）；
数据库服务器：oracle、mysql、SQL server、DB2、ACCESS等；
邮件服务器：Postfix、Sendmail等；
HTTP服务器：Apache、Nginx、IIS、Tomcat、NodeJS等；
HTTP服务器：
即网站服务器，主要提供文档(文本、图片、视频、音频)浏览服务，一般安装Apache、Nginx服务器软件。
服务端开发：HTTP服务器可以结合某一编程语言处理业务逻辑，由此进行的开发，通常称之为服务端开发
运行在服务端的编程语言： php、java、.net、Python、Ruby、Perl等。
2、客户端
具有向服务器索取服务能力的终端
客户端软件：通过安装不同的客户端软件， 可以获取不同的服务，比如通过QQ获得即时通讯服务、通过迅雷获得下载服务等。常见的客户端软件：浏览器、QQ、迅雷、Foxmail等。
前端开发：以浏览器为宿主环境，结合 HTML、CSS、Javascript等技术，而进行的一系列开发，通常称之为前端开发。
3、网络基础
IP地址
给每个连接在互联网上的主机分配的一个32位地址。(就像每部手机能正常通话需要一个号码一样)；
查看本机IP地址 ping、ipconfig、ifconfig（linux）
域名
域名是一个IP地址的“面具”； 域名与IP地址一一映射，就像手机号与所代表的人一样
DNS服务
DNS（Domain Name System） 因特网上作为域名和IP地址相互映射的一个分布式数据库
查找优先级 本机hosts文件、DNS服务器
ipconfig /flushdns 刷新DNS
端口
端口号是计算机与外界通讯交流的出口，每个端口对应不同的服务。
查看端口占用情况 netstat -an
常见端口号 80、8080、3306、21、22
4、软件架构
C/S结构
Client、Server 不同的服务需要安装不同的客户端软件
比如QQ、迅雷、Foxmail这种情况下安装的软件会越来越多，同时也有许多弊端，不方便，如果当前客户端上面没有安装软件，如QQ就看不到消息，需要下载登录才能查看信息
B/S结构
Broswer、Server 将所有的服务都可以通过浏览器来完成
但B/S也有一些不利，比如操作稳定性、流畅度等方面相对较弱。
5、搭建HTTP服务
1、安装WampServer Windows + Apache + Mysql + PHP，首字母组合。 指定安装路径
2、管理HTTP服务 绿色为正常启动状态
注意事项
1、检查网络是不是通的 ping 对方IP
2、检查防火墙是否开启，如果开启将不能正常被访问
3、检查访问权限 Allow from all
4、理解默认索引
5、确保端口没有被其它程序占用
6、“#”表示注释
7、修改配置要格外小心，禁止无意修改其它内容
3、配置根目录
1、打开配置文件
wampserver安装目录下bin\apache\Apache2.2.21\conf\httpd.conf
2、设定根目录，查找并修改
DocumentRoot "D:/wamp/www/" 改成 DocumentRoot "E/www/" 这样就指定了 "E:/www/"为存放网站的根目录。
3、配置根目录
查找 <Directory "D:wamp/www/"> 修改成 <Directory "E:/www/">
4、重启Apache
4、网站部署
将制作好的网页拷贝到配置好的根目录下，浏览器访问127.0.0.1即可
5、配置虚拟主机
更改host文件
6、PHP基础
1、 <?php 这里是代码 ?>
1、避免使用中文目录和中文文件名
2、php页面无法直接打开，需要运行在服务器环境当中
2、变量
1、变量以$开头 字母/数字/下划线 不能以数字开头
2、大小写敏感（区分大小写）
举例 ： // 声明一个变量$a并赋值为10 $a = 10;
3、数据类型
字符型 $str = ‘hello world!‘;
整型 $num = 10;
浮点型 $float = 10.5;
布尔型 $bool = true;
数组
$arr = array(1, 2, 3); // 这种方式叫做**索引数组**
$arr1 = array(‘name‘=>‘itcast‘, ‘age‘=>10) // 这种方式叫做**关联数组**
对象
class Person {
public $name = ‘itcast‘;
public $age = 10;
}
$person = new Person;
// PHP访问一个对象属性的语法是不一样的
echo $person->name;
// obj[‘name‘]; obj.name 不行
NULL
//PHP中一种特殊的数据类型，表示空值，即表示没有为该变量设置任何值null(空值)不区分大小写，null和NULL是一样的。
单引号&双引号区别
单引号内部的变量不会执行 双引号会执行
举例 $name = ‘小明‘；
echo ‘name is $name‘;//输出 name is $name
echo "name is $name";//输出 name is 小明
4、运算符
基本与Javascript语法一致 .号表示字符串拼接符，Javascript中为+号
5、内容输出
echo：输出简单数据类型，如字符串、数值
print_r()：输出复杂数据类型，如数组
var_dump()：输出详细信息，如对象、数组（了解）
6、函数
1、PHP中函数不可以省略参数
2、PHP可以设置默认参数
3、函数名对大小写不敏感
4、基本与Javascript基本一致
举例： function sayHello($name=‘web developer‘) { echo $name . ‘你好!‘;}
sayHello();
7、分支， 循环语句
foreach 数组遍历函数，类似Javascript中的 for in
foreach($arr as $k=>$v) {
echo $k . ‘~~~‘ . $v;
};
$length = count($arr); // PHP函数，计算数组的长度
8、表单处理
表单name属性的是用来提供给服务端接收所传递数据而设置的
表单action属性设置接收数据的处理程序
表单method属性设置发送数据的方式
当上传文件是需要设置 enctype="multipart/form-data"，且只能post方式
$_GET接收 get 传值
$_POST接收 post 传值
$_FILES接收文件上传 举例如下
<form action="login.php" method="post">
<div class="row">
<label>用户：</label><input type="text" name="username"/>
</div>
<div class="row">
<label>密码：</label><input type="password" name="password"/>
</div>
<div class="row">
<input type="submit" value="登录"/>
</div>
</form>
<form action="login.php" method="post" enctype="multipart/form-data">
<div class="row">
<label>图片：</label><input type="file" name="image"/>
</div>
<div class="row">
<input type="submit" value="上传"/>
</div>
</form>
move_uploaded_file($_FILES[‘image‘][‘tmp_name‘], ‘test.jpg‘);
9、文件导入
include ‘07.form.html‘;
require ‘07.form.php‘
10、常用php函数
$array = array(
‘username‘=>‘itcast‘,
‘password‘=>‘123456‘
);

echo ‘获取数组的长度：‘.count($array);
echo ‘<br>‘;
echo ‘判断是否在数组中：‘.in_array(‘itcast‘,$array);
echo ‘<br>‘;
echo ‘检测数组中是否存在key：‘.array_key_exists(‘username‘,$array);
echo ‘<br>‘;
7、网络传输协议
1、常见协议
1、HTTP、HTTPS 超文本传输协议
2、FTP 文件传输协议
3、SMTP 简单邮件传输协议
2、http协议
超文本传输协议（HTTP，HyperText Transfer Protocol) 网站是基于HTTP协议的， 例如网站的图片、CSS、JS等都是基于HTTP协议进行传输的。
html 超文本标记语言 HTML Hypertext Markup Language
HTTP协议是由从客户机到服务器的请求(Request)和从服务器到客户机的响应(Response)进行了约束和规范。
即HTTP协议主要由请求和响应构成
常用请求方法 POST、GET、PUT、DELETE
3、请求和请求报文
请求由客户端发起，其规范格式为：请求行、请求头、请求主体。
1、请求行
由请求方式、请求URL和协议版本构成
GET /day01/code/login.php?username=123&password=123 HTTP/1.1
POST /day01/code/login.php HTTP/1.1
2、请求头
Host：localhost请求的主机
Cache-Control：max-age=0控制缓存
Accept：/ 接受的文档MIME类型
User-Agent：很重要
Referer：从哪个URL跳转过来的
Accept-Encoding：可接受的压缩格式
If-None-Match：记录服务器响应的ETag值，用于控制缓存 此值是由服务器自动生成的
If-Modified-Since：记录服务器响应的Last-Modified值 此值是由服务器自动生成的
3、请求主体
即传递给服务端的数据
当以post形式提交表单的时候，请求头里需要设置 Content-Type: application/x-www-form-urlencoded，以get形式当不需要
4、响应和响应报文
响应由服务器发出，其规范格式为：状态行、响应头、响应主体
1、响应状态行
由协议版本号、状态码和状态信息构成 HTTP/1.1 200 OK
2、响应头
Date：响应时间
Server：服务器信息
Last-Modified：资源最后修改时间 由服务器自动生成
ETag：资源修改后生成的唯一标识 由服务器自动生成
Content-Length：响应主体长度
Content-Type：响应资源的类型
3、响应主体
即服务端返回给客户端的内容；
4、状态码 xhr.status 的值
常见的有200代表成功、304文档未修改、403没有权限、404未找到、500服务器错误
8 、 AJAX编程
即 Asynchronous [e‘s??kr?n?s] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
异步
指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步
其优势在于不阻塞程序的执行，从而提升整体执行效率。
XMLHttpRequest可以以异步方式的处理程序。
XMLHttpRequest
浏览器内建对象，用于在后台与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。
js 内置的 http 请求对象 XMLHttpRequest
XMLHttpRequest 请求
请求行
xhr.open(‘post‘,‘01.php‘);
请求头
xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
get请求可以不设置
请求主体
xhr.send("name=xjj&age=10");
get可以传空 null
注意书写顺序
XMLHttpRequest 响应 知识点
HTTP响应是由服务端发出的
HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。
由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。
onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态
xhr.readyState 响应状态
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
响应成功获取信息
1、获取状态行 状态码 和 状态信息
xhr.status 状态码
xhr.statusText 状态码信息
2、获取响应头
xhr.getResponseHeader(‘Content-Type‘); 传参获取部分信息
xhr.getAllResponseHeaders(); 获取响应头中的所有信息
3、获取响应主体
xhr.responseText 获取json格式的数据
xhr.responseXML 获取XML格式的数据
我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML
API详解
xhr.open() 发起请求，可以是get、post方式，默认get
xhr.setRequestHeader() 设置请求头 get不用设置 post需要设置
xhr.send() 发送请求主体get方式使用xhr.send(null) post需要传数据 可以是json对象、带&的字符串，固定样式的数组
xhr.onreadystatechange = function () {} 监听响应状态
xhr.status表示响应码，如200
xhr.statusText表示响应信息，如OK
xhr.getAllResponseHeaders() 获取全部响应头信息
xhr.getResponseHeader(‘key‘) 获取指定头信息
xhr.responseText、xhr.responseXML都表示响应主体
get 和 post 请求方式的差异
1、GET没有请求主体，使用xhr.send(null)
2、GET可以通过在请求URL上添加请求参数
3、POST可以通过xhr.send(‘name=itcast&age=10‘)
4、POST需要设置
5、GET效率更好（应用多）
6、GET大小限制约4K，POST则没有限制
XML数据
1、必须有一个根元素
2、不可有空格、不可以数字或.开头、大小写敏感
3、不可交叉嵌套
4、属性双引号（浏览器自动修正成双引号了）
5、特殊符号要使用实体
6、注释和HTML一样
虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以实现开发已经很少使用了。
JSON
即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。
数据结构的要求
1、数据在名称/值对中
2、数据由逗号分隔(最后一个健/值对不能带逗号)
3、花括号保存对象方括号保存数组
4、使用双引号
JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取
PHP解析方法
/*将php数组转化成json字符*/
$json_array = json_encode($array);
/*将json字符转化成php数组*/
$array_json = json_decode($json_array);
Javascript 解析方法
JSON对象 JSON.parse()、JSON.stringify()；
JSON兼容处理json2.js
总结：JSON体积小、解析方便且高效，在实际开发成为首选。
/*需要把字符串转化成JSON对象*/
var json_obj = JSON.parse(text);
/*我们也可以把JSON对象转化成字符串*/
var json_str = JSON.stringify(json_obj);
兼容性
IE的兼容 需要加标识
9、封装ajax工具函数 参数对象思路
*1. 请求的类型 type get post
* 2. 请求地址 url
* 3. 是异步的还是同步的 async false true
* 4. 请求内容的格式 contentType
* 5. 传输的数据 data json对象
* 6.响应成功处理函数 success function
* 7.响应失败的处理函数 error function
10、jQuary的ajax方法
jQuery为我们提供了更强大的Ajax封装
$.ajax({}) 可配置方式发起Ajax请求
$.get() 以GET方式发起Ajax请求
$.post() 以POST方式发起Ajax请求
$(‘form‘).serialize() 序列化表单（即格式化key=val&key=val）
url 接口地址
type 请求方式
timeout 请求超时
dataType 服务器返回格式 json *jsonp等......
data 发送请求数据
beforeSend: function () {} 请求发起前调用
success 成功响应后调用
error 错误响应时调用
complete 响应完成时调用（包括成功和失败）
11、模板引擎
artTemplate 简介语法模板
<script src="dist/template.js"></script>
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul></script>
var data = {
title: ‘标签‘,
list: [‘文艺‘, ‘博客‘, ‘摄影‘, ‘电影‘, ‘民谣‘, ‘旅行‘, ‘吉他‘]
};
var html = template(‘test‘, data);
document.getElementById(‘content‘).innerHTML = html;
artTemplate 原生 js 模板语法版
<script src="dist/template-native.js"></script>
<% 与 %> 符号包裹起来的语句则为模板的逻辑表达式。
模板不能访问全局对象 使用template.helper(name, callback) 然后在模板当中调用name()方法 声明一变量接受 就可以调用成员变量了
12 同源 & 跨域
同源
所谓同源是指，域名，协议，端口完全相同， 同源策略是浏览器的一种安全策略。
跨域
不同源则跨域
跨域方案
1、顶级域名相同的可以通过domain.name来解决，即同时设置 domain.name = 顶级域名（如example.com）
2、document.domain + iframe
3、window.name + iframe
4、location.hash + iframe
5、window.postMessage()
jsonp
JSON with Padding
其本质是利用了标签具有可跨域的特性， 由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来， 此方法需要前后端配合完成。
<script>
function fuc(data){
console.log(data.name);
}
</script>
<script src="http://www.guangzhou.com/api.php?callback=fuc"></script>