【Ajax】-- 使用Ajax实现异步数据请求

目录

♡ ‧₊˚  定义  ‧₊˚ ♡

♡ ‧₊˚ XMLHttpReques  ‧₊˚ ♡

步骤：

1.创建XMLHttpRequest对象

2.使用open方法设置和服务器的交互信息

3.设置requestHeader()，如果默认可不设置

4.设置发送的数据，开始和服务器端交互

5.取得响应，注册事件

6.如果请求完成，并且响完成，可以获取到响应数据

.响应解码 MIME-TYPE

常用请求方式

使用get发送有参请求

使用get发送有参请求

使用post发送有参请求

使用post发送无参请求

---

♡ ‧₊˚  定义  ‧₊˚ ♡

AJAX：“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

♡ ‧₊˚ XMLHttpReques  ‧₊˚ ♡

先来简单认识一下XHR：

XMLHttpRequest对象是AJAX的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。

步骤：

1.创建XMLHttpRequest对象

var request = new XMLHttpRequest();

2.使用open方法设置和服务器的交互信息

open() 参数：

1.指定HTTP方法或动作，这个字符串不区分大小写，通常大家用大写字母来匹配HTTP协议。取值可以为：GET/POST/HEAD/DELETE/OPTIONS/PUT

• GET:用于常规请求，适用于URL完全指定请求资源，请求对服务器没有任何副作用，服务器的响应是可缓存的
• POST:用于HTML表单，它在请求主体中包含额外数据，且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。

2.URL,请求的主体，是相对于文档的URL。跨域请求会报错。

3.Boolean类型的值，如果值为false代表同步请求，send()方法将阻塞直到请求完成。如果这个参数是 true 或省略，请求是异步的。（这个参数一般不写，因为使用Ajax的目的就是异步请求，如果将其设置为false将失去异步请求的意义）

3.设置requestHeader()，如果默认可不设置

// 语法
// request.setRequestHeader(属性名称, 属性值);

// 常用的数据格式(编码可带可不带)

// 发送json格式数据
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
// 发送表单数据
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
// 发送纯文本(不指定Content-type时，此是默认值)
request.setRequestHeader('Content-type', 'text/plain; charset=utf-8');

// 发送html文本
request.setRequestHeader('Content-type', 'text/html; charset=utf-8');