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的优点
- 通过异步模式,提升了用户体验
- 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
- 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引擎,把传统方式下的一些服务器担负的工作转移到客户端,便于客户端资源来出来,减轻服务器和带宽的负担。