jQuery中ajax的相关知识点汇总

 更新时间:2021-03-08 12:46:17   作者:佚名   我要评论(0)

前言
学习JavaScript的同学都知道, AJAX (async javascript and

xml)翻译叫做异步的JavaScript和XML , 在原生js中使用发送网络请求也是一件

前言

学习JavaScript的同学都知道, AJAX (async javascript and
xml)翻译叫做异步的JavaScript和XML , 在原生js中使用发送网络请求也是一件麻烦事,每次都是那几个步骤.

我们先来回顾一下在原生js中如何发送一个 ajax 网络请求

经典4步曲

1.原生js的ajax网络请求

 // IE9及以上
 // const xhr = new XMLHttpRequest()
 // IE9以下
 // const xhr = new ActiveXObject('Mricosoft.XMLHTTP')

 // 对于这个兼容写法我们可以用一个函数来封装
 function createXHR() {
 var req = null;
 if (window.XMLHttpRequest) {
 // 如果有这个XMLHttpRequest对象就直接使用
 req = new XMLHttpRequest();
 } else {
 // 否则就使用IE8一下的写法
 req = new ActiveXObject("Microsoft.XMLHTTP");
 }
 return req;
 }
 // 第一步:创建ajax对象
 var xhr = createXHR(); //这样就拿到了一个ajax对象
 // 第二步:配置网络请求信息

 xhr.open('get', './demo.php', true)
 // xhr.open('get/post','要发送网络请求去哪个地址',同步还是异步默认 true 表示异步,false 表示同步)
 // 如果是get请求有参数需要拼接在地址后面,例如'./demo.php?id=2&name=sanqi'
 // 如果是post请求,参数就要放在send()里面,例如:xhr.send('id=2&name=sanqi')
 // 第三步:发送网络请求
 xhr.send() //
 // 第四部:判断响应状态拿到数据
 xhr.onreadyStateChange = function () {
 // 每次 readyState 改变的时候都会触发该事件
 // 我们就在这里判断 readyState 的值是不是到 4
 // 并且 http 的状态码是不是 200 ~ 299
 if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
 // 这里表示验证通过
 // 我们就可以获取服务端给我们响应的内容了
 console.log(xhr.response);
 }
 }


这里补充一下readyState的5个状态

  • readyState --> 0: 表示未初始化完成,也就是 open 方法还没有执行
  • readyState --> 1: 表示配置信息已经完成,也就是执行完 open 之后
  • readyState --> 2: 表示 send 方法已经执行完成
  • readyState --> 3: 表示正在解析响应内容
  • readyState --> 4: 表示响应内容已经解析完毕,可以在客户端使用了

上面就是原生的js发送一个ajax网络请求

2.关于使用jQuery的ajax网络请求

我们在学习jquery,就了解到,大家都在说,什么 jq 都给我们封装好啦,这些网络请求都不用我们去写啦,虽说如此,但是也还是不能盲目,还是 要具体了解之后才会使用.

(1).利用jquery发送get请求

下面统一后端代码使用文件名为: test.php 这个文件

<?php
header('content-type:text/html;charset=utf-8;');
 $id = $_REQUEST['id'];
 $name = $_REQUEST['name'];
 $arr = [
 'id' => $id,
 'name' => $name
 ];
 echo json_encode($arr);
?>

使用jquery发送get请求

  $.get('./test.php','id=999&name=三七安',function (res) { 
  //第一个参数是请求的地址
  //第二个参数是要发送给服务器的数据
  //第三个参数是成功时的回调函数,里面包含服务返回给我们的数据
  //第四个参数是我们希望拿到的数据格式:有几种选择:json,text,html,xml,script
  console.log(res);
  },'json')

可以看到请求是发送成功了的

(2) 利用jquery发送post请求

	 $.post('./test.php',{id:123,name:'post请求'},function (res) { 
	 //这里其他参数和get请求一致的
	 //注意,这里的传输数据我用 对象的格式来写,也能发送请求成功,也就是说
	 //无论是get请求还是post请求,想服务端传数据,既可以使用字符串格式也可以使用对象格式
  console.log(res);
  },'json')

这是请求成功的的页面

(3)利用jquery发送综合发送 ajax 请求

先来浏览一下语法

 // 使用 $.ajax 方法
 // 只接受一个参数,是一个对象,这个对象对当前的请求进行所有的配置
 $.ajax({
  url: './ajax', // 必填,请求的地址
  type: 'GET', // 选填,请求方式,默认是 GET(忽略大小写)
  data: {}, // 选填,发送请求是携带的参数
  dataType: 'json', // 选填,期望返回值的数据类型,默认是 string
  async: true, // 选填,是否异步,默认是 true
  success() {}, // 选填,成功的回调函数
  error() {}, // 选填,失败的回调函数
  cache: true, // 选填,是否缓存,默认是 true
  context: div, // 选填,回调函数中的 this 指向,默认是 ajax 对象
  status: {}, // 选填,根据对应的状态码进行函数执行
  timeout: 1000, // 选填,超时事件
 })

好像每次都要填好多参数,但其实大部分参数都是选填的,我们只要看实际情况来填写

在编译器里面,直接输入ajax也可以快捷生成部分代码

发送ajax请求代码

$.ajax({
  type: "get",
  url: "./test.php",
  data: {
   id:000,
   name:'发送$.ajax请求的演示'
  },
  dataType: "json",
  success: function (response) {
   console.log(response);
  }
  });

打开网页就可以看到我们从后端拿回来的数据

下面补充几个Ajax的全局函数,也叫钩子函数,也就是在Ajax整个请求过程中的某一个阶段执行的函数,而且是任意一个Ajax请求都会触发.

1. ajaxStart, 任意一个请求开始的时候都会触发这个函数

$(window).ajaxStart(function () {
 console.log('有一个请求开始了')
})

2. ajaxSend , 任意一个 请求准备send之前都会触发这个请求.

$(window).ajaxSend(function () {
 console.log('有一个要发送出去了')
})

3.ajaxSuccess, 任意一个 请求成功的时候都会触发这个函数.

$(window).ajaxSuccess(function () {
 console.log('有一个请求成功了')
})

4.ajaxError , 任意一个 请求失败的时候就会触发这个函数.

$(window).ajaxError(function () {
 console.log('有一个请求失败了')
})

5.ajaxComplete , 任意一个 请求完成的时候就会触发这个函数

$(window).ajaxComplete(function () {
 console.log('有一个请求完成了')
})

6.ajaxStop , 任意一个 请求结束的时候就会触发这个函数

$(window).ajaxStop(function () {
 console.log('有一个请求结束了')
})

总结

到此这篇关于jQuery中ajax的相关知识点汇总的文章就介绍到这了,更多相关jQuery ajax知识点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
  • JQuery的Ajax请求实现局部刷新的简单实例
  • jquery的ajax异步请求接收返回json数据实例
  • 跨域请求之jQuery的ajax jsonp的使用解惑
  • jquery ajax请求方式与提示用户正在处理请稍等
  • 为jquery的ajax请求添加超时timeout时间的操作方法
  • jQuery.ajax 跨域请求webapi设置headers的解决方案
  • Jquery ajax请求导出Excel表格的实现代码
  • Jquery Ajax请求文件下载操作失败的原因分析及解决办法
  • 浅析jQuery Ajax请求参数和返回数据的处理
  • 教你如何终止JQUERY的$.AJAX请求

相关文章

  • jQuery中ajax的相关知识点汇总

    jQuery中ajax的相关知识点汇总

    前言 学习JavaScript的同学都知道, AJAX (async javascript and xml)翻译叫做异步的JavaScript和XML , 在原生js中使用发送网络请求也是一件
    2021-03-08
  • 详解Python垃圾回收机制和常量池的验证

    详解Python垃圾回收机制和常量池的验证

    Python的引入 人类认识世界是从认识世界中的一个又一个实物开始,然后再对其用语言加以描述。例如当中国人看到苹果时,便会用中文“苹果”
    2021-03-08
  • python 批量将PPT导出成图片集的案例

    python 批量将PPT导出成图片集的案例

    导读 需要使用python做一个将很多个不规则PPT导出成用文件夹归纳好的图片集,所以就需要使用comtypes调用本机电脑上的ppt软件,批量打开另存
    2021-03-08
  • C#使用opencv截取旋转矩形区域图像的实现示例

    C#使用opencv截取旋转矩形区域图像的实现示例

    前言:最近在工程中需要用到截取RotatedRect中的图形,保存为Mat做后续处理。发现opencv文档中没有这个api,最开始想到的方案是将整张图片进
    2021-03-08
  • Spring Boot thymeleaf模板引擎的使用详解

    Spring Boot thymeleaf模板引擎的使用详解

    在早期开发的时候,我们完成的都是静态页面也就是html页面,随着时间轴的发展,慢慢的引入了jsp页面,当在后端服务查询到数据之后可以转发到
    2021-03-08
  • MySQL处理JSON常见函数的使用

    MySQL处理JSON常见函数的使用

    官方文档:JSON Functions Name Description JSON_APPEND() Append data to JSON docum
    2021-03-08
  • python xml模块的简单使用

    python xml模块的简单使用

    一、xml简介 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗
    2021-03-08
  • 解决python3 整数数组转bytes的效率问题

    解决python3 整数数组转bytes的效率问题

    昨天在做一道CTF题的时候碰到了一个图片异或的问题,操作大概如下: 将一个图片读入,然后每字节进行异或操作,核心代码可简化为以下: #c
    2021-03-08
  • JS异步的执行原理和回调详解

    JS异步的执行原理和回调详解

    一、JS异步的执行原理 &#8195;&#8195;我们知道JavaScript是单线程的,而浏览器是多线程的。单线程执行任务需要一个个排队进行,假如一个任
    2021-03-08
  • 在 ASP.Net Core 中使用 MiniProfiler的方法

    在 ASP.Net Core 中使用 MiniProfiler的方法

    web应用程序的性能相信是大家普遍关心的一个问题,也相信大家有很多工具可用来分析应用程序的性能并能够找到其中的瓶颈,MiniProfiler 就是这
    2021-03-08

最新评论