什么是ajax
AJAX (阿贾克斯 Asynchronous Javascript And Xml ) 异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术, 可以访问服务器数据的局部刷新的技术。
AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
作用：
允许客户端脚本发送HTTP请求，去请求服务器的数据来创建动态网页，可以在不重新加载整个网页的情况下，对网页的某部分进行更新。也称局部刷新
JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 通过JavaScript中的一些模式来表示结构化数据, JSON 并不是 JavaScript 独有的数据格式，其他很多语言都可以对 JSON 进行解析和序列化,
除了JSON外, 还有XML也是一种数据表示方式;
JSON 的语法可以表示三种类型的值：
1.对象表示法
2.数组表示法
3.对象和数组的结合的表示法
对象表示法:
JavaScript 对象字面量表示法：
var box = {
name : 'Zhang',
age : 100
};
JSON 中的对象表示法需要加上双引号，并且不存在赋值运算和分号:
{ "name" : "Zhang", //需要使用双引号，否则转换会出错
"age" : 100
}
数组表示法:
JavaScript 数组字面量表示法：
var box = [100, 'Zhang', true];
JSON 中的数组表示法同样没有变量赋值和分号：
[“100”, “Zhang”, “true”]
对象和数组结合的复杂形式:
[ { "name" : "a",
"age" : 1
},
{ "name" : "b",
"age" : 2
},
]
JSON 的解析:
JSON解析就是对JSON格式的字符串解析成原生的JavaScript值(数组或对象)
1.eval()函数. 但这个方法可能会造成安全问题
2.JSON 对象提供了另外两个方法(常用): JSON.parse(): 将JSON字符串转换为JavaScript原生值(对象或数组);
JSON.stringify() : json序列化,将原生JavaScript值(对象或数组)转换为JSON字符串的过程;
XMLHttpRequest
AJAX的核心是 JavaScript对象XMLHttpRequest 。它是一种支持异步请求数据的技术。 (简称 XHR)。
XHR 的出现，提供了向服务器发送请求和解析服务器响应流畅的接口。能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。
XHR对象支持IE7+、Firefox、Opera、Chrome 和 Safari 等浏览器, 但是不支持IE6。
创建 XHR 对象可以直接实例化 XMLHttpRequest 。
var xhr = new XMLHttpRequest();
alert(xhr); //XMLHttpRequest
如果是 IE6 及以下，那么我们必须还需要使用 ActiveX 对象通过 传入参数Microsoft.XMLHTTP来实现。
xhr = new ActiveXObject("Microsoft.XMLHTTP");
如何写
open()方法:
它接受三个参数：要发送的请求类型(get、post)、请求的 URL 和表示是否异步 xhr.open('get', 'demo.json', false); //对于demo.json 的 get 请求，false表示同步
send()方法:
向服务器发送请求 open()方法并不会真正发送请求，而是准备好需要发送给服务器的内容。我们需要通过send()方法向服务器发送请求
send()方法接受一个参数，作为请求体发送的数据。如果是get方式请求则填 null。 xhr.send(null);
abort()方法:
取消异步请求, 如果需要取消某异步请求, 则在send()之后再调用, 写在send()之前调用会报错
//取消异步请求 xhr.abort();
XHR 对象的属性:
当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属性。一共有四个属性：
status: 响应的 HTTP 状态 (重要)
statusText: HTTP 状态的说明 (重要)
responseText: 作为响应主体被返回的文本 (重要)
responseXML: 如果响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的 XML文档,否则是null
status 属性:
HTTP请求状态码, 一般 HTTP 状态代码为 200 则表示请求服务器成功
HTTP 协议中， 状态码
404: 找不到服务器中的资源
403: 服务器缓存
500： 服务器故障
200: 【正常】返回
400: 语法错误导致服务器不识别
503: 由于服务器过载或维护导致无法完成请求
readyState 属性
0: 没有发送
1: 已经发送了，但服务器还没有接收到
2: 服务器已经接收到了，但还没有处理完数据
3: 服务器已经处理完数据，并已经返回
4: 客户端已经正常接收到服务器返回的数据
// 1. 创建对象
var xhr = new XMLHttpRequest();
// 2. 准备
// 参数1： 获取数据的方式， GET、POST
// 参数2： 向服务器请求数据的地址 格式： 例如：http://ip:8080/ajax/ajaxtest
// 参数3： false 代表同步的方式请求数据，true 代表异步
// xhr.open("GET", "http://127.0.0.1:8080/ajax/ajaxtest", false);
xhr.open("GET", "http://127.0.0.1:8080/ajax/ajaxtest", false);
// 3. 发送请求
xhr.send();
// 4. 获取数据
xhr.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
// 200 说明返回的数据是正常的
var str = req.responseText;
}
}
}
HTTP协议
HTTP是一个属于应用层的面向对象的协议, 由于其简捷,快速的方式, 适用于分布式超媒体信息系统.
HTTP协议的主要特点有:
1, 支持客户端/服务端模式. 即请求(request)-响应(response)模式
2, 简单快速, 客户端向服务端发送请求时, 只需要传送请求方式和路径即可,所以简单, 由于HTTP协议简单, 使得HTTP服务器的程序规模小, 因而速度很快;
3, 灵活, 传输数据类型种类多
4, 无连接, 请求一次服务器后立刻断开连接, 即非长连接, 即短连接
5, 无状态, HTTP协议对事务处理没有记忆能力; session
HTTP协议的请求方式: GET, POST, HEAD, PUT等 HTTP包含: 请求头和请求体 响应头和响应体
GET请求
在通过HTTP协议向服务器请求的过程中，有两种最常用的请求方式，分别是: GET和POST。在Ajax使用的过程中，GET的使用频率又要比POST高得多. GET请求最常用于向服务器获取数据。也可以将少量字符串参数提交给服务器。 xhr.open('get', 'demo.php?football=1&name=Koo', true);
用途： 向服务器传递数据 football=2 football=3
格式： 地址?参数名1=值1&参数名2=值2&参数名3=值3
通过URL后的问号?给服务器传递键值对数据，服务器接收到请求后可以从中获取到对应的数据
POST请求:
POST 请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是使用的 POST 传输方式。
xhr.open('post', 'demo.php', true);
POST请求向服务器发送的数据，不会跟在URL后面，而是通过 send()方法向服务器提交数据。
xhr.send('name=Zhang&age=100');
POST请求和Web表单提交不同，需要使用 XHR 来模仿表单提交
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
GET与POST的对比
共同点： 都是向服务器请求数据的方式
GET
数据放在地址栏后 ?reg=123&psw=123
数据量小
安全性低
传输速度快
POST
send(数据参数)
数据量大
安全性高
传输速度慢
字符编码:
特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理，中文字符的返回及传参，可以将页面保存和设置为 utf-8 格式即可.
//一个通用的函数给URL添加参数
addURLParam(url, name, value) {
//判断的 url 是否有已有参数 , 添加?或者&来连接参数
url += (url.indexOf('?') == -1 ? '?' : '&');
url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
return url;
}
请求头:
请求头包含HTTP的头部信息, 即服务器返回的响应头信息和客户端发送出去的请求头信息。我们可以获取响应头(response)信息或者设置请求头(request)信息。
//使用 getAllResponseHeaders()获取整个响应头信息
alert(xhr.getAllResponseHeaders());
//使用 getResponseHeader()获取单个响应头信息
alert(xhr.getResponseHeader('Content-Type'));
//使用 setRequestHeader()设置单个请求头信息 xhr.setRequestHeader('MyHeader', Zhang); //放在 open 方法之后，send 方法之前
