原生ajax使用

ajax是异步的JavaScript和XML。用来进行异步请求。浏览器可以用来向服务器发送一个ajax请求,进行页面的局部刷新。

1、get请求 头部不设置,参数转为查询字符串拼接到url上
2、post请求
参数在send()里
发表单格式,设置头部为表单格式,数据也要是表单格式数据
发json格式,设置头部为json格式,数据也要是json格式数据

get方式请求

//创建对象
var httpRequest = new XMLHttpRequest();
//建立连接
httpRequest.open('get', URL+'?' + qs.stringify(params));
//认证
//httpRequest.setRequestHeader("Authorization",sessionStorage.getItem('token'));
//发送请求
httpRequest.send();
//接收请求
httpRequest.onreadystatechange = function () {
    if (httpRequest.readyState === 4 && httpRequest.status === 200) {
        success(JSON.parse(httpRequest.responseText));
    }
    if (httpRequest.readyState === 4 && httpRequest.status === 500) {
        error(JSON.parse(httpRequest.responseText));
    }
}

post方式请求

//创建对象
var httpRequest = new XMLHttpRequest();
//建立连接
httpRequest.open('post', 'http://120.26.176.26:7788/user/login');
//在请求头部设置数据格式
httpRequest.setRequestHeader("Content-Type", "application/json");
// httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//认证
// httpRequest.setRequestHeader('Authorization', 'XXXXX')
//post参数在send()里
//发送请求
httpRequest.send(JSON.stringify(obj));
// httpRequest.send(qs.stringify(obj));
//接收响应
httpRequest.onreadystatechange = function () {
    if (httpRequest.readyState === 4 && httpRequest.status === 200) {
        success(JSON.parse(httpRequest.responseText));
    }
    if (httpRequest.readyState === 4 && httpRequest.status === 500) {
        error(JSON.parse(httpRequest.responseText));
    }
}
在Vue2中使用原生Ajax主要有以下几个步骤: 1. 引入XMLHttpRequest对象:在Vue组件中,可以通过`new XMLHttpRequest()`来创建一个XMLHttpRequest对象,该对象是用于发送Ajax请求的基础。 2. 发送Ajax请求:使用创建的XMLHttpRequest对象,通过调用其`open()`和`send()`方法来发送Ajax请求。`open()`方法用于指定请求的类型(GET或POST)和URL,`send()`方法用于发送请求。 3. 监听并处理响应:通过`onreadystatechange`事件来监听Ajax请求的状态和响应。当`XMLHttpRequest`对象的`readyState`属性发生改变时,会触发该事件。在事件处理函数中,可以使用`status`属性来获取响应的状态码,`responseText`属性来获取响应的内容。 4. 解析和使用响应数据:根据需要,可以使用内置的JSON对象来解析JSON格式的响应数据,或者直接使用响应的内容。 下面是一个使用原生Ajax发送GET请求的示例: ``` <template> <div> <button @click="getData">发送请求</button> <div v-if="responseData">{{responseData}}</div> </div> </template> <script> export default { data() { return { responseData: null } }, methods: { getData() { const xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data', true); xhr.send(); xhr.onreadystatechange = () => { if (xhr.readyState === 4 && xhr.status === 200) { this.responseData = xhr.responseText; } } } } } </script> ``` 在上述示例中,当点击按钮时,会发送一个GET请求到`/api/data`接口,并将响应的内容显示在页面上。 需要注意的是,使用原生Ajax需要手动处理一些错误和异步请求的情况,而Vue2提供了更方便的Axios等第三方库来简化Ajax请求的操作,推荐使用这些库来处理Ajax请求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值