Ajax

1. Ajax 基础

1. 传统网站中存在的问题

• 网速慢的情况下，页面加载时间长，用户只能等待
• 表单提交后，如果一项内容不合格，需要重新填写所有的表单内容
• 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

2. Ajax 概述

Ajax：中文英译：阿贾克斯
它是浏览器提供的一套方法，可以实行页面无刷新更新数据，提高用户浏览网站应用的体验

3. Ajax的应用场景

1. 页面上拉长加载更多数据
2. 列表数据无刷新分页
3. 表单项离开焦点数据验证
   4.搜索框提示文字下拉列表

4. Ajax 的运行环境

Ajax 技术<font color="red>需要运行在网站环境中才能生效，当前课程会使用Node创建服务器作为网站服务器

2. Ajax 运行原理及实现

1. Ajax 运行原理

Ajax 相当于浏览器发送请求和接收响应的代理人，以实现在不影响用户浏览器的情况下，局部更新页面数据，从而提高用户体验。

2. Ajax 的实现步骤

1. 创建Ajax 对象

var xhr = new XMLHttpRequest();

2. 告诉Ajax请求地址以及请求方式

xhr.open('ger', 'http://www.examole.com');

3. 发送请求

xhr.send();

4. 获取服务器给与客户端的响应数据

xhr.onload = function() {
  console.log(xhr.responseText);
}

3. 服务器端响应的数据格式

在真实的项目中，服务器端大多数情况下会以 JSON对象作为响应数据的格式。当客户端呢到响应数据时，要将JSON数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。

在http 请求与响应的过程中，无论时请求参数函数响应内容，如果时对象类型，最终都会被转换为对象字符串进行传输。

JSON.parse() // 将JSON 字符串转换为JSON对象