返还数据类型
-
服务器返还json数据
xhr.responseText //来获取
-
服务器返还xml数据
xhr.responseXML //获取值
- 重写response里的content-type内容
- xhr.overrideMimeType(‘text/xml; charset = utf-8’)
xml接口
- 前端页面
- xhr.open(“get”,"/xml",true);
- 客户端设置 响应报头的 content-type
xhr.overrideMimeType(“text/xml”);
< script>
document.querySelector("button").onclick = function(){
let xhr = new XMLHttpRequest();
xhr.open("get","/xml",true);
//客户端设置 响应报头的 content-type
xhr.overrideMimeType("text/xml");
xhr.onload = function(){
// console.log(xhr.responseText);
console.log(xhr.responseXML);
let name = xhr.responseXML.getElementsByTagName("name")[0].innerHTML;
console.log(name);
}
xhr.send();
}
< /script >
- 后端服务器
router.get("/xml",ctx=>{
//接口文档: 接口: /xml
ctx.set("content-type","text/xml");
ctx.body = `<?xml version ='1.0' encoding='utf-8'?>
< books>
< nodejs>
< name>node实战< /name>
< price>56元< /price>
< /nodejs>
<vue>
<name>vue实战</name>
<price>59元</price>
</vue>
</books>
`
})
onreadystatechange
onreadystatechange:存有处理服务器响应的函数,每当 readyState 改变时,onreadystatechange 函数就会被执行。
readyState:存有服务器响应的状态信息。
- 0: 请求未初始化(代理被创建,但尚未调用 open() 方法)
- 1: 服务器连接已建立(
open
方法已经被调用) - 2: 请求已接收(
send
方法已经被调用,并且头部和状态已经可获得) - 3: 请求处理中(下载中,
responseText
属性已经包含部分数据) - 4: 请求已完成,且响应已就绪(下载操作已完成)
status常用状态码
针对ajax的详细解释
-
get注意点
- get通过parmas传参 必须给参数,否则地址错误,
- query方式传参,则不会影响地址。
- post也可以使用query方式,不是get独有的
- get和querystring的问题,通过url传参
-
post注意点
- post传参是没有数据量限制的,通常会是服务器限制。
- post传参是正文区域传参所以需要设置编码格式,而get是在头部Url中,所以不需要
- 发送数据时候需要设置http正文头格式;