服务器的基本概念与初识Ajax

客户端与服务器

1.1 上网的目的：通过互联网的形式获取和消费资源
1.2 服务器 上网过程中，负责存放和对外提供资源的电脑
1.3 客户端 上网过程中，负责获取和消费资源的电脑

URL地址

URL（统一资源定位符）：用于标识互联网上每个资源的唯一存放位置（浏览器通过URL才能正确定位资源的存放位置）

URL地址一般由三部分组成：
1.客户端与服务器之间的通信协议
2.存在该有资源的服务器名称
3.资源在服务器上具体的存放位置

网页打开过程

1.客户端与服务器之间的通信过程，分为 请求 - 处理 - 响应 三步骤
2.网页中的每一个资源，都是通过 请求 - 处理 - 响应的方式从服务器获取回来

服务器对外提供的资源

1.例如：文字，图片，音频，视频，数据（是网页的灵魂）等等

2.网页中请求数据：通过 请求 - 处理 - 响应的方式获取；此过程需要用到XMLHttpRequest对象。

XMLHttpRequest对象的用法：var xhr = new XMLHttpRequest()

3.资源的请求方式（客户端–>服务器）
常见的请求方式：get 和 post

get请求(向服务器要资源)

post请求(往服务器发资源)

了解Ajax

Ajax(Asynchronous Javascript And XML ):在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式

应用场景：
1.注册用户（通过ajax，动态检测用户名是否被占用）
2.动态加载搜索提示列表
3.根据页码值动态刷新表格的数据
4.数据的增删改查，来实现数据交互

jQuery中的Ajax

jQuery对XMLHttpRequest进行了封装，提供了Ajax相关的函数

jQuery中发起Ajax请求最常用的三个方法：

1. $.get()
2. $.post()
3. $.ajax()

$.get()函数的语法

$.get(url,[data],[callback])
1

$.get()发起不带参数的请求

$.get(url,[callback])

$.get('https://www.baidu.com/',function(res){
   console.log(res)
   //res是服务器返回的数据
})
1
2
3
4
5
6

$.get()发起带参数的请求

$.get(url,[data],[callback])

$.get('https://www.baidu.com/',[id=1],function(res){
    console.log(res)
})
1
2
3
4
5

$.post()函数的语法

$.post(url,[data],[callback])
1

$.post('https://www.baidu.com/',{name:'lzy',age:18},function(res){
    console.log(res)
})
1
2
3

$.ajax()函数的语法

$.ajax({
   type:'' ,   //get或者post
   url:''  ,   //请求的url
   data:{} ,   //请求时需要的数据
   success:function(res){
   }
})
1
2
3
4
5
6
7

例（get方式）

$.ajax({
   type:'get' ,  
   url:'https://www.baidu.com/'  ,   
   data:{id=1} ,   
   success:function(res){
    console.log(res)
   }
})
1
2
3
4
5
6
7
8

接口

1.接口的概念
接口：使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口；每个接口必须有请求方式
2.接口的请求过程
（请求 - 处理 - 响应）
3.接口测试工具
作用：为了验证接口能否被正常被访问
地址：postman