经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » AJAX » 查看文章
jQuery中ajax的相关知识点汇总
来源:jb51  时间:2021/3/8 13:36:13  对本文有异议

前言

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

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

经典4步曲

1.原生js的ajax网络请求

  1. // IE9及以上
  2. // const xhr = new XMLHttpRequest()
  3. // IE9以下
  4. // const xhr = new ActiveXObject('Mricosoft.XMLHTTP')
  5.  
  6. // 对于这个兼容写法我们可以用一个函数来封装
  7. function createXHR() {
  8. var req = null;
  9. if (window.XMLHttpRequest) {
  10. // 如果有这个XMLHttpRequest对象就直接使用
  11. req = new XMLHttpRequest();
  12. } else {
  13. // 否则就使用IE8一下的写法
  14. req = new ActiveXObject("Microsoft.XMLHTTP");
  15. }
  16. return req;
  17. }
  18. // 第一步:创建ajax对象
  19. var xhr = createXHR(); //这样就拿到了一个ajax对象
  20. // 第二步:配置网络请求信息
  21.  
  22. xhr.open('get', './demo.php', true)
  23. // xhr.open('get/post','要发送网络请求去哪个地址',同步还是异步默认 true 表示异步,false 表示同步)
  24. // 如果是get请求有参数需要拼接在地址后面,例如'./demo.php?id=2&name=sanqi'
  25. // 如果是post请求,参数就要放在send()里面,例如:xhr.send('id=2&name=sanqi')
  26. // 第三步:发送网络请求
  27. xhr.send() //
  28. // 第四部:判断响应状态拿到数据
  29. xhr.onreadyStateChange = function () {
  30. // 每次 readyState 改变的时候都会触发该事件
  31. // 我们就在这里判断 readyState 的值是不是到 4
  32. // 并且 http 的状态码是不是 200 ~ 299
  33. if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
  34. // 这里表示验证通过
  35. // 我们就可以获取服务端给我们响应的内容了
  36. console.log(xhr.response);
  37. }
  38. }
  39.  
  40.  

这里补充一下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 这个文件

  1. <?php
  2. header('content-type:text/html;charset=utf-8;');
  3. $id = $_REQUEST['id'];
  4. $name = $_REQUEST['name'];
  5. $arr = [
  6. 'id' => $id,
  7. 'name' => $name
  8. ];
  9. echo json_encode($arr);
  10. ?>

使用jquery发送get请求

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

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

(2) 利用jquery发送post请求

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

这是请求成功的的页面

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

先来浏览一下语法

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

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

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

发送ajax请求代码

  1. $.ajax({
  2. type: "get",
  3. url: "./test.php",
  4. data: {
  5. id:000,
  6. name:'发送$.ajax请求的演示'
  7. },
  8. dataType: "json",
  9. success: function (response) {
  10. console.log(response);
  11. }
  12. });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

总结

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号