什么是ajax
- ajax是javascript的一个方法(XMLHttpRequest)
- 相对于表单,ajax可以不用在刷新页面的情况下,可以和服务器通信获取数据并更新网页内容
创建ajax对象
let xhr = new XMlHttoRequest();
这样就通过构造函数创建了xhr对象了
设置请求方式(请求行)
请求行包含了请求方式
,请求地址
,
xhr.open("GET","/getData"); // 第一个参数是请求方法,第二个参数是请求地址
发送get请求
GET把参数直接写在后面就行了,格式是: ?key1=value1&key2=value2
// 设置请求行
xhr.open("GET","/getData?name=张三&age=20");
// 发送请求
xhr.send(null);
发送post请求
相对于get请求,post请求需要设置request header为application/x-www-form-urlcoded
,需要将参数写在xhr.send
里面,参数格式和get一样.
// 设置请求行
xhr.open("POST","/getInfo");
// 设置请求头
xhr.setRequestHeader("content-Type","application/x-www-form-urlcoded");
// 发送请求
xhr.send("name=张三&age=13")
发送get请求
因为ajax通常是运行在web服务器上的,我们需要处理前端请求,所以我们需要编写一个程序来处理请求
编写服务端
// 接收get请求
// 引入模块
const exress = require("express");
// 引入path模块
const path = require("path");
// 使用express
const app = exress();
// 设置静态资源目录
app.use(exress.static(path.join(__dirname,"public")));
// 接收并处理请求
app.get("/getData",(req,res) => {
// 响应数据
res.send({
code: 200,
msg: "请求成功!",
data: req.query
})
})
// 监听并启动服务
app.listen(3000,() => {
console.log("服务监听在3000并启动");
})
编写客户端
// 绑定事件
document.querySelector("input[type='button']").onclick = function () { // 1.实例化XMLHttpRequest对象
let xhr = new XMLHttpRequest();
// 2.设置请求行(请求方式,请求地址);
xhr.open("get","/getData?name=张三&age=14&hobby=打篮球");
// 发送请求
xhr.send(null);
// 接收请求响应
xhr.onreadystatechange = function () {
console.log(xhr.responseText);
// 将数据渲染到页面中
document.querySelector("div").innerHTML = xhr.responseText;
}
}
写好我们运行,然后就可以看看控制台里面是否接收到了数据
我们可以看到,控制台已经成功的接收到了服务器的响应,但是我们发现,控制台打印了三次,那是因为,readystate没发生一次变化,都会触发readystatechange事件
xhr.readyState 代码解释
0 : 实例化了XMLHttpRequest对象
1 : 设置了请求行(xhr.open())
2 : 发送数据(xhr.send())
3 : 接收数据中
4 : 数据全部接收完毕
所以我们可以判断一下,确保数据全部接收完毕并且请求成功
// 绑定事件
document.querySelector("input[type='button']").onclick = function () {
// 1.实例化XMLHttpRequest对象
let xhr = new XMLHttpRequest();
// 2.设置请求行(请求方式,请求地址);
xhr.open("get","/getData?name=张三&age=14&hobby=打篮球");
// 发送请求
xhr.send(null);
// 接收请求响应
xhr.onreadystatechange = function () {
// 判断是否请求成功并且数据全部就收完毕
if (xhr.readyState == 4 && xhr.status == 200) {
// 将响应内容打印到控制台
console.log(xhr.responseText);
// 将内容打印到页面中
document.querySelector("div").innerHTML = xhr.responseText;
}
我们再来看一下效果
这样就能保证数据全部接收完毕
发送post请求
编写服务端
// 引入模块
const express = require("express");
// 引入path模块
const path = require("path");
// 使用express
const app = express();
// 设置静态资源目录
app.use(express.static(path.join(__dirname,"public")));
// 使用中间层
app.use(express.urlencoded());
// 接收并处理请求
app.post("/getUserInfo",(req,res) => {
console.log(req.body);
res.send({
code: 200,
msg: "请求成功!",
data: req.body
})
})
// 监听并启动服务
app.listen(3000,() => {
console.log("服务监听在3000并启动");
})
编写客户端
document.querySelector("input[type='button']").onclick = function () {
// 1.实例化XMLHttpRequest对象
let xhr = new XMLHttpRequest();
// 2.设置请求行(请求方式,请求地址);
xhr.open("POST","/getUserInfo");
// 3.设置请求头(Request Header);
xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");
// 发送请求
xhr.send("name=张三&age=18&hobby=唱跳rap");
// 接收请求响应
xhr.onreadystatechange = function () {
// 判断是否请求成功并且数据全部就收完毕
if (xhr.readyState == 4 && xhr.status == 200) {
// 将响应内容打印到控制台
console.log(xhr.responseText);
// 将内容打印到页面中
document.querySelector("div").innerHTML = xhr.responseText;
}
}
}
运行结果:
ajax封装
每次都重复的创建xhr实在是太麻烦了,我们可以将xhr封装成一个函数
let ajaxTools = {
format: function(obj) {
// 初始化字符串
let str = "";
// 遍历对象
for (let k in obj) {
// 将对象转换成键值对
str = k + "=" + obj[k] + "&";
}
// 去掉字符串最后的&
str = str.slice(0,-1);
// 返回处理好的数据
return str;
},
ajax: function(options) {
// 实例化XMLHttpRequest对象
let xhr = new XMLHttpRequest();
// 获取数据
let data = options["data"] || {};
let url = options["url"];
let type = options["type"] || "get";
let callback = options["callback"];
// 将数据转换为键值对
data = this.format(data);
xhr.open(type,url);
// 判断请求方式
if (type.toLowerCase() == "get") {
// 设置请求行
xhr.open(type,url + "?" + data);
data = null;
}
// 设置请求头
if (type.toLowerCase() == "post") {
xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");
}
// 发送数据
xhr.send(data);
// 监听并处理响应
xhr.onreadystatechange = function() {
// 判断是否请求成功并且内容是否全部接收完毕
if (xhr.status == 200 && xhr.readyState == 4) {
// 将数据传入到callback中
callback(xhr.responseText);
}
}
}
}
这样使用起来就方便多了
文章头图: 超えた先に#オリジナル 超えた先に - smile的插画 - pixiv