什么是ajax
是一种使用js异步获取响应数据，进行页面的局部刷新技术方案
与传统的web应用比较
传统的web应用，当用户发送一个http请求到服务器，（例如提交表单数据），这个时候用户只能等服务器接受到数据，并作出处理，然后返回一个新的页面给用户，在这个过程中用户不能做任何处理，这里面有个问题：** 为什么要返回整个页面给用户进行刷新，而不能只返回用户需要的信息？** 因为那个时候并没有一种机制能够在服务器处理好了数据并返回时，告诉浏览器我的数据返回了，可以进行局部更新了，所以，不得不进行整个页面的刷新，而在这个过程中用户只能等待服务器的数据，不能做任何事情；
而现在有了ajax，它提供了一种机制可以让客户端与服务器进行异步通信，并局部刷新页面，最重要的是可以让我们监听到服务器返回数据的状态，这样就可以不需要每次刷新整个页面
ajax的原理
ajax的核心是JavaScript、XMLHttpRequest和DOM对象；通过XMLHTttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后通过JavaScript操作DOM来更新页面
简而言之就是：
发送一个ajax请求的步骤：
- 创建一个XMLHttpRequest对象
- 通过onreadystatechange函数对象监听状态变化
- 调用open()设置配置信息，包括：get/post、url+data和true（表示采用异步方式）
- 调用send发送请求
示例代码如下：
var xhr = new XMLHttpRequest(); // 创建一个XMLHttpRequest请求
// 监听状态变化
xhr.onreadystatechange = function(){
// readyState === 4表示一个请求已经结束
if (xhr.readyState === 4) {
// status表示该请求的
if (xhr.status >= 200 && xhr.status < 300) {
// 获得响应数据
var data = xhr.responseText;
if (dataType === 'json') {
data = JSON.parse(xhr.responseText);
}
// 数据传输正确处理
onSuccess(data);
} else{i
// 数据传输错误处理
onError();
}
}
}
// 这里是判断发送的是get请求还是post请求，
if (method === 'get') {
url += '?';
for (let key in data) {
url += key + "=" + data[key] + "&";
}
url = url.substr(0, url.length - 1);
// open函数主要是设置配置信息
xhr.open(method, url, true);
// send表示发送请求
xhr.send();
} else if (method === 'post') { // 这是采用post发送
let sendData = "";
for (let key in data) {
sendData += key + "=" + data[key] + "&";
}
sendData = sendData.substr(0, sendData.length - 1);
xhr.open(method, url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(sendData);
}
注意点：
- 发送get请求时，传送的数据是以键值对的形式放在url中的，而post请求，传送的数据是以键值对的形式放在send(函数)中发送出去的
- post请求一般设置为如下
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); - 设置
setRequestHeader，一般在open()后，send()之前
ajax的优缺点
优点：
- 无刷新更新数据，不需要刷新整个页面
- 异步与服务器通信，不需要打断用户操作
- 前后端负载平衡，可以按需取数据，减少带宽负担
** 缺点**
- 干掉了back和history功能，对浏览器机制的破坏
因为浏览器只能记忆历史记录中的静态页面，页面的局部更新无法保存到历史记录中 - ajax的安全问题
ajax暴露了客户端与服务器端的数据逻辑
XMLHttpRequest取得响应
readyState属性
- 0：请求未初始化，open还没有调用
- 1：服务器连接已建立，open已经调用了
- 2：请求已接收，也就是接收到头信息了
- 3：请求处理中，也就是接收到响应主体了
- 4：请求已完成，且响应已就绪，也就是响应完成了
通过监听readyState事件，可以判断连接状态，如下：
var request = new XMLHttpRequest();
request.open("GET", "get.php", true);
request.send();
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
//做一些事情 request.responseText
}
}
json
- 在JavaScript中使用eval方法解析json数据是很危险的，建议使用JSON.parse()方法
- 推荐的json数据校验工具： JSONLint， 它可以检验json数据的语法错误
跨域
JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。
跨域：简单的理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或c.com域名下的对象。
处理跨域的方法：
- 使用代理，通过后台获取数据，返回给前端
- 使用JSONP实现get请求的跨域访问，注意：只能实现get请求的跨域
- XHR2：就是HTML5提供的XMLHttpRequest Level2实现了跨域访问，但是不支持IE10以下的版本
