标签：体验   交互式   取数   数据验证   发送数据   状态   lan   解决   floor   

1
2
3
4
5
6
7
8
9
10

$.ajax({
    "url":"",   //访问路径
    "data":"",  // 需要传输的数据
    "type":"",  // 请求方式
    "dataType":"",  // 返回值类型
    "success":function(obj){},      // 响应成功时的回调函数
    "error":function(obj){}     // 响应失败时的回调函数
});
$.get(URL,callback);
$.post(URL,data,callback);

用原生JS实现一个接口，能够用Ajax上传文件并显示上传进度，上传完成后接收一个来自服务器的json数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

var xhr = new XMLHttpRequest();
    xhr.open('POST', 'url');
    // 上传完成后的回调函数
    xhr.onreadystatechange = function() {
        if (xhr.status === 200) {　　
            console.log(xhr.responseText);
        } else {　
            console.log('上传出错');
        }
    };
    // 获取上传进度
    xhr.upload.onprogress = function(event) {
        console.log(event.loaded)
        console.log(event.total)
        if (event.lengthComputable) {
            var percent = Math.floor(event.loaded / event.total * 100);
            doc 大专栏  AJAX学习小结ument.querySelector("#progress .progress-item").style.width = percent + "%";
            // 设置进度显示
            console.log(percent)
        }
    };
    xhr.send(fd);

请简述 AJAX 及基本步骤？

简述 AJAX：AJAX即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax应用场景

Ajax的特点在于异步交互，动态更新web页面，因此它的适用范围是交互较多，频繁读取数据的web应用。
场景1. 用Ajax进行数据验证
场景2.按需取数据
场景3.自动更新页面

AJAX的优点

1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

   AJAX的缺点

   1.ajax不支持浏览器back按钮。
   2.安全问题 AJAX暴露了与服务器交互的细节。
   3.对搜索引擎的支持比较弱。
   4.破坏了程序的异常机制。
   5.不容易调试。
   6.跨域请求有一定限制。解决方式：jsonp。

   readyState属性状态

   有5个可取值： 0=未初始化 ，1=正在加载 2=已加载，3=交互中，4=完成

   AJAX请求中，readyStatus的状态有哪些

   0: 未打开, open()方法未调用。
   1: 未发送, send()方法未调用。
   2: 已获取响应头, send()方法已被调用，响应头和响应状态已经返回。
   3: 正在下载响应体, responseText已经获取了部分数据。
   4: 请求完成，整个请求过程结束了。

   AJAX 基本步骤：

   //初始化ajax对象
   var xhr = new XMLHttpRequest();
   //连接地址，准备数据
   xhr.open(“方式”,”地址”,是否为异步);
   //接收数据完成触发的事件
   xhr.onload =function(){}
   //发送数据
   xhr.send();

   AJAX的交互模型

   ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。它在客户端创建Ajax引擎，把传统方式下的一些服务器担负的工作转移到客户端，便于客户端资源来出来，减轻服务器和带宽的负担。

AJAX学习小结

标签：体验   交互式   取数   数据验证   发送数据   状态   lan   解决   floor   

原文地址：https://www.cnblogs.com/lijianming180/p/12251168.html