ajax学习总结

小李在线拧螺丝

已于 2022-10-15 15:29:12 修改

阅读量104

点赞数

文章标签： javascript jquery 前端

于 2022-10-15 11:48:04 首次发布

本文链接：https://blog.csdn.net/weixin_44484794/article/details/127333276

版权

AJAX

get请求

jQuery发送一个get请求

jQuery提供了一个函数叫做$.get()

引入jQuery以后，会提供两个变量

分别是$和jQuery这两个都是函数的数据类型

把这个函数当做一个对象，向他身上添加了一些东西

我们管这种方法叫做jQuery的全局方法

不需要依赖选择器，不需要元素集合

直接调用就行

专门用来发送get请求

语法

  $.get('地址'，传递给后端的数据,function(返回值形参){
        成功之后回调
       },期望返回的数据类型)

地址：请求地址
数据：给后端的数据，可以写‘key=value&key=value’,可以写{…}

回调：请求成功的回调，请求成功以后会触发

期望返回的数据类型：是不是执行解析响应体的操作

$.get('地址'，传递给后端的数据,function(返回值形参){
        成功之后回调
       },json)

‘string’：不解析，返回的是以下图片样式：
在这里插入图片描述

‘json’：会执行一步json.arse（）

在这里插入图片描述

php代码：getqingqiu.php

<?php
$arr=array(
    "message"=>'传递参数成功，我接受到了',
    "data"=>$_GET
);
echo json_encode($arr)
?>

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>//jquery环境cdn
</head>

<body>
    <script>
       $.get('getqingqiu.php',function(res){
           //res就是后端返回的响应体
           //如果你的最后一个参数写了‘json’,会自动执行json.parse()
        console.log(res);
       },"json")

    </script>
</body>

</html>

$.get()有三种写法：

 $.get('getqingqiu.php?a=100&b=200',function(res){
     //res就是后端返回的响应体
           //如果你的最后一个参数写了‘json’,会自动执行json.parse()
        console.log(res);
       },"json")

 $.get('getqingqiu.php','c=300&d=400',function(res){
 //res就是后端返回的响应体
           //如果你的最后一个参数写了‘json’,会自动执行json.parse()
        console.log(res);
       },"json")

 $.get('getqingqiu.php',{e:500,f:600},function(res){
 //res就是后端返回的响应体
           //如果你的最后一个参数写了‘json’,会自动执行json.parse()
        console.log(res);
       },"json")

ok, $. g e t () 结束，让我们继续了解$ .post()的使用方式和要点：

那么
在这里插入图片描述

回归正题：

jQuery发送一个post请求

jQuery提供了一个全局方法叫做$.post(),专门用来发送post请求

哎，那么post请求怎么使用呢？

语法：

 $.post('地址'，传递给后端的数据,function(返回值形参){
        成功之后回调
       },期望返回的数据类型)

哎嗨，这个咋和 $. g e t () 请求一个样呢，对的他的四个参数和$ .get()一模一样

php代码：getqingqiu.php

<?php
$arr=array(
    "message"=>'传递参数成功，我接受到了',
    "data"=>$_POST
);
echo json_encode($arr)
?>

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>//jquery环境cdn
</head>

<body>
    <script>
       $.post('getqingqiu.php',function(res){
           //res就是后端返回的响应体
           //如果你的最后一个参数写了‘json’,会自动执行json.parse()
        console.log(res);
       },"json")

    </script>
</body>

</html>

$.post()有两种写法：

 $.get('getqingqiu.php','c=300&d=400',function(res){
 //res就是后端返回的响应体
           //如果你的最后一个参数写了‘json’,会自动执行json.parse()
        console.log(res);
       },"json")

 $.get('getqingqiu.php',{e:500,f:600},function(res){
 //res就是后端返回的响应体
           //如果你的最后一个参数写了‘json’,会自动执行json.parse()
        console.log(res);
       },"json")

耶？不是和$.get()一模一样吗，这个怎么不一样啊，很简单post不支持地址里面携带参数

好了以上两种是 $. g e t () 和$ .post()写法和注意事项

接下来让我们了解以下ajax的综合写法吧

jQuery发送ajax请求的综合写法，可以由我们来配置是发送get请求还是psot请求

怎么写呢？

来看**$.ajax()看好了哈这个是重点**，我们的所有请求都可以使用他来发送

使用语法：

$.ajax(options)

耶嗨？这个括号里面的是什么东西？

我们来讲一下：他就是本次请求的配置信息，是一个对象数据类型

那么问题来了配置信息里面可以填写什么东西呢？

来看，小声（很重点）

1、url:请求地址（必须填，要不然你用Ajax没有任何效果）

2、async:是否异步，默认是异步（true）,可以选填非异步（false）//那么问题来了：异步是神马东西，好好思考一下答案在最后哦！！

3、type/method:表示请求方式，，默认是GET，可以选填其他请求方式。那么问题来了大小写都可以吗？特别讲一下这个type或method，用哪一个都可以哈

4、**data:**传递给后端的参数，可以是查询字符串的形式，也可以是对象的形式

5、datatype:期望后端返回的数据类型，是否进行json.parse()

6、success:接收一个函数数据类型，表示成功的回调

7、error:接收一个函数数据类型，表示失败的回调，不光是请求失败才会走失败的回调，当你解析失败的时候会走失败的回调，什么意思呢？我们来看下一个就知道了

8、timeout：设置一个超时时间；就是从发送请求开始计时，当达到超时时间还没有接收到相应的，就会直接取消本次请求，就会执行失败的回调函数，这里应该就能明白为什么不光是请求失败才会走失败的回调了吧，简而言之一句话：超过设定时间就会走回调函数。

9、cashe:是否缓存；对于Ajax请求默认缓存的是（true）,可以选填（false）;如果你选择缓存，那么就不会有最后一个时间戳参数；如果你选择不缓存，那么jQuery就会在本次请求末尾添加一个时间戳作为参数

对于jsonp请求默认不缓存（false）,可以选填（true）

当你发送jsonp请求的时候，会默认带有一个时间戳参数

首先有一个问题一直在我脑子里挥之不去：就是什么是缓存呢？

缓存：GET请求会进行自主缓存，那么为什么会缓存呢？

因为你两次发送同一个请求，浏览器就有可能会缓存下来，那么问题就来了我怎么知道是两次请求是一个请求呢？很简单，请求地址一模一样，那么就表示是同一个请求

不想你进行缓存：

让每一次的请求地址都不一样，每次请求的时候，在最后携带一个没有用的参数，值就设置为时间戳

10、context:上下文；

指定回调函数的this指向，jQuery默认回调函数的this指向jQuery封装的xhr对象；

context传递的是谁，那么回调函数的this就指向谁！！

$.ajax({
url:"地址"，
//type:'post'//本次请求以post方式请求
//type:'get'//本次请求以get方式请求
//method:'post'//本次请求以post方式请求
method:'get'//本次请求以get方式请求
//写哪一个都可以哈
    async:true,//是否异步，两个值true/false
    data:{a:100,b:200},//传递给后台的数据
    datatype:'json',//对响应体执行JSON.parse()操作
    success(res){
    //res就是响应体，会根据datatype填写的内容来解析
}，
error(){
    console.log("本次请求失败了！！！！！");
}
})

注意注意！！！！

jQuery发送的ajax请求：jQuery对于Ajax的封装除了以回调函数的形式接受结果之外还封装了promise的形式接受结果

一个$.ajax()方法，你可以选择书写回调函数的形式

 success(res){
    //res就是响应体，会根据datatype填写的内容来解析
}，

还可以选择promise的形式进行接收

$.ajax({
url:'地址'，
data:{给后台传递的数据}
type:'post',//请求方式
datatype:'json'//对相应体进行json.parse（）操作
}).then(res=>{
console.log(res)
})

跨域请求

非同源地址

他的解决方案有三个分别是：jsonp,代理，cors

1.jsonp:

就是前端利用script标签和src属性绕开同源策略，

和Ajax没有关系，实际上不是在发送ajax请求，

实际上就是在请求一个js文件

2.代理：

由一个同源的代理服务端转发请求，对于前端来说，依旧是正常发送请求，只不过把地址书写成代理地址，依旧是直接使用$.ajax()方法来发送，只不过url位置书写代理标识符

3.cors

服务端允许指定客户端发送请求

这和前端没有任何关系

前端正常发送请求

使用$.ajax()

jQuery发送jsonp请求：

使用一个叫做$.ajax()的方法，因为jQuery封装Ajax函数的时候做了一个判断

怎么判断呢：

根据你datatype传递参数的值来来判断

if(datatype==='jsonp'){
//走一套动态创建script标签
//动态添加src属性
//动态插入到body
//动态的删除script
}
else{
//按照ajax的一套流程封装
}

只要把datatype书写成’jsonp’,就会发送jsonp请求

下一点来了！！！！！！！

jQuery的全局钩子函数也叫做全局ajax函数，出现在ajax的不同阶段。在一个ajax的整个周期中，会在不同的位置执行的函数，我们管这中在一个时间的生命周期上各种不同时期触发的函数叫做钩子函数，他呢不是自主出发的函数，而是挂钩在其他的事情上，由其他的事情发生过程中来触发他

1.ajaxStart()表示在每一个作用域下多个ajax请求的时侯，第一个ajax请求之前

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

2.ajaxSend()表示在每一个请求发送之前触发，只要有一个请求要执行send方法了，就会先触发钩子函数

剩余明日更新

小李在线拧螺丝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

ajax学习总结

AJAX

get请求

jQuery发送一个get请求

php代码：getqingqiu.php

HTML代码

ok, . g e t ( ) 结 束 ， 让 我 们 继 续 了 解 .get()结束，让我们继续了解 .get()结束，让我们继续了解.post()的使用方式和要点：

回归正题：

jQuery发送一个post请求

哎，那么post请求怎么使用呢？

php代码：getqingqiu.php

HTML代码

接下来让我们了解以下ajax的综合写法吧

注意注意！！！！

跨域请求

1.jsonp:

2.代理：

3.cors

下一点来了！！！！！！！

剩余明日更新

ok, $. g e t () 结束，让我们继续了解$ .post()的使用方式和要点：