首页 前端知识 Ajax异步请求方法(详细)

Ajax异步请求方法(详细)

2024-01-24 15:01:34 前端知识 前端哥 54 402 我要收藏

使用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地址

1.基本方式

代码如下(示例):

$.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', 
         //回调函数
         success: function (res) {
             // 设置了 dataType 选项客户端会主观认为服务端返回的就是 JSON 格式的字符串
             console.log(res);
         }
     });

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的一些封装函数,希望对大家有帮助。公众号 “俊俊同学的笔记”

转载请注明出处或者链接地址:https://www.qianduange.cn//article/240.html
评论
发布的文章

js向上取整

2024-02-03 16:02:53

9、jQuery

2024-02-03 12:02:49

jQuery 遍历方法总结

2024-02-03 12:02:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!