Ajax异步请求方法(详细)

谁践踏了优雅 2023-09-26 23:12 115阅读 0赞

## 使用ajax发送异步请求 ##

原生js实现以及jquery ajax实现发送请求

--------------------

#### 文章目录 ####

*  使用ajax发送异步请求
 *  简介
 *  实现方式
 *   *  1.原生js实现
     *   *  1.get请求
         *  2.post请求
     *  2.jquery ajax实现
     *   *  1.基本方式
         *  2.回调事件
     *  3. jquery中的封装函数
     *   *  1.$.post
         *  2.$.get
         *  3.$.getJSON
         *  4.$.getScript
 *  总结

--------------------

## 简介 ##

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML） 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面情况下，能够更新部分网页的技术。

--------------------

**同步和异步**

*  *同步互交*：指向服务器发送一个请求,需要等待返回,然后才能够发送下一个请求，期间有个等待过程；
 *  *异步互交*：指向服务器发送一个请求,不需要等待返回,随时可以再发送下一个请求，即不需要等待；

## 实现方式 ##

### 1.原生js实现 ###

#### 1.get请求 ####

> 代码如下（示例）：

// 创建请求对象
    var xhr = new XMLHttpRequest()
    
    // 封装参数对象
    var data = {
        id: 1,name: "张三"}
    
    // 配置请求方法，设置请求接口地址
    //同步或异步请求：true（异步）或 false（同步）
    xhr.open('get', 'http://localhost:8080/api?' + JSON.stringify(data),true)
    
    //发送请求
    xhr.send()
    
    // 获取网络请求响应的数据
    xhr.onreadystatechange = function () {
        
     // 响应完毕，并且请求成功
      if (xhr.readyState === 4 && request.status === 200) {
        
              var res = JSON.parse(xhr.responseText)
              //.....
            }
          }

#### 2.post请求 ####

> 代码如下（示例）：

// 1.创建一个实例对象
      var xhr = new XMLHttpRequest()
     
      // 需要传递的数据
      var data = {
        id: 1,name: '张三'}
      
       // 2.打开一个连接
       //同步或异步请求：true（异步）或 false（同步）
      xhr.open('post', 'http://localhost:8080/api',true);
      
      // 设置请求头 告诉后端我们要发送的是什么格式的数据
      xhr.setRequestHeader('Content-Type', 'application/json')
      
      // 3.发送请求
      // 发送json数据
      xhr.send(JSON.stringify(obj))
      
      // 4.接收响应
      xhr.onreadystatechange = function () {
        
        // 请求发送完成 请求成功
        if (xhr.readyState === 4 && xhr.status === 200) {
        
          var res = JSON.parse(xhr.responseText)
          console.log(res);
          //。。。。。
        }
      }
    }

### 2.jquery ajax实现 ###

[jquery地址][jquery]

#### 1.基本方式 ####

> 代码如下（示例）：

#### 2.回调事件 ####

> 代码如下（示例）：

$.ajax({
        
             //缓存
    		 cache: false,
    		 //是否异步请求
             async: async == undefined ? true : async,
             //请求地址
             url: 'http://localhost:8080',
             //请求类型
             type: method == undefined ? "POST" : method,
             contentType: contentType == undefined ? 'application/json; charset=UTF-8': contentType ,
             // 设置的是请求参数
             data: {
        id: 1,name: '张三'},
             //设置响应体的类型
             dataType: 'json', 
             // 在所有发送请求的操作（open, send）之前执行
             beforeSend: function (request) {
               
    		 		request.setRequestHeader("Authorization", CoreUtil.getData("token"));
    		 },
    		 // 请求成功（状态码为200）执行这个函数
             success: function (res) {
        
                    console.log(res);
                },
                // 请求不正常（状态码不为200）执行
              error: function (res) {
        
                    console.log('error', res);
                },
                 // 不管是成功还是失败都是完成，都会执行这个 complete 函数(一般成功与失败都需要执行的操作写在这里)
              complete: function (res) {
        
                    console.log('complete', res);
                }

### 3. jquery中的封装函数 ###

#### 1.$.post ####

语法：$.post(url,data,function(data,status,xhr),dataType);

> 代码如下（示例）：

$.post("http://localhost:8080/api",data,function(res){
        
    　　　　if(res.success){
        
    　　　　　　alert("成功");
    　　　　}else{
        
    　　　　　　alert("失败");
    　　　　}
    　　},"json");

#### 2.$.get ####

语法：$.get(url,data,function(data,status,xhr),dataType)

> 代码如下（示例）：

$.get("http://localhost:8080/api",data,function(res,status){
        
           　if(res.success){
        
    　　　　　　alert("成功");
    　　　　}else{
        
    　　　　　　alert("失败");
    　　　　}
        },"json");

#### 3.$.getJSON ####

描述：发送get请求，并将数据转为json数据  
语法：$.getJSON(url,data,function(data,status,xhr))

> 代码如下（示例）：

$.getJSON('http://localhost:8080/api', data, function (res) {
        
               alert(res)
            });

#### 4.$.getScript ####

描述：执行一个js文件的代码  
语法：$.getScript(url, \[callback\])

> 代码如下（示例）：

//url:待载入 JS 文件地址。
    //callback:成功载入后回调函数。
    $.getScript("ajax.js", function (data, Status, xhr) {
         
                 alert("加载成功");
            });

## 总结 ##

以上就是今天要讲的内容，本文介绍了ajax的使用方式以及jquery的一些封装函数，希望对大家有帮助。公众号 “俊俊同学的笔记”

[jquery]: https://code.jquery.com/jquery-3.6.4.min.js