7-2 jq运用语法项目实战

所需要的知识点

1：对象封装；
2：ajax 介绍；
3：使用 ajax 请求后台数据；
4：http 请求返回状态码；
5：同步和异步的概念；
6：jQuery的ajax 方法；
7：轮播图；

1

一 对象的封装

1 为什么要把函数封装到对象里面

（1）避免全局变量的污染
（2）变成体验更好，维护更方便

2 this 指引

(1)  一般规律：谁调用指向谁
(2)   全局函数的this指向  window，setTimeout和setInerval里的匿名函数的this指向window

2：ajax 相关

(1)  ajax = 异步  javascript  和   xml
(2)   ajax 是一种用于篡改建快速动态网页的技术
(3)    通过在后台与服务器惊醒少量的数据交换 ，ajax  可以使用网页实现异步更新，这意味着可以不重新加载整个网页的情况下，对啊网页的某部分进行更新。以前更新网页需要从新加载整个网页（很久很久前）

2-2 创建 ajax 对象请求后台数据

1：什么是接口：一个url路径，当你访问它的时候，他就会给你提供数据（接口数据）
2：如何使用ajax请求后提供的接口，以获得我们需要的数据；

// ajax.readyState的取值含义
0：请求未初始化（还没有调用 open()。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。

2-3 http请求返回状态码

(1):只用浏览器的network可以查看请求结果；
（2）：200表示服务器成功返回数据
（3）：404 表示找不到
（4）：表示服务器错误

3：json字符窜转对象或者对象转json字符窜

// 普通对象
{
    name: 'zs',
    age: 29
}
// json对象
{
    "name": "zs",
    "age": 29
}

1：json转字符窜对象

var str = '{"name":"zs","agee":"29"}'
var obj = JSON.parse(str)

2:对象转json字符窜

var obj = {a:2,b:3};
var str = JSON.stringify(obj)

同步异步的概念：

同步：一次只做一件事情，做第二件事情的时候需要等待第一件事情做完才开始做，调理清晰，
异步：同时做几件事情，效率更高

封装ajax，使用jquery提供的方法请求数据

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">
</script>
<script>
    var url = 'http://132.232.87.95:3003/product/list';
    $.ajax({
      //请求类型
      type:"get",
      url:url,
      data:{
        pageNum:1
      },
      dataType:"json",
      //成功后返回的数据
      success:function(data){
           console.log(data);
      }
    });
</script>

五：轮播图

https://www.swiper.com.cn/usage/index.html

项目开发实战步骤

（1）需求分析
（2）静态页面
（3）请求数据

1.在html加入jQuery.js

// 本地
<script src="../js/jQuery.js"></script>
// cdn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

2.声明一个对象，在他里面创建一个获取数据的方法

接口地址：http://huruqing.cn:3000