AJAX 相关笔记

AJAX (Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）)。

平时工作中使用ajax的频率挺高的，这里整理了一些ajax相关的小知识，后续还会继续补充学习到的内容。为了自己能够更好的掌握和使用。

简言

1 ajax最大的优点就是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。使网页实现异步更新。

2 使用脚本操纵HTTP和WEB服务器进行数据交换，不会导致页面重载。

原生ajax

虽然原生的ajax现在用的可能不多，但还是有必要懂的。

• 1 XMLHttpRequest

浏览器在XMLHttpRequest类上定义了它们的HTTP API。这个类的每个实例都表示一个独立的请求／响应对，并且这个对象的属性和方法允许制定请求细节和提取响应数据。

• 2 一个HTTP请求由4部分组成
  • HTTP 请求方法或者动作
  • 正在请求的URL
  • 一个可选的请求头集合，其中可能包括身份验证信息。
  • 一个可选的请求主体。
• 3 服务器返回的HTTP响应包含3部分
  • 一个数字和文本组成的状态码，用来显示请求的成功和失败。
  • 一个响应头集合
  • 响应主体
• 4 方法
  • open()方法 - 与服务器端建立连接
  • send()方法 - 向服务器端发送请求
  • setRequestHeader() - 设置请求头信息
• 5 事件
  • onreadystatechange事件
    
    作用 - 监听服务器端的通信状态
    
    触发 - 服务器端的通信状态变化时
• 6 属性
  • readyState属性 - 获取服务器端的通信状态
  • status属性 - 获取服务器端的状态码
  • responseText属性 - 返回服务器端响应的文本格式数据
  • responseXML属性 - 返回服务器端响应的XML格式数据

请求步骤

1 实例化XMLHttpRequest对象

    var request = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

    new ActiveXObject("Microsoft.XMLHTTP");

处理ie低版本兼容性问题

    function getXMLHttpRequest(){
       let xhr = null;//声明变量
       if(window.XMLHttpRequest){// 其他浏览器
        xhr = new XMLHttpRequest();
       }else{// IE浏览器
        xhr = new ActiveXObject("Microsoft.XMLHttp");
       }
       return xhr;
    }

2 指定请求

创建XMLHttpRequest对象之后，发起Http请求的下一步是调用XMLHttpRequest对象的open()方法去指定这个请求的两个必须部分：方法和url

    request.open("GET", //http  get请求
    "data.csv"); // URL的内容

open()的第一个参数可以是：get post head put等

• get 和 post
  
  1 get用于常规请求，适用于当URL完全指定请求资源，当请求对服务器没有任何副作用以及当服务器的响应是可缓存的。
  
  2 post 常用于html表单，它在请求主体中包含额外数据且这些数据常存储到服务器上的数据库中。相同URL的重复post请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。
  
  简言之，post方法有自己的特点：
  
  无法使用缓存文件（更新服务器上的文件或数据库）
  
  向服务器发送大量数据（POST 没有数据量限制）
  
  发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

• 如果有请求头的话，请求进程的下个步骤是设置它。例如post请求需要“Content-Type”头指定请求主题的MIME类型。

    request.setRequestHeader("Content-Type","text/plain");

• 发起HTTP 请求的最后一步是指定可选的请求主体并向服务器发送它。

    request.send(null);

如果是get请求则没有请求主体，所以可以传参数null，但是post通常需要请求主体，并且它应该匹配使用setRequestHeader指定的"Content-Type"头。

小栗子

    function postMessage(msg) {
        var request = new XMLHttpRequest();
        request.open("POST","/test.php");
        request.setRequestHeader("Content-Type","text/plain","charset=utf-8");
        request.send(msg);
    }

3 取得响应

一个完整的HTTP响应由状态码、响应头集合和响应主体组成。通过XMLHttpRequest对象的属性和方法可以获得。

• readyState属性 指定了HTTP请求的状态。
  
  0 - 请求未初始化
  
  1 - （与服务器端）正在连接
  
  2 - 请求正在接收
  
  3 - 请求正在响应
  
  4 - 请求响应完毕

• status和statusText属性以数字和文本的形式返回HTTP状态码。例如：200和“ok”表示成功请求，404和"not found" 表示url不能匹配服务器上的任何资源。

• 服务器常用的状态码及其对应的含义如下：
  
  200：服务器响应正常。
  
  304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
  
  400：无法找到请求的资源。
  
  401：访问资源的权限不够。
  
  403：没有权限访问资源。
  
  404：需要访问的资源不存在。
  
  405：需要访问的资源被禁止。
  
  407：访问的资源需要代理身份验证。
  
  414：请求的URL太长。
  
  500：服务器内部错误。

• 如需获得来自服务器的响应，可使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

  小栗子

    function getText(url,callback) {
        let request = new XMLHttpRequest();
        request.open("get",url);
        request.onreadystatechange = function() {
            //如果请求完成并且请求成功
            if (request.readyState === 4 && request.status === 200) {
                let type = request.getResponseHeader("Content-Type");
                if (type.match(/^text/)) {
                    callback(request.responseText);
                }
            }
        }
        request.send(null);
    }

jQuery - AJAX

jQuery - AJAX经过对原生js的封装，使用和理解起来就简单的多了，关于jQuery - AJAX的参考资料很多，这里写个小栗子温习一下。

    $.ajax({url:"http://testurl.com",success:function(res){
        let data = res.data;
        return data;
    }});

    //load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
    $(selector).load(URL,data,callback);
    //必需的 URL 参数规定您希望加载的 URL。
    //可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
    //可选的 callback 参数是 load() 方法完成后所执行的函数名称。

Axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

• 从浏览器中创建 XMLHttpRequest

• 从 node.js 发出 http 请求

• 支持 Promise API

• 拦截请求和响应

• 转换请求和响应数据

• 取消请求

• 自动转换JSON数据

• 客户端支持防止 CSRF/XSRF (跨站请求伪造)

  安装方法(3种)：

    $ npm install axios

    $ bower install axios

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

参考地址：

https://www.npmjs.com/package/axios

http://www.tuicool.com/articles/eMb2yuY

具体axios相关会在以后继续总结和整理，这里举个工作中用过的小栗子

    import axios from 'axios';
    import qs from 'qs'; //使用qs库对数据进行编码

    const ajax = (url, type = 'get', data) => {
    return axios({
        method: type,
        url: url,
        data: data ? qs.stringify(data) : null,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded' // 表单数据格式正式的MIME类型
        }
      });
    }

    export default ajax;