1. Ajax 基础
1. 传统网站中存在的问题
- 网速慢的情况下，页面加载时间长，用户只能等待
- 表单提交后，如果一项内容不合格，需要重新填写所有的表单内容
- 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间
2. Ajax 概述
Ajax：中文英译：阿贾克斯
它是浏览器提供的一套方法，可以实行页面无刷新更新数据，提高用户浏览网站应用的体验
3. Ajax的应用场景
- 页面上拉长加载更多数据
- 列表数据无刷新分页
- 表单项离开焦点数据验证
4.搜索框提示文字下拉列表
4. Ajax 的运行环境
Ajax 技术<font color="red>需要运行在网站环境中才能生效，当前课程会使用Node创建服务器作为网站服务器
2. Ajax 运行原理及实现
1. Ajax 运行原理
Ajax 相当于浏览器发送请求和接收响应的代理人，以实现在不影响用户浏览器的情况下，局部更新页面数据，从而提高用户体验。
2. Ajax 的实现步骤
- 创建Ajax 对象
var xhr = new XMLHttpRequest();
- 告诉Ajax请求地址以及请求方式
xhr.open('ger', 'http://www.examole.com');
- 发送请求
xhr.send();
- 获取服务器给与客户端的响应数据
xhr.onload = function() {
console.log(xhr.responseText);
}
3. 服务器端响应的数据格式
在真实的项目中，服务器端大多数情况下会以 JSON对象作为响应数据的格式。当客户端呢到响应数据时，要将JSON数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。
在http 请求与响应的过程中，无论时请求参数函数响应内容，如果时对象类型，最终都会被转换为对象字符串进行传输。
JSON.parse() // 将JSON 字符串转换为JSON对象
标签：xhr,JSON,响应,Ajax,数据,页面 来源： https://www.cnblogs.com/counter/p/14708451.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。