ajax学习

什么是ajax

是一种使用js异步获取响应数据，进行页面的局部刷新技术方案

与传统的web应用比较

传统的web应用，当用户发送一个http请求到服务器，（例如提交表单数据），这个时候用户只能等服务器接受到数据，并作出处理，然后返回一个新的页面给用户，在这个过程中用户不能做任何处理，这里面有个问题：** 为什么要返回整个页面给用户进行刷新，而不能只返回用户需要的信息？** 因为那个时候并没有一种机制能够在服务器处理好了数据并返回时，告诉浏览器我的数据返回了，可以进行局部更新了，所以，不得不进行整个页面的刷新，而在这个过程中用户只能等待服务器的数据，不能做任何事情；
而现在有了ajax，它提供了一种机制可以让客户端与服务器进行异步通信，并局部刷新页面，最重要的是可以让我们监听到服务器返回数据的状态，这样就可以不需要每次刷新整个页面

ajax的原理

ajax的核心是JavaScript、XMLHttpRequest和DOM对象；通过XMLHTttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后通过JavaScript操作DOM来更新页面
简而言之就是：

发送一个ajax请求的步骤：

1. 创建一个XMLHttpRequest对象
2. 通过onreadystatechange函数对象监听状态变化
3. 调用open()设置配置信息，包括：get/post、url+data和true（表示采用异步方式）
4. 调用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);
  }

注意点：

1. 发送get请求时，传送的数据是以键值对的形式放在url中的，而post请求，传送的数据是以键值对的形式放在send(函数)中发送出去的
2. post请求一般设置为如下xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
3. 设置setRequestHeader，一般在open()后，send()之前

ajax的优缺点

优点：

1. 无刷新更新数据，不需要刷新整个页面
2. 异步与服务器通信，不需要打断用户操作
3. 前后端负载平衡，可以按需取数据，减少带宽负担

** 缺点**

1. 干掉了back和history功能，对浏览器机制的破坏
   因为浏览器只能记忆历史记录中的静态页面，页面的局部更新无法保存到历史记录中
2. 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域名下的对象。

处理跨域的方法：

1. 使用代理，通过后台获取数据，返回给前端
2. 使用JSONP实现get请求的跨域访问，注意：只能实现get请求的跨域
3. XHR2：就是HTML5提供的XMLHttpRequest Level2实现了跨域访问，但是不支持IE10以下的版本