ajax请求的介绍:

ajax请求是JavaScript提供的与后端交互的方法

ajax请求的基本步骤:

创建ajax对象

const xhr =new XMLHttpRequest()

定义ajax请求相关设定

xhr.open()

 get方式：xhr.open('get' , url地址？拼接参数)
 post方式： xhr.open('post' , url地址)

发送ajx请求

xhr.send()

  get方式：xhr.send()
  post方式：先定义请求头内容、再xhr.send(参数)

接收请求

xhr.onload = function(){}

JavaScript中的ajax请求要考虑兼容问题

请求兼容的兼容形式：

if(){
     var xhr = new XMLHttpRequest();
    }else{
     var xhr = new ActiveXObject('Microsoft.XMLHTTP');
 }

获取响应体的兼容形式：

xhr.onreadystatechange = function(){
  // 当状态码为4时,请求状态为2开头的3位数值时,有正确的响应体内容
  if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){
      // 执行程序
  }
}

jQuery中封装好的ajax请求的使用

不用考虑兼容、跨域等问题, jQuery全都已经封装好了。只需要在设定请求时设定不同的参数,就可以完成不同的请求。

一、常规请求（有三种方式）

1. get方式

语法（两种形式）：

（1）$.get({url， data，dataType，success})-----顺序任意

   url : 地址(必填)

   data : 携带的参数，对象形式

   dataType : 期望的数据类型,如果为json,会将后端返回的json串自动解析

   success : function(){ 请求成功时执行的函数 }

（2）$.get(url， data，callback，dataType)------顺序不能改变

代码展示

发送请求的jquery代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>get请求</h1>
    <button>请求</button>
    <script src="../jquery.min.js"></script>  <!-- 必须加载jQuery文件 -->
    <script>
        $('button').click(function(){
            $.get({
                // 对 url 地址的PHP文件发起请求
                url : './get.php',
                // 请求时携带参数,参数以对象形式定义
                data : {name:'jack' , pwd:222333},
                // 没有设定 dataType 参数,res中的响应体存储后端给的数据
                // 设定  dataType : 'json', 会自动解析响应体json串
                dataType : 'json',
                // 请求成功时,执行的函数
                // 函数的参数,存储响应体
                // 自定义形参 res 中 存储的就是响应体
                success : function(res){
                    console.log(res)
                }
            })
        })
    </script>
</body>
</html>

接收请求、发送响应体的PHP代码

<?php
$name = $_GET['name'];
$pwd = $_GET['pwd'];
$arr = [
    'msg' => 'get请求方式：直接返回参数内容',
    'data' => [
       'name' => $name, 
       'pwd' => $pwd,        
    ]
];
echo json_encode($arr);

请求结果

2. post方式

语法（两种形式）：

（1）$.post({url， data，dataType，success})-----顺序任意

   url:地址（必填）   

   data : 携带的参数，对象形式

   dataType : 期望的数据类型,如果为json,会将后端返回的json串自动解析

   success : function(){ 请求成功时执行的函数 }

（2）$.post(url， data，callback，dataType)------顺序不能改变

代码展示

发送请求的jquery代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>post请求</h1>
    <button>请求</button>
    <script src="../jquery.min.js"></script>
    <script>
        $('button').click(function(){
            $.post({
                // 对 url 地址的PHP文件发起请求
                url : './post.php',
                // 请求时携带参数,参数以对象形式定义
                data : {name:'jack' , pwd:123456},
                // 没有设定 dataType 参数,res中的响应体
                // 后端给什么,res中,就存储什么
                // 设定  dataType : 'json', 会自动解析响应体json串
                dataType : 'json',
                // 请求成功时,执行的函数
                // 函数的参数,存储响应体
                // 自定义形参 res 中 存储的就是响应体
                success : function(res){
                    console.log(res)
                }
            })
        })
    </script>
</body>
</html>

接收请求、发送响应体的PHP代码

<?php
$name = $_POST['name'];
$pwd = $_POST['pwd'];
$arr = [
    'msg' => 'post请求方式：直接返回参数内容',
    'data' => [
        'name' => $name, 
        'pwd' => $pwd,        
    ]
];
echo json_encode($arr);

请求结果

3. 综合方式

语法（两种形式）：

（1）$.ajax(url：地址)

   其余都是默认值

（2） $.ajax(url，{type,data......其他参数})

 1）常用参数:

     url : 地址;
     type / method : 请求方式 默认值是get方式
     data : { } 传参参数,必须是对象形式
     dataType : json,  设定为json,会自动解析反应提中的json串
     success : function(){}  请求成功执行的函数

 2）不常用参数:
 
     async : 设定是否异步,默认值是true,异步执行ajax请求
     error : function(){}  请求错误时执行的函数
             请求成功时不会执行
     timeout : 设定时间,单位 毫秒
               如果请求时间超过设定的时间,认为是请求失败
               必须是异步执行
     cache : 设定是否缓存请求结果
             默认值是 true,缓存请求结果
              post方式不会缓存,设定也没有效果
     context : 指定 执行函数中 this的指向

代码展示

发送请求的jquery代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>ajax请求</h1>
    <button>请求</button>
    <script src="../jquery.min.js"></script>
    <script>
        const obj = {};
        $('button').click(function(){
            $.ajax({
                // 对 url 地址的PHP文件发起请求
                url : './get.php',
                // 请求方式,不写就是默认值get.
                type: 'get',
                data : {name:'jack',pwd:111222333},
                //设定 json 解析响应体的json串
                dataType : 'json',
                success : function(res){
                    console.log(res);
                    console.log(this);
                },
                error : function(res){
                    console.log(res)
                },
                cache : false,    // 如果是不缓存,会在数据后有一个 _数值 的时间戳
                                  // 告诉程序,这个结果的获取时间
                context : obj ,   // this默认指向 ajax对象 , 可以设定this的指向
            })
            console.log('我是同步执行的程序');
        })
    </script>
</body>
</html>

接收请求、发送响应体的PHP代码

<?php
$name = $_GET['name'];
$pwd = $_GET['pwd'];
$arr = [
    'msg' => 'get请求方式：PHP直接返回参数内容',
    'data' => [
       'name' => $name, 
       'pwd' => $pwd,        
    ]
];
echo json_encode($arr);

请求结果

二、跨域请求（jsonp方式）

jQuery中封装好的ajax

 url : 地址是一个跨域地址
 dataType : 必须是 jsonp
 jsonp : 设定函数名称,默认是callback

php中:

 echo 的内容是字符串拼接形式
 echo "$函数名称变量(" . json_encode($返回数据) . ")";

函数名称存储在变量中,使用 " " 双引号解析，返回的数据必须是 json串格式，使用 json_encode() 转化,拼接在函数的参数位置中。

jQuery封装ajax请求的使用