《JavaScript重难点实例精讲》— Ajax 技术

《JavaScript重难点实例精讲》— Ajax 技术

xiaolu
2022-02-08 / 0 评论 / 14 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年02月14日,已超过134天没有更新,若内容或图片失效,请留言反馈。
Ajax 的基本原理是通过 XMLHttpRequest 对象向服务器发送异步请求,获取服务器返回的数据后,利用 DOM 的操作来更新页面。
——《JavaScript重难点实例精讲》


XMLHttpRequest 对象

XMLHttpRequest 生命周期

  • 创建 XMLHttpRequest 对象
  • 初始化请求参数
  • 发送请求传递数据
  • 处理服务器的响应

    // IE7+, Firefox, Chrome, Opera, Safari
    // IE7 以下的就算了,让他换个浏览器,别费劲了
    xhr = new XMLHttpRequest();
    xhr.open('post', '/user/profile', true);
    xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8")
    xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // do something
      document.write(xhr.responseText);
    } else {
      // do something
    }
    }
    xhr.send("some messsage");

Ajax 新增 7 个进度事件

一个完整的 ajax 请求都会从 loadstart 事件开始,然后不间断地触发 progress 事件,然后触发 load abort timeout 或者 error 事件中的 一个 ,最后触发 loadend 事件
——《JavaScript重难点实例精讲》
  • loadstart 在开始接收响应时触发
  • progress 在接收响应期间不断触发,直至请求完成
  • error 在请求失败时触发
  • abort 在主动调用 abort() 函数时触发,表示请求终止
  • load 在数据接收完成时触发
  • loadend 在通信完成时或者 error abort load 事件后触发
  • timeout 在请求超时时触发

Ajax 优点

  • 无刷新更新数据
  • 异步通信【减少数据传输,降低网络流量,响应迅速】
  • 前后端分离
  • 前后端负载均衡【前端处理一部分数据逻辑,减轻后端压力】
  • 标准化支持【被浏览器广泛支持,技术和机制通用】

Ajax 缺点

  • 破坏浏览器正常后退功能
  • 安全性问题
  • 对 SEO 支持较弱【SEO 屏蔽 JS 代码,而页面是由 JS 生成或依赖 JS,vue react 也有类似问题,不过都有解决方案】
  • 违背 URL 唯一资源定位初衷【相同资源 (同一 url) 对应的内容不一致】

Ajax 提交表单

当获取字段较多表单数据时,使用 document 的选择器或 jquery 选择器都有些麻烦,比如:

var username = document.getElementById('username').value();
var email = document.getElementById('email').value();
// ... more form fields

var username = $('#username').val();
var email = $('#email').val();
// ... more form fields

使用 jqueryserialize() 函数或者 serializeArray() 序列化 form 表单提交:

$(selector).serialize();
// username=xiaolu&password=12345&telphone=01000000&email=example@qq.com
$(selector).serializeArray();
// [ {name: 'username', value: 'xiaolu'}
//   {name: 'password', value: '12345'}
//    ...
// ]

此方法固然好,但是不能解决文件上传问题,此时应使用 FormData 对象提交:

var formData = new FormData($('#myForm'));
$.ajax({type:'POST', url: '/user/profile', data: formData})

创建 formdata 实例时可以直接传递表单对象,十分方便!

Ajax 跨域解决方案

出于用户安全的考虑,浏览器的同源策略约定客户端脚本在没有明确授权的情况下,不能读写不同源的目标资源,同源: 协议、域名、端口号 三者完全相同,同源策略有两种表现形式:DOM 同源策略和 xhr 同源策略,前者主要针对 iframe 场景,后者则是 ajax

解决方案一,后端设置 http 请求响应头
// Example for Express
app.all('*', function(req, res, next){
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', '*');
  next();
});
解决方案二,JSONP

客户端

var buildJSONP = function() {
  var studentNo = document.queryuSelector('#studentNo').value;
  var param = 'studentNo=' + studentNo + '&callback=successFn';
  var url = 'http://localhost:3000/getUserByStudentNo?param';
  var script = document.createElement('script');
  script.src = url;
  document.body.appendChild(script);
}

服务端

app.get('/getUserByStudentNo', function (req, res) {
    var studentNo = req.query.callback;
    var callbackFn = req.query.callback;
    var result = {
        studentNo: 1001,
        name: 'kingx1',
        age: 18
    };
    var data = JSON.stringfy(result);
    res.writeHead('200', { 'Content-Type': 'application/json' });
    res.write(callbackFn + '(' + data + ')');
    res.write(data);
    res.end();
});
JSONP 的优劣

优点:使用简单,不存在兼容问题
缺点:只支持 GET 请求,难以确定请求是否失败

0

评论 (0)

取消