AJAX技术的基本实现以及了解

Ajax技术的基本使用

1.什么是Ajax

ajax是一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互，使用异步数据传输（http请求），这样的好处是可以是网页从服务器请求少量信息，不是整个页面，

总结来说，AJAX是异步的JavaScript 和xml ，是一种用于创建更好 更快的，交互性更强的Web应用程序的技术，AJAX是一种独立web服务器软件的浏览器技术，它不是一种新的编程语言是一种技术

2.XMLHttpRequest

浏览器在XMLHttpRequest类上定义了它们的HTTP API,这个类的每个实例都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和提取响应数据。

2.1创建XMLHTTPRequest对象

var request = new XMLHTTPRequest（）

2.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 或省略，请求是异步的。

request.open('get','https://api.muxiaoguo.cn/api/lishijr/')

3.设置requestHeader()

在AJAX中，如果需要像 HTML 表单那样 POST 数据，需要使用 setRequestHeader() 方法来添加 HTTP 头。

然后在 send() 方法中规定需要希望发送的数据：setRequestHeader()方法需要在open()和send()方法之间调用。

• 语法

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');

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

send()

参数：

请求主体内容，如果没有，为null，或者省略。

request.send(); //调用send()之后,请求就会发送到服务器

5.取得响应，注册事件

总体来说就是这四个步骤

function getRequest() {
// 1.创建XMLHttpRequest对象
var request = new XMLHttpRequest();
// 2.使用open方法设置和服务器的交互信息
request.open(‘get’, ‘https://api.muxiaoguo.cn/api/lishijr’);
// 3.如果默认可不设置requestHeader
// 4.发送请求
request.send();
// 5.如果请求完成，并且响应完成，获取到响应数据
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
// console.log(request.responseText);
// 转换为JSON对象
console.log(JSON.parse(request.responseText));
}
}
}