Ajax异步

示例代码

  1. GET(normal)

    var url='https://localhost?a=1&b=2';
    var ajax=new XMLHttpRequest();
    ajax.open("GET", url, true);
    ajax.withCredentials=true;
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.send();
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            document.body.innerHTML = ajax.responseText;
        }
    }
    
  2. POST(normal)

    var url='https://localhost';
    var ajax=new XMLHttpRequest();
    ajax.open("POST", url, true);
    ajax.withCredentials=true;
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.send("a=1&b=2");
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            document.body.innerHTML = ajax.responseText;
        }
    }
    
  3. POST(json)

    var url='https://localhost';
    var ajax=new XMLHttpRequest();
    ajax.open("POST", url, true);
    ajax.withCredentials=true;
    ajax.setRequestHeader("Content-type", "application/json");
    ajax.send('{"a":1,"b":2}');
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            document.body.innerHTML = ajax.responseText;
        }
    }
    
  4. POST(兼容IE的XHR)

    var url='https://localhost';
    var ajax;
    if (window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
    } else {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    ajax.open("POST", url, true);
    ajax.send('a=1&b=2');
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            document.body.innerHTML = ajax.responseText;
        }
    }
    
  5. POST(异步文件上传)

    var url='https://localhost';
    var upload=document.my_form.my_file;
    upload.onchange=function (event) {
        var file=event.target.files[0];
        var form_data=new FormData();
        form_data.append('file_id', 123);
        form_data.append('my_file', file);
        var ajax=new XMLHttpRequest();
        ajax.withCredentials=true;
        ajax.open('POST', url, true);
        ajax.send(form_data);
        ajax.onreadstatechange=function () {
            if (ajax.readySate==4 && ajax.status==200) {
                document.body.innerHTML = ajax.responseText;
            }
        }
    }
    

实现方式

  1. Ajax两种实现方式
     Fetch
     XMLHttpRequest(XHR)
    

区别联系

  1. XMLHttpRequest与Fetch区别和联系
     # 联系
     Fetch与XMLHttpRequest同样都能实现Ajax请求
     # 区别
     XMLHttpRequest遗留了一些问题:
         1. 配置和调用方式非常混乱;
         2. 不符合关注分离(Separation of Concerns)的原则;
         3. 基于事件的异步模型写法也没有Promise,generator/yield,async/await友好。
     Fetch就是为了解决XMLHttpRequest遗留的问题而生的。
    

请求

  1. 请求方式

     # 简单请求
     GET
     HEAD
     POST
         Content-Type:
             text/plain;
             multipart/form-data;
             application/x-www-form-urlencoded;
     # 复杂请求
     PUT
     DELETE
     CONNECT
     OPTIONS
     TRACE
     PATCH
    
  2. 预检请求触发条件

     # 当至少满足下列条件之一时,会触发预检请求
     1. 请求首部Content-Type不是以下3者之一时
         1. text/plain;
         2. multipart/form-data;
         3. application/x-www-form-urlencoded;
     2. 请求方式为复杂请求时
         1. PUT
         2. DELETE
         3. CONNECT
         4. OPTIONS
         5. TRACE
         6. PATCH
     3. 请求的首部为安全首部
         1. Accept
         2. Accept-Language
         3. Content-Language
         4. Content-Type(注意下面的附加要求)
             DPR
             Downlink
             Save-Data
             Viewport-Width
             Width
    
  3. 请求说明

方法 说明
GET 请求服务器获取指定数据
POST 请求服务器修改指定数据
PUT 请求服务器添加指定数据
DELETE 请求服务器删除指定数据
HEAD 类似于get请求,响应中没有具体的内容,用于获取报头
CONNECT 能够将连接改为管道方式的代理服务器
TRACE 回显服务器收到的请求
OPTIONS 预检请求

响应

  1. Ajax响应状态ajax.status
     1xx: 临时响应
     2xx: 成功响应
     3xx: 重定向
     304: 当请求头中有If-Modified-Since与响应头中Last-Modified一致时,浏览器从缓存中获取内容
     4xx: 客户端错误
     5xx: 服务器错误
    

首部

  1. CORS首部字段集合
     # CORS简单首部集合
         Cache-Control
         Content-Language
         Expires
         Last-Modified
         Pragma
         Content-Type(注意下面的附加要求)
             DPR
             Downlink
             Save-Data
             Viewport-Width
             Width
     # CORS安全首部集合
         Accept
         Accept-Language
         Content-Language
         Content-Type(注意下面的附加要求)
             DPR
             Downlink
             Save-Data
             Viewport-Width
             Width
    

响应头

  1. 服务器端配置响应头

     # AJAX请求配置返回数据缓存1小时
     Access-Control-Max-Age: 3600
    
     # 列出了哪些首部可以作为响应的一部分暴露给外部
     Access-Control-Expose-Headers: Content-Length, X-Kuma-Revision
    
     # 告诉预检请求哪些响应首部可以暴露出来
     Access-Control-Allow-Headers: Accept, Accept-Language, Content-Language
    
     # 允许AJAX带凭证发起请求
     Access-Control-Allow-Credentials: true
    
     # 允许AJAX请求的方式
     Access-Control-Allow-Methods: OPTIONS, PUT, DELETE, TRACE, CONNECT
    
     # 允许AJAX跨域的请求域名
     Access-Control-Allow-Origin: www.demo.com
    

请求状态

  1. Ajax请求状态ajax.readyState
     0: 请求未初始化(socket套接字未创建)
     1: 连接已建立(socket套接字已经创建)
     2: 请求已发送(客户端通过建立的套接字发送请求)
     3: 请求处理中(服务器端进行业务处理)
     4: 请求已完成(服务器通过建立的套接字返回响应)
    

results matching ""

    No results matching ""