原生ajax 发送请求
原生ajax 发送请求
原生发送请求不带参数
<body>
<h2>原生ajax</h2>
<button>
原生发送请求不带参数
</button>
<script>
document.querySelector("button").onclick = function () {
// 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
const xhr = new XMLHttpRequest();//1.创建异步对象
// 2.设置请求的 地址 和方法
xhr.open("get", "http://ajax-api.itheima.net/api/settings");//2.在请求行
中设置请求地址和方法
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.addEventListener("load", function () {
// response 响应
console.log(xhr.response);
});
//3.设置请求头。。。。。。。
// 4.发送请求
xhr.send();//4.在请求体中发送请求
//5.监听异步对象状态的变化
};
</script>
</body>
get请求传递参数
<body>
<h2>get请求传递参数</h2>
<button>聊天机器人</button>
<script>
document.querySelector("button").onclick = function () {
// 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
const xhr = new XMLHttpRequest();
// 2.设置请求的 地址 和方法
// 没有params属性,需要自行拼接
xhr.open("get", "http://ajax-api.itheima.net/api/province");
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.addEventListener("load", function () {
// response 响应
console.log(xhr.response);
});
// 4.发送请求
xhr.send();
};
</script>
</body>
post请求传递参数
<body>
<h2>post请求传递参数</h2>
<button>发送请求</button>
<script>
// 测试-表单提交接口
document.querySelector("button").onclick = function () {
// 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
const xhr = new XMLHttpRequest();
// 2.设置请求的 地址 和方法
// 没有params属性,需要自行拼接
xhr.open("post", "http://ajax-api.itheima.net/api/data");
// post请求 一定要设置请求头
xhr.setRequestHeader(
"content-type",
"application/x-www-form-urlencoded"
);
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.addEventListener("load", function () {
// response 响应
console.log(xhr.response);
});
// 4.发送请求 post请求参数url格式化拼接 多个参数用&符隔开
xhr.send("username=admin&passwoed=123456");
};
</script>
</body>
post发送请求提交JSON
<body>
<h2>post发送请求提交JSON</h2>
<button>发送请求</button>
<script>
// 测试-表单提交接口
document.querySelector("button").onclick = function () {
// 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
const xhr = new XMLHttpRequest();
// 2.设置请求的 地址 和方法
// 没有params属性,需要自行拼接
xhr.open("post", "http://ajax-api.itheima.net/api/login");
// post请求 一定要设置请求头
xhr.setRequestHeader(
"content-type",
"application/json"
);
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.addEventListener("load", function () {
// response 响应
console.log(xhr.response);
});
// 4.发送请求 post请求参数url格式化拼接 多个参数用&符隔开
// 方法1
// const data ={username:'admin',password:'123456'}
// xhr.send(JSON.stringify(data));
// 方法2
const data =JSON.stringify({username:'admin',password:'123456'})
xhr.send(data)
};
</script>
</script>
</body>
原生ajax 发送post请求 提交JSON 解析响应数据
<body>
<h2>原生ajax 发送post请求 提交JSON 解析响应数据 </h2>
<button>发送请求</button>
<script>
document.querySelector("button").onclick = function () {
// 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
const xhr = new XMLHttpRequest();
// 2.设置请求的 地址 和方法
xhr.open("post", "http://ajax-api.itheima.net/api/login");
// 设置提交的内容格式为JSON
xhr.setRequestHeader("content-type", "application/json");
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.addEventListener("load", function () {
// response 响应
console.log(xhr.response);
// 把字符串转换为对象
const res = JSON.parse(xhr.response);
alert(res.message);
});
// 4.发送请求
// 请求体的数据 在send中提交
const data = { username: "admin", password: "123456" };
// 数据转为JSON并提交给服务器
xhr.send(JSON.stringify(data));
};
</script>
</body>
