使用Ajax进行数据请求

一、Ajax开源库有很多选择，大家可以根据需求自己选择

jQuery：jQuery是一个广泛应用的JavaScript库，它提供了简洁而强大的API来处理Ajax请求。通过$.ajax()方法或其简化的$.get()和$.post()方法，可以轻松地发送异步请求和处理服务器响应。
Axios：Axios是一个基于Promise的现代化HTTP客户端，用于浏览器和Node.js。它提供了简洁的API来处理Ajax请求，支持并发请求、请求拦截、请求取消等功能，使用起来非常方便。
Fetch API：Fetch API是一种现代的原生JavaScript API，用于发起网络请求。它提供了更直接的方式来发送Ajax请求，并且支持Promise，可以更方便地处理异步操作。
Superagent：Superagent是一个流行的HTTP请求库，适用于浏览器和Node.js环境。它提供了链式调用的API，支持各种HTTP方法、文件上传、Cookie管理等功能。
Axios、Fetch API和Superagent都是适用于浏览器和Node.js的通用HTTP请求库，支持跨平台使用。

这只是一小部分常用的Ajax开源库，根据具体需求和项目的特点，你还可以根据功能、性能、维护活跃度等因素选择其他合适的库来处理Ajax请求。甚至自己封装适用自己的Ajax。

二、以下是一个简单的Ajax进行数据请求的方法。

创建 XMLHttpRequest 对象：在JavaScript中，使用new XMLHttpRequest()来创建一个XMLHttpRequest对象。
设置请求的参数：使用open()方法设置HTTP请求的方法（GET或POST）和URL。例如，xhr.open('GET', 'http://example.com/data', true)表示使用GET方法发送请求到"http://example.com/data"，第三个参数为true表示使用异步请求。
设置响应处理函数：使用onreadystatechange属性指定一个回调函数来处理服务器响应。可以通过判断readyState和status属性来确定请求的状态和是否成功。当readyState为4且status为200时表示请求成功，可以处理服务器返回的数据。
```
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText); // 处理服务器返回的数据
    // ...
  }
};
```
发送请求：使用send()方法发送请求。对于GET请求，可以将参数附加在URL上，例如，xhr.send(null)；对于POST请求，可以将参数作为send()方法的参数发送，例如，xhr.send(data)。

//完整的示例代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data', true);

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // 处理服务器返回的数据
    // ...
  }
};

xhr.send(null);

注意：由于跨域安全策略限制，Ajax请求只能向同源（即协议、域名和端口都相同）的服务器发送请求。如果需要向不同域的服务器发送Ajax请求，可以使用JSONP、CORS或使用代理服务器等方法解决跨域问题。

那么，如果上面的库你不会使用，甚至说不知道它的原始逻辑，那么，我来教你封装一个简单的Ajax吧，后面再根据自己的需求

底层逻辑

//1.创建对象
let  xhq = new XMLHttpRequest()
//2.初始话http请求参数
xhq.open(methode, url, true)
//3.发送请求
xhq.send({
    username:'wzx'
})
//4.监听请求状态,执行对应的回调函数
xhq.onreadystatechange = function () {
    if ( xhq.readystate == 4 && xhq.status == 200 ) {
        // success 回调
        success(xhq.responseText)
    }  else if (xhq.readyState == 4 && xhq.status !== 200) {
        // error 回调
        error()
    }
}


//-----------完整实现-----------
function sendAjax(obj) {
    function splicStr(data) {// get方式传入时，将内容进行data内容进行拼接
        var str = ''
        for (var i in data) {
            str = i + '=' + data[i]
        }
        return str
    }

原生Ajax实现

// 原生ajax实现 步骤分析
// 一、声明XMLHttpRequest, 为了兼容IE5、6需要使用ActiveXObject()
    let xhq = new XMLHttpRequest() // 创建对象
// 二、初始化HTTP请求参数， 只初始化并不会发送
    if (obj.method.toUpperCase() === 'GET') { // get方法
        xhq.open(obj.method, obj.url + '?' + splicStr(obj.data),  typeof obj.async === 'boolean'? obj.async : true) // 路径拼接
        xhq.send()// 三、发送此次请求
    }
    else if (obj.method.toUpperCase() === 'POST') { // post方法
        xhq.open(obj.method, obj.url, typeof obj.async === 'boolean'? obj.async : true)
        xhq.setRequestHeader("content-type","application/x-www-form-urlencoded") // 以表单提交
        xhq.send(obj.data)// 三、发送此次请求
    }
//四、监听发送
    xhq.onreadystatechange = function () {
        if ( xhq.readyState == 4 && xhq.status == 200 ) {
            // success 回调
            success(xhq.responseText)
        } else if (xhq.readyState == 4 && xhq.status !== 200) {
            // error 回调
            error()
        }
    }
}
//使用
sendAjax({
    url: 'your url',
    method: 'post',
    async: true,
    data: {
        username: 'xiong',
        pwd: '123'
    },
    success: function (data) {
        console.log(data)
    },
    error: function () {
        console.log('发生了错误')
    }
})

再次注意：由于跨域安全策略限制，Ajax请求只能向同源（即协议、域名和端口都相同）的服务器发送请求。如果需要向不同域的服务器发送Ajax请求，可以使用JSONP、CORS或使用代理服务器等方法解决跨域问题。

posted @ 2023-07-07 09:25 木文帅阅读(276) 评论(0) 收藏举报

刷新页面返回顶部

客园

使用Ajax进行数据请求

公告