目录
♡ ‧₊˚ 定义 ‧₊˚ ♡
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');
4.设置发送的数据，开始和服务器端交互
//参数是请求主体内容，如果没有则为null或者省略。
request.send(); //调用send()之后,请求就会发送到服务器5.取得响应，注册事件
发送请求后，会收到响应，收到响应后，XHR对象的以下属性会被填充上数据：
-
responseText：作为响应体返回的文本。
-
responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。
-
status：响应的 HTTP 状态。
-
statusText：响应的 HTTP 状态描述。
-
readyState：返回HTTP请求状态
0 open()尚未调用 UNSENT
1 open()已调用 OPENED
2 接收到头信息 HEADERS_RECEIVED
3 接收到响应主体 LOADING
4 响应完成 DONE
-
readystatechange ：请求状态改变事件 当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件
6.如果请求完成，并且响完成，可以获取到响应数据
// 获取网络请求返回的数据
// readystatechange 请求状态改变事件
// 当readyState值改变为4并且状态码为200时，所有的浏览器都触发该事件
request.onreadystatechange = function(){
if(request.readyState === 4 && request.status === 200){
console.log(JSON.parse(request.responseText));
.响应解码 MIME-TYPE
- MIME类型为text/plain,text/html,text/css 文本类型时，可以使用responseText属性解析
- MIME类型为XML文档类型时，使用responseXML属性解析
- 如果服务器发送对象，数组这样的结构化数据作为其响应，他应该传输JSON编码的字符串数据。通过responseText接受到它，可以把它传递给JSON.parse()方法来解析。
常用请求方式
-
使用get发送有参请求
<body>
<button onclick="getData()">获取数据</button>
<script>
function getData() {
// 1.创建XMLHttpRequest对象
var request = new XMLHttpRequest()
// 2.配置请求方式，设置请求接口地址
// 使用open方法设置和服务器的交互信息
request.open('get','测试接口地址')
// 3.设置请求头的格式，在这里可以不用设置
// requestHeader()
// 4.发送请求
request.send()
// 5.获取网络请求返回的数据
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
console.log(JSON.parse(request.responseText));
var res = JSON.parse(request.responseText)
// DOM
// 创建节点
for(var index in res.data){
var div = document.createElement('div')
// 数据赋值
// 将节点添加到DOM结构中
div.innerHTML = res.data[index].introduce
document.body.appendChild(div)
}
}
}
}
</script>
</body>-
使用get发送有参请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入qs -->
<script src="./qs.js"></script>
</head>
<body>
<!-- 输入框 -->
<input type="text" name="" id="inp">
<!-- 获取数据的按钮 -->
<button onclick="getWeatherData()">获取天气数据</button>
<script>
// 获取用户输入的值
var inp = document.getElementById('inp')
var cityName;
inp.oninput = function () {
cityName = this.value
}
// https://api.muxiaoguo.cn/api/tianqi?city=长沙&type=1&api_key=779d7e46708290a5
function getWeatherData() {
var request = new XMLHttpRequest()
// 第一种方式 拼接字符串
// request.open('get','https://api.muxiaoguo.cn/api/tianqi?city=' + cityName + '&type=1&api_key=779d7e46708290a5')
// 第二种方式 封装参数对象
var params = {
city: cityName,
type: 1,
api_key:'779d7e46708290a5'
}
request.open('get','https://api.muxiaoguo.cn/api/tianqi?' + Qs.stringify(params))
request.send()
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
console.log(request.responseText);
var res = JSON.parse(request.responseText)
console.log(res);
alert(`${cityName}的温度是${res.data.temp}`)
}
}
}
</script>
</body>
</html>-
使用post发送有参请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="toLogin()">登录</button>
<script>
function toLogin() {
var request = new XMLHttpRequest()
request.open('post','对应的登录接口地址')
// 配置参数
var params = {
username: '………………',
password: '………………'
}
// 设置请求头
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
request.send(JSON.stringify(params))
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
console.log(request.responseText);
}
}
}
</script>
</body>
</html>-
使用post发送无参请求
与get发送无参请求是一样的，只需要将get改成post。
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
