<!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>
<script>
// 1.responseType 和 response 属性
// 文本形式的响应内容
// responseText 只能在没有设置 responseType 或者 responseType = '' 或 'text' 的时候才能使用
// 2.timeout 属性
// 3.withCredentials 属性
// 1.abort()方法
// 2.setRequestHeader()方法 可以设置请求头信息
// 1.load 事件
// 2.error 事件
// 3.abort 事件 调用 abort() 终止请求时触发
// 4.timeout 事件
// 1.responseType 和 response 属性
// IE6~9 不支持，IE10 开始支持
// const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
// const xhr = new XMLHttpRequest();
// xhr.onreadystatechange = () => {
// if (xhr.readyState != 4) return;
// if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
// // 文本形式的响应内容
// // responseText 只能在没有设置 responseType 或者 responseType = '' 或 'text' 的时候才能使用
// // console.log('responseText:', xhr.responseText);
// // 可以用来替代 responseText
// console.log('response:', xhr.response);
// // console.log(JSON.parse(xhr.responseText));
// }
// };
// xhr.open('GET', url, true);
// // xhr.responseType = '';
// // xhr.responseType = 'text';
// xhr.responseType = 'json';
// xhr.send(null);
// 2.timeout 属性
// 设置请求的超时时间（单位 ms）
// IE6~7 不支持，IE8 开始支持
// const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
// const xhr = new XMLHttpRequest();
// xhr.onreadystatechange = () => {
// if (xhr.readyState != 4) return;
// if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
// console.log(xhr.response);
// }
// };
// xhr.open('GET', url, true);
// xhr.timeout = 10000;
// xhr.send(null);
// 3.withCredentials 属性
// 指定使用 Ajax 发送请求时是否携带 Cookie
// 指定使用 Ajax 发送请求时是否携带 Cookie
// 使用 Ajax 发送请求，默认情况下，同域时，会携带 Cookie；跨域时，不会
// xhr.withCredentials = true;
// 最终能否成功跨域携带 Cookie，还要看服务器同不同意
// const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
// // const url = './index.html';
// const xhr = new XMLHttpRequest();
// xhr.onreadystatechange = () => {
// if (xhr.readyState != 4) return;
// if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
// console.log(xhr.response);
// }
// };
// xhr.open('GET', url, true);
// xhr.withCredentials = true;
// xhr.send(null);
// IE6~9 不支持，IE10 开始支持
// 1.load 事件
// 响应数据可用时触发
// const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
// const xhr = new XMLHttpRequest();
// // xhr.onload = () => {
// // 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);
// 2.error 事件
// 请求发生错误时触发
// IE10 开始支持
// 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);
// 3.abort 事件
// 调用 abort() 终止请求时触发
// IE10 开始支持
// 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();
// 4.timeout 事件
// 请求超时后触发
// IE8 开始支持
// 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(
// 'timeout',
// () => {
// console.log('timeout');
// },
// false
// );
// xhr.open('GET', url, true);
// xhr.timeout = 10;
// xhr.send(null);
var xhr = new XMLHttpRequest();
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
// const url = './index.html';
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState != 4) return;
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
console.log(xhr.response);
}
};
xhr.open('GET', url, true);
xhr.withCredentials = true;
xhr.open('GET', '/1.json', true);
// 2.setRequestHeader()方法
// 可以设置请求头信息
// xhr.setRequestHeader(头部字段的名称, 头部字段的值);
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(null);
// 1.abort()方法
// 终止当前请求
// 一般配合 abort 事件一起使用
xhr.abort();
</script>
</body>
</html>