使用Ajax
使用AJAX
需要JS提供一个异步交互的对象XMLHttpRequest,实现数据的"交"和"拿"
第一步:创建一个能够发起HTTP请求消息的对象
let xhr = new XMLHttpRequest(); //向服务器发送遵循HTTP协议的请求消息,期望得到XML格式的响应数据
注意:括号必须加!创建对象后就可以使用xhr变量名来使用这个对象的各种属性与方法了
|
第二步:XHR对象打开到服务器的连接(拨通电话)
xhr.open(method,url,async);
xhr.open(method,url); 推荐写法!
参数1:method -- 要使用的 HTTP 的方法,如:GET/POST/PUT/DELETE等,大写!
参数2:url -- 发送请求的 URL(处理业务的后台接口),可以省略:协议 IP地址 端口号
参数3:async 【可选,布尔类型】表示是否执行异步操作,默认值为true异步。false为同步
|
第三步:提前声明好,如果得到了服务器端的响应消息,该如何处理
xhr.onload = function(){
let result = xhr.responseText //获取响应消息的主体内容,保存在result变量中
}
|
第四步:向服务器发送请求消息
注意:一定是先发送请求消息,得到响应以后,再执行第三步
xhr.send(); //发送一个没有请求主体的请求消息,比如GET
xhr.send(null); //发送一个没有请求主体的请求消息
xhr.send('uname=tom&upwd=123'); //发送一个有请求主体的消息,比如POST
|
注意事项
post 方法的坑:
1.server.js 中配置中间件
2.在open 方法后,紧接着就要写,
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=utf-8')
3.xhr.send(data) 需要传入请求主体 let data = `id=${i}&tit=${t}&price=${p}`
|