原生JS实现Ajax请求

最新推荐文章于 2024-08-15 14:48:45 发布

不知死活的猿

最新推荐文章于 2024-08-15 14:48:45 发布

阅读量2.6k

点赞数 1

分类专栏： Web前端 Dynamics CRM 文章标签： ajax js 数据库

本文链接：https://blog.csdn.net/aaa33_3/article/details/119421987

版权

本文探讨了前端开发如何发起Ajax请求，首先介绍了利用jQuery的简单实现，然后详细讲解了原生JavaScript如何利用XMLHttpRequest对象进行后台数据交换，包括open、send方法以及onreadystatechange事件的使用，并给出了代码示例和封装处理的建议。

摘要由CSDN通过智能技术生成

前言：作为前端开发，向后端发起请求这是必不可少的一个步骤，通过请求，后端返回给我们相应的数据，根据数据我们做出相应的操作。一般来说，现在很多前端开发者发起请求时都是采用第三方库来实现，比如axios、jQuery库等等。

一.利用jQuery实现ajax方法

采用jQuery封装好的ajax方法发起请求很简单，代码就简单如下就可以了。

$.ajax({
   
    url: ,
    type: '',
    dataType: '',
    data: {
   
          
    },
    success: function(){
   
         
    },
    error: function(){
   
          
    }
 })

我们只需要填入相应的参数属性就可以了。

二.利用原生JavaScript实现ajax请求

原生JS中，我们主要是利用一个叫做XMLHttpRequest的对象进行后台与服务端数据的交换，具体代码可参考如下：

var Ajax={
   
  get: function(url, fn) {
   
    // XMLHttpRequest对象用于在后台与服务器交换数据   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
   
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
    
        // 从服务器获得数据 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },
  // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式