AJAX 相关笔记

时间 2019-12-08

标签 ajax 相关笔记栏目 Ajax 繁體版

原文原文链接

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

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

简言

1 ajax最大的优势就是在不从新加载整个页面的状况下，能够与服务器交换数据并更新部分网页内容。使网页实现异步更新。
2 使用脚本操纵HTTP和WEB服务器进行数据交换，不会致使页面重载。php

原生ajax

虽然原生的ajax如今用的可能很少，但仍是有必要懂的。html

1 XMLHttpRequest

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

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 对象：node

new ActiveXObject("Microsoft.XMLHTTP");

处理ie低版本兼容性问题jquery

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()方法去指定这个请求的两个必须部分：方法和urlios

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

open()的第一个参数能够是：get post head put等ajax

get 和 post
1 get用于常规请求，适用于当URL彻底指定请求资源，当请求对服务器没有任何反作用以及当服务器的响应是可缓存的。
2 post 经常使用于html表单，它在请求主体中包含额外数据且这些数据常存储到服务器上的数据库中。相同URL的重复post请求从服务器获得的响应可能不一样，同时不该该缓存使用这个方法的请求。
简言之，post方法有本身的特色：
没法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠数据库
若是有请求头的话，请求进程的下个步骤是设置它。例如post请求须要“Content-Type”头指定请求主题的MIME类型。npm

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;