Ajax 的初识理解

Asynchronous JavaScript and XML(异步的 JavaScript 和 XML）是浏览器提供的一套方法，实现页面无刷新即可更新数据，提高用户浏览网站应用的体验

• Ajax 技术需要运行在网站环境中才能生效。

Ajax 应用场景:

1. 页面上拉加载更多数据

2. 列表数据无刷新分页

3. 表单项离开焦点数据验证

4. 搜索框提示文字下拉列表......

Ajax 运行原理:

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

01-Ajax 原生使用

Ajax 的实现步骤(简述)：

1. 创建 Ajax 对象：

var xhr = new XMLHttpRequest();

2. 确定 Ajax 的请求方式和请求地址：

xhr.open('get/post', 'url');

3. 设置请求头

xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");  // get方法请求头默认为此，可以不写

4. 发送请求：

xhr.send();  // post方法数据需要放于此，get方法则不用，两者具体区别记载于后文

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

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

Ajax 的返回状态：

• XMLHttpRequest.readyState有五种状态，代表着不同的含义：

值 状态 描述

0 UNSENT 代理被创建，但尚未调用 open()方法

1 OPENED open()方法已经被调用

2 HEADERS_RECEIVED send()方法已经被调用，并且头部和状态已经可获得

3 LOADING 下载中；responseText 属性已经包含部分数据

4 DONE 下载操作已完成

Ajax 的参数传递：

1.get方式请求参数

• 语法：

xhr.open('get', `${url}?${data}`);xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");  // 可写可不写，默认为此xhr.send();

2.post方式请求参数

• 语法：

xhr.open('post', `${url}`);xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");  // 必须写xhr.send(`${data}`);

Ajax 常用请求头：

1. 字符串形式请求头：

xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");

参数形式：

data="username=cxy&age=18";

2. JSON 形式请求头：

xhr.setRequestHeader("Content-type": "application/json");

参数形式：

data={  username: cxy,  age: 18};

Ajax 的数据格式：

• 格式转换：

/* 将JSON字符串转换成JSON对象 */JSON.parse();/* 将JSON对象转换成JSON字符串 */JSON.stringify();

• 在真实项目中，服务器端大多数情况下以 JSON 对象作为响应数据的格式；

• 当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接结果展示在页面中；

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