ajax的代码
新建请求对象实现
var xhr = new XMLHttpRequest()
//以对应的请求方式来打开对应的请求地址
xhr.open('get', 'http://jsonplaceholder.typicode.com/todos')
//发送请求
xhr.send()
//监听请求状态的变化 readystate (1-5 1准备发送 2 发送完成 3 发送完成数据准备接收 4数据
接收完毕 5 错误)
xhr.onreadystatechange = () => {XMLHttpRequest对象的相关属性及方法
属性
readyState 状态码
status http状态码
timeout 超时时间
responseText 响应文本
方法
open 打开一个请求
send 发送请求
setRequestHeader 设置请求头
getResponseHeader 获取响应头
事件
onreadystatechange 监听状态的改变
//进行判断对应的状态 4是数据接收完毕
if (xhr.readyState == 4) {
//responseText 表示返回的文本(字符串)
console.log(xhr.responseText)
}
}
onreadystatechange 监听状态的改变
var xhr = new XMLHttpRequest()
//属性
//readyState 对应的xhr对象的一个状态码(这个状态码只有xhr才有)
// 0 没有请求 1准备发送 2请求已经发送 3请求发送完毕 准备接收响应数据 4响应接收完毕
console.log(xhr.readyState);
//status http状态码 (只要发送http请求都会有)
// 取值为100 - 599
// 1开头(表示成功 但是需要后续操作)
// 2开头 (成功 200)
// 3开头 (重定向 304)
// 4开头 (表示客户端错误 404(找不到页面) 403(权限不足))
// 5开头 (表示服务器错误 500)
console.log(xhr.status);
//responseText 响应的文本
console.log(xhr.responseText);
//responseXML 响应的xml
console.log(xhr.responseXML);
//响应类型
console.log(xhr.responseType);
//响应的地址
console.log(xhr.responseURL);
//设置请求的超时时间
console.log(xhr.timeout );
//方法
//设置请求 open 请求方式 请求地址
xhr.open('get','')
//发送方法 里面的传递的参数是设置给请求体的内容
xhr.send('')
//请求头相关 设置请求头 通过键值对的方式 键 值 都是字符串
xhr.setRequestHeader('Connection','keep-alive')数据渲染案例
get请求封装
//响应头获取 通过key来获取value
xhr.getResponseHeader('Content-type')
//事件 当前状态改变的事件
xhr.onreadystatechange = ()=>{
//判断readyState为4 http状态码以2开头
if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){