原生ajax请求

最新推荐文章于 2021-12-30 11:07:36 发布

Xyt1737

最新推荐文章于 2021-12-30 11:07:36 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

文章标签： ajax

本文链接：https://blog.youkuaiyun.com/Xyt1737/article/details/120498771

本文详细介绍了AJAX（异步JavaScript和XML）技术，通过实例展示了如何使用GET请求无参数和携带参数，以及POST请求携带参数的方法，帮助读者理解浏览器与服务器间的数据交互过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。

1. get无参数

// 1.创建实例对象

var xhr = new XMLHttpRequest();

// 2.打开一个连接

xhr.open("get", 'http://47.101.202.33:8002/index/findAllCategory');

// 3.发送请求

xhr.send();

// 4.接收响应

xhr.onreadystatechange = function () {

    if (xhr.readyState === 4 & xhr.status === 200) {

        console.log(xhr.responseText)

    }

}

2. get携带参数

var qs = Qs;

// 1.创建一个实例

var xhr = new XMLHttpRequest();

// 2.打开一个连接

let obj = {

    page: 1,

    pageSize: 10

}

console.log(qs.stringify(obj))

xhr.open('get', "http://47.101.202.33:8002/index/pageQueryArticles" + '?' + qs.stringify(obj));

// 3.发送请求        

xhr.send();

// 4.接收响应

xhr.onreadystatechange = function () {

    if (xhr.readyState === 4 & xhr.status === 200) {

        console.log(xhr.responseText)

    }

}

3. post携带参数

// 1.创建一个实例

var xhr = new XMLHttpRequest();

// 2.打开一个连接

let obj = {

    username: 'admin1',

    password: 123321

}

xhr.open('post', "http://47.101.202.33:8002/user/login");

xhr.setRequestHeader('Content-Type', 'application/json')

xhr.send(

    JSON.stringify(obj)

);

// 4.接收响应

xhr.onreadystatechange = function () {

    if (xhr.readyState === 4 & xhr.status === 200) {

        console.log(xhr.responseText)

    }

}