/**
* 目标:使用XMLHttpRequest对象与服务器通信
* 1. 创建 XMLHttpRequest 对象
* 2. 配置请求方法和请求 url 地址
* 3. 监听 loadend 事件,接收响应结果
* 4. 发起请求
*/
// 1. 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest()
// 2. 配置请求方法和请求 url 地址
xhr.open('GET', 'http://hmajax.itheima.net/api/province')
// 3. 监听 loadend 事件,接收响应结果
xhr.addEventListener('loadend', () => {
console.log(xhr.response)//返回对象结构的json字符串,axios会自动转为js对象,原生的则不会转
const data = JSON.parse(xhr.response)//json字符串转js对象
console.log(data.list.join('
'))//数组转字符串
document.querySelector('.my-p').innerHTML = data.list.join('
')//渲染到页面上
})
// 4. 发起请求
xhr.send()
/**
* 目标:使用XHR携带查询参数,展示某个省下属的城市列表
*/
const xhr1 = new XMLHttpRequest()
xhr1.open('GET', 'http://hmajax.itheima.net/api/city?pname=辽宁省')
// ?pname=辽宁省要自己加上去,查什么写什么
xhr1.addEventListener('loadend', () => {
console.log(xhr1.response)
const data1 = JSON.parse(xhr1.response)
console.log(data1)
document.querySelector('.city-p').innerHTML = data1.list.join('
')
})
xhr1.send()
/**
* 目标:使用xhr进行数据提交-完成注册功能
*/
document.querySelector('.reg-btn').addEventListener('click', () => {
const xhr2 = new XMLHttpRequest()
xhr2.open('POST', 'http://hmajax.itheima.net/api/register')
xhr2.addEventListener('loadend', () => {
console.log(xhr.response)
})
// 设置请求头-告诉服务器内容类型(JSON字符串)
xhr2.setRequestHeader('Content-Type', 'application/json')
// setRequestHeader是内置属性
// 准备提交的数据
const userObj1 = {
username: 'it007',
password: '71234567'
}
const userStr1 = JSON.stringify(userObj1)
// JSON.stringify:对象或值转字符串
// 设置请求体,发起请求
xhr2.send(userStr1)
})