使用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}`