1 jQuery中对AJAX的封装

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >jQuery中对AJAX的封装</ >
</head>
<body>
  <  src=\"jquery.js\"></ >
  < >

    // // 最基础的 调用
    // $.ajax(\'./time.php\', {
    //   type: \'post\', // method 请求方法
    //   success: function (res) {
    //     // res => 拿到的只是响应体
    //     console.log(res)
    //   }
    // })

    // $.ajax({
    //   url: \'time.php\',
    //   type: \'post\',
    //   // 用于提交到服务端的参数，
    //   // 如果是 GET 请求就通过 url 传递
    //   // 如果是 POST 请求就通过请求体传递
    //   data: { id: 1, name: \'张三\' },
    //   success: function (res) {
    //     console.log(res)
    //   }
    // })

    // $.ajax({
    //   url: \'json.php\',
    //   type: \'get\',
    //   success: function (res) {
    //     // res 会自动根据服务端响应的 content-type 自动转换为对象
    //     // 这是 jquery 内部实现的
    //     console.log(res)
    //   }
    // })

    $.ajax({
      url: \'json.php\',
      type: \'get\',
      // 设置的是请求参数
      data: { id: 1, name: \'张三\' },
      // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
      dataType: \'json\',
      success: function (res) {
        // 一旦设置的 dataType 选项，就不再关心 服务端 响应的 Content-Type 了
        // 客户端会主观认为服务端返回的就是 JSON 格式的字符串
        console.log(res)
      }
    })

  </ >
</body>
</html>

2 jQuery中AJAX的回调

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >jQuery中AJAX的回调</ >
</head>
<body>
  <  src=\"jquery.js\"></ >
  < >

    // 原生操作中不管请求状态码是多少都会触发回调
    // var xhr = new  HttpRequest()
    // xhr.open(\'get\', \'time1.php\')
    // xhr.send()
    // xhr.  = function () {
    //   if (this.readyState !== 4) return
    //   console.log(this.responseText)
    // }

    // 显示 loading

    $.ajax({
      url: \'time.php\',
      type: \'get\',
      beforeSend: function (xhr) {
        // 在所有发送请求的操作（open, send）之前执行
        console.log(\'beforeSend\', xhr)
      },
      success: function (res) {
        // 隐藏 loading
        // 只有请求成功（状态码为200）才会执行这个函数
        console.log(res)
      },
      error: function (xhr) {
        // 隐藏 loading
        // 只有请求不正常（状态码不为200）才会执行
        console.log(\'error\', xhr)
      },
      complete: function (xhr) {
        // 不管是成功还是失败都是完成，都会执行这个 complete 函数
        console.log(\'complete\', xhr)
      }
    })

  </ >
</body>
</html>

3 高度封装的函数

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >高度封装的函数</ >
</head>
<body>
  <  src=\"jquery.js\"></ >
  < >

    // $.get(\'json.php\', { id: 1 }, function (res) {
    //   console.log(res)
    // })

    // $.post(\'json.php\', { id: 1 }, function (res) {
    //   console.log(res)
    // })

    // $.getJSON(\'json.php\', { id: 1 }, function (res) {
    //   console.log(res)
    // })


    // 明确请求的方式 根据方式选择快捷方法

  </ >
</body>
</html>

4 jQuery全局事件处理函数

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >jQuery全局事件处理函数</ >
  <style>
    .loading {
      display: none;
      position: fixed;
    }
  </style>
</head>
<body>
  <div class=\"loading\">正在玩命加载中...</div>
  <button id=\"btn\">请求</button>
  <  src=\"jquery.js\"></ >
  < >

    $(document)
      .ajaxStart(function () {
        // 只要有 ajax 请求发生 就会执行
        $(\'.loading\').fadeIn()
        // 显示加载提示
        console.log(\'注意即将要开始请求了\')
      })
      .ajaxStop(function () {
        // 只要有 ajax 请求结束 就会执行
        $(\'.loading\').fadeOut()
        // 结束提示
        console.log(\'请求结束了\')
      })

    $(\'#btn\').on(\'click\', function () {
      // $.ajax({
      //   url: \'time.php\'
      // })

      $.get(\'time.php\')
    })

  </ >
</body>
</html>

5 尝试对一个不同源地址发起一个AJAX请求（失败了）

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >尝试对一个不同源地址发起一个AJAX请求（失败了）</ >
</head>
<body>
  <  src=\"jquery.js\"></ >
  < >

    // 当前页面访问地址：http://day-12.io/11-cross-domain.html
    // 希望被AJAX的地址：http://locally.uieee.com/categories
    // 这两个地址之间 协议相同 端口相同 域名不同 所以是两个不同源的地址
    // 同源策略指的就是：不同源地址之间，默认不能相互发送AJAX请求

    // 不同源地址之间如果需要相互请求，必须服务端和客户端配合才能完成

    $.get(\'http://locally.uieee.com/categories\', function (res) {
      console.log(res)
    })

  </ >
</body>
</html>

6 尝试找到一种可以发送不同源请求的方式

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >尝试找到一种可以发送不同源请求的方式</ >
  <!--   真正的定义：链入一个文档，通过 rel 属性申明链入的文档与当前文档之间的关系 -->
  <!-- <  rel=\"stylesheet\" href=\"nprogress.css\"> -->
</head>
<body>
  <!-- <img src=\"http://ww1.sinaimg.cn/large/006ThXL5ly1fj8w5i2onyj302u02umwz.jpg\" alt=\"\"> -->
  < >

    // 请求一个不同源的地址实际上就是我们所说的跨域请求

    // 当前页面访问地址：http://day-12.io/12-cross-origin.html
    // 希望被请求的地址：http://locally.uieee.com/categories
    //
    // 校验目标：1 能发出去，2 能收回来

    // img      
    //
    // ## 1. img
    // 可以发送不同源地址之间的请求
    // 无法拿到响应结果
    // var img = new Image()
    // img.src = \'http://locally.uieee.com/categories\'

    // ## 2.  
    // 可以发送不同源地址之间的请求
    // 无法拿到响应结果
    // var   = document.createElement(\' \')
    //  .rel = \'stylesheet\'
    //  .href = \'http://locally.uieee.com/categories\'
    // document.body.appendChild( )

    // ## 3.  
    // 可以发送不同源地址之间的请求
    // 无法拿到响应结果
    // 借助于能够作为 JS 执行
    var   = document.createElement(\' \')
     .src = \'http://localhost/time2.php\'
    document.body.appendChild( ) // 开始发起请求

    // 相当于请求的回调
    function foo (res) {
      console.log(res)
    }

    // console.log(a)

  </ >
</body>
</html>

7 JSONP

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >JSONP</ >
</head>
<body>
  < >
    // http://day-12.io/13-jsonp.html
    function my  (data) {
      console.log(data)
    }
  </ >
  <  src=\"http://localhost/data.js\"></ >
  <!-- <  src=\"http://localhost/data.php\"></ > -->
  <!--
    通过   标签请求一个服务端的 PHP 文件
    这个文件返回的结果是一段 JS，作用是调用我们事先定义好的一个函数
    从而将服务端想要给客户端发过去的数据发送给客户端
  -->
</body>
</html>


<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >Document</ >
</head>
<body>
  <  src=\"jquery.js\"></ >
  < >

    $.ajax({
      url: \'http://localhost/jsonp/server.php\',
      dataType: \'jsonp\',
      success: function (res) {
        console.log(res)
      }
    })

  </ >
</body>
</html>

server.php

<?php

$conn = mysqli_connect(\'localhost\', \'root\', \'123456\', \'demo\');

$query = mysqli_query($conn, \'select * from users\');

while ($row = mysqli_fetch_assoc($query)) {
  $data[] = $row;
}

if (empty($_GET[\'callback\'])) {
  header(\'Content-Type: application/json\');
  echo json_encode($data);
  exit();
}

// 如果客户端采用的是   标记对我发送的请求
// 一定要返回一段  
header(\'Content-Type: application/ \');
$result = json_encode($data);

$callback_name = $_GET[\'callback\'];

echo \"typeof {$callback_name} === \'function\' && {$callback_name}({$result})\";

8 AJAX 跨域（CORS）

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >AJAX 跨域（CORS）</ >
  <!-- Cross Origin Resource Share -->
</head>
<body>
  <  src=\"jquery.js\"></ >
  < >

    $.get(\'http://localhost/cors.php\', {}, function (res) {
      console.log(res)
    })

  </ >
</body>
</html>

cors.php

<?php

$conn = mysqli_connect(\'localhost\', \'root\', \'123456\', \'demo\');

$query = mysqli_query($conn, \'select * from users\');

while ($row = mysqli_fetch_assoc($query)) {
  $data[] = $row;
}

// 一行代码搞定
// 允许跨域请求
header(\'Access-Control-Allow-Origin: *\');

header(\'Content-Type: application/json\');
echo json_encode($data);

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章