原生ajax使用

106 阅读 0 评论 70 点赞

我是靠谱客的博主细腻小笼包，这篇文章主要介绍原生ajax使用，现在分享给大家，希望可以做个参考。

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

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

get方式请求

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//创建对象
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方式请求

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//创建对象
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));
    }
}