XHR 的事件与FormData
XHR 的事件
load事件
//1.load事件 //响应数据可用时触发 const url ='https://www.imooc.com/api/http/search/suggest?words=js'; const xhr = new XMLHttpRequest(); // xhr.onload = () => { // /* if (xhr.readyState != 4) return; */ // if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { // console.log(xhr.response); // } // }; xhr.addEventListener('load', () => { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { console.log(xhr.response); } },false); xhr.open('GET', url, true); xhr.send(null); //IE6~8不支持load事件
erro事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//2.error事件
//请求发生错误的时触发
//const url ='https://www.imooc.com/api/http/search/suggest?words=js';
const url = 'https://www.iimooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();
xhr.addEventListener('load', () => {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.response);
}
}, false);
xhr.addEventListener('error',()=>{
console.log('error');
},false)
xhr.open('GET', url, true);
xhr.send(null);
//IE10开始支持
</script>
</body>
</html>
abort事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//3.abort事件
//调用abort（）终止请求时触发
const url ='https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();
xhr.addEventListener('load', () => {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.response);
}
}, false);
xhr.addEventListener('abort',()=>{
console.log('abort');
},false);
xhr.open('GET', url, true);
xhr.send(null);
xhr.abort();
//IE10开始支持
</script>
</body>
</html>
timeout事件
FormData
使用Ajax提交表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FormData</title>
</head>
<body>
<form id="login" action="https://www.imooc.com/api/http/search/suggest?words=js" method="post"
enctype="application/x-www-form-urlencoded">
<input type="text" name="username" placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
<input id="submit" type="submit" value="提交" />
</form>
<script>
//1.使用Ajax提交表单
//2.FormDate的基本用法
//通过HTML表单元素创建FormDate对象
//const fd = new FormData(表单元素);
//data.append('age',18);
//data.append('sex','male');
//xhr.send（fd）；
//通过append（）方法添加数据
const login = document.getElementById('login');
//console.log(login.username);
//console.log(login.password);
const {
username,
password
} = login;
const btn = document.getElementById('submit');
const url = 'https://www.imooc.com/api/http/search/suggest?words=js'
btn.addEventListener(
'click',
e => {
//阻止表单自动提交
e.preventDefault();
//表单数据验证
//发生Ajax请求
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();
xhr.addEventListener('load', () => {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.response);
}
},
false
);
xhr.open('POST', url, true);
//组装数据
//const data = 'username=${username.value}&password=${passwrod.value}';
const data = new FormData(login);
data.append('age',18);
data.append('sex','male');
//console.log(data);
/* for(const item of data){
console.log(item);
} */
// xhr.setRequestHeader(
// 'Content-Type',
// 'application/x-www-form-urlencoded'
// );
xhr.send(data);
//xhr.send('username=lyw&passwrod=12345')
},
false
);
</script>
</body>
</html>
FormData的基本用法
