Per aspera ad astra 循此苦旅，以觅繁星
通过这篇文章带你了解网页与服务器之间的数据交互的原理与使用方法。

一、服务器的基本概念

在实现数据交互之前先了解服务器的概念，有助于我们之后更好的理解和使用数据交互的语法。

上网的本质目的： 通过互联网的形式来获取和消费资源

客户端与服务器

1. 客户端：上网过程中，负责获取和消费的电脑，叫做客户端

2. 服务器：上网过程中，负责存放和对外提供资源的电脑，叫做服务器
   

3. URL地址：URL（全称是UniformResourceLocator），中文叫 统一资源定位符，用于标识互联网上每个资源的唯一存放位置（类似于身份证号）浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源

客户端与服务器的通信过程

步骤：

1. 客户端 请求 服务器
2. 服务器 处理 这次请求
3. 服务器响应客户端

注意

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

网页中如何请求数据

服务器对外提供了那些资源

常见资源 ：文字内容、image图片、Audio 音频、Video 视频、数据等。

资源的请求方式

数据也是服务器对外提供的一种资源，必然也要通过 发送 - 请求 - 响应 的方式进行获取
在网页中请求服务器的数据资源，需要用到XMLHttpRequest对象

XMLHttpRequest

XMLHttpRequest（简称 xhr）是浏览器提供的js成员，可以通过它请求服务器上的数据资源

简单用法
var xhrObj = new XMLHttpRequest()

客户端请求服务器时，请求的方式很多，最常见的请求方式分别为 get 和 post 请求

get请求

通常用于获取服务端资源（向服务器要资源）

例如
根据URL地址，从服务器获取HTML文件，css文件，js文件，图片文件，数据资源等

post请求

通常用于向服务器提交数据（往服务器发送资源）

例如

• 登陆时向服务器提交的登录信息
• 注册时向服务器提交的注册信息
• 添加用户时向服务器提交的用户信息等各种数据提交操作

二、了解Ajax

什么是ajax

全称 Asynchronous javascript And XML(异步JavaScript 和XML)

通俗的理解： 在网页中来利用XMLHttpRequest对象和服务器进行数据交互的方式，就是 Ajax

Ajax能让我们轻松实现网页于服务器之间的数据交互

Ajax典型应用场景

1. 用户名检测： 注册用户时，通过Ajax的形式，动态检测用户名是否已被占用
2. 搜索提示： 打那个输入搜索关键字时，通过Ajax的形式，动态加载搜索提示列表
3. 数据分页显示： 当点击页码值的时候，通过Ajax的形式，根据页码值动态刷新表格的数据
4. 数据的增删改查： 数据的添加、删除、修改、查询操作，都需要通过ajax的而形式，来实现数据的交互

了解jQuery中的Ajax

浏览器中提供的XMLHttpRequest用法比较复杂，jQuery对XMLHttpRequest进行封装，提供了一系列Ajax相关函数，极大的降低了Ajax的使用难度

1. $.get() 用来获取是资源

2. $.post() 提交资源

3. $.ajax() 既可以获取资源，又可以提交资源

$.get()函数的语法

专门用来发起get请求，从服务器上的资源请求到客户端来进行使用

语法

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

• url : string , 必选参数 ， 要请求的资源地址
• data： object 可选参数， 请求资源期间要携带的参数
• callback ： function 可选参数 请求成功时的回调函数

get（）发起不带参数的请求
使用get发起不带参数的请求时，直接提供请求的URL地址和请求成功之后的回调函数即可

 $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                    console.log(res); // 这里的 res 是服务器返回的数据
                })
1
2
3

get（）发起带参数的请求

  $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {
                    console.log(res);
                })
1
2
3

$.post()函数的语法

专门用来发起post请求，从而向服务器提交数据

语法

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

• url : string , 必选参数 ，提交数据的地址
• data： object 可选参数， 要提交的数据
• callback ： function 可选参数 数据提交成功时的回调函数

post（）向服务器提交数据

 $.post('http://www.liulongbin.top:3006/api/addbook',//请求的url地址
                    { bookname: '蓝桉跑过少年时', author: '岑桑', publisher: '光明日报出版社' },//提交的数据
                    function (res) {
                        console.log(res);
                    }
                )
1
2
3
4
5
6

$.ajax()函数的语法

jQuery中提供的**$.ajax()函数**，是一个功能比较综合的函数，可以请求数据也可以发送数据
语法

$.ajax({
    type : '  ',  // 请求的方式，例如get、post
    url :  '  ',   //请求的url地址
    data ; {   },  //这次请求要携带的数据
    success : function（res）{  }   // 请求成功后的回调函数
})
1
2
3
4
5
6

ajax（）发起get请求

 $.ajax({
        type: 'get',
        url: 'http://www.liulongbin.top:3006/api/getbooks',
         data: { id: 1 },
        success: function (res) {
         console.log(res);
       }
 })
1
2
3
4
5
6
7
8

ajax（）发起post请求

 $.ajax({
      type: 'post',
       url: 'http://www.liulongbin.top:3006/api/addbook',
       data: { bookname: '蓝桉跑过少年时', author: '岑桑', publisher: '光明日报出版社' },
        success: function (res) {
        console.log(res);
     }
  })
1
2
3
4
5
6
7
8

form表单

什么是form表单

表单在网页中主要负责数据采集功能

• html中的标签，就是用于采集用户输入的信息，
• 并通过标签的提交操作，把采集到的信息提交到服务器端进行处理

标签的属性

form标签用来采集数据，标签的属性用来规定： 如何把采集到的数据发送到服务器

1. action

规定当提交表单时，向何处发送表单数据

action属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接受表单提交过来的数据

当< form>表达那在未指定action属性值的情况下，action的默认值为当前页面的URL地址

注意
当表单提交后，页面会立即跳转到action属性指定的URL地址

2. target

target属性用来规定在何处打开 action URL

默认情况下，target的值是 _self，表示在相同的框架中打开‘

3. method

method属性用来规定以何种方式把表单数据提交到action URL

• get (默认值，通过URL地址形式提交数据)
• post

注意

• get方式适合用来提交少量的，简单的数据
• post方式适合用来提交大量的、复杂的、或包含文件上传的数据

4. enctype

规定在发送表单数据之前如何对数据进行编码

注意

• 涉及文件上传的操作时，必须将enctype的值设为multipart/form-data
• 不涉及文件上传操作时设为默认值

表单的同步提交及缺点

表单的同步提交:

通过点击submit按钮，出发表单提交的操作，从而使页面跳转到action URL的行为

同步提交的缺点:

• 页面会发生跳转
• 页面之前的状态和数据会丢失

解决方案

表单只负责采集数据，Ajax负责将数据提交到服务器

通过Ajax提交表单数据

1. 监听表单提交事件

$("# form").submit(function(e){
     alert(‘监听到了表单的提交数据’)
})
1
2
3

$("# form").on('submit',function(e){
     alert(‘监听到了表单的提交数据’)
})
1
2
3

2. 阻止表单默认提交行为

调用事件对象 e.prevevtDefault()函数

3. 快速获取表单中的数据

$(‘选择器’).serialize();

• 可以一次性获取到表单中的所有数据
• 使用serialize（）函数时，必须为每个表单元素添加name属性

三、XMLHttpRequest

XMLHttpRequest（简称xhr）是浏览器提供的JavaScript对象，通过它，可以请求服务器上的数据资源

使用xhr发起GET请求

1. 创建xhr对象

var xhr = new XMLHttpRequest()

2. 调用xhr.open()函数

指定请求方式与url地址:
xhr.open(‘GET’, ‘http://www.liulongbin.top:3006/api/getbooks’)

带参数的

指定请求方式与url地址
xhr.open(‘GET’, ‘http://www.liulongbin.top:3006/api/getbooks?id=1’)

• 这种URL地址后面拼接的参数，叫做查询字符串

3. 调用xhr.send()函数

xhr.send(); 发起Ajax请求

4. 监听xhr.onreadystatechanage事件

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
     //监听xhr对象的请求状态readystate；与服务器响应状态status
       console.log(xhr.responseText);
     }
 }
1
2
3
4
5
6

使用xhr发起POST请求

1. 创建xhr对象

var xhr = new XMLHttpRequest()

2. 调用xhr.open()函数

指定请求方式与url地址

xhr.open(’POST’, ‘http://www.liulongbin.top:3006/api/addbook’)

3. 设置Content-Type属性（固定写法）

xhr.setRequestHeader(‘Content-Type’ , ‘application/x-www-form-urlencoded’)

4.调用xhr.send()函数，同时指定要发送的数据

xhr.send(‘bookname=水浒传&author=施耐庵&publisher=天津出版社’)

5. 监听xhr.onreadystatechanage事件

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
     //监听xhr对象的请求状态readystate；与服务器响应状态status
       console.log(xhr.responseText);
     }
 }
1
2
3
4
5
6

四、XMLHttpRequest Level2的新特性

旧版XMLHttpRequest的缺点

1. 只支持文本数据的传输，无法用来读取和上传文件
2. 传送和接受数据时，没有进度信息，只能提示有没有完成

---

XMLHttpRequest Level2的新功能

1. 可以设置HTTP请求的时限
2. 可以使用FormData对象管理表单数据
3. 可以上传文件
4. 可以获取数据传输的进度信息

设置HTTP请求时限

有时Ajax操作很耗时，而且无法预知要花费多少时间，如果网速很慢，用户可能要等很久
timeout属性 :

1. 设置timeout属性：xhr.timeout =3000
2. ontimeout事件,用来指定回调函数

   xhr.ontimeout = function(event){    alert('请求超时！')
   }    ```
   1
   2

FormData对象管理表单数据

1. 创建FormData

1. 新建FormData对象

var fd = new FormData()

2. 为formdata添加表单项

fd.append(‘name’,‘zs’)

2. FormData对象获取网页表单的值

var fd = new FormData(form)
(根据form表单创建FormData对象，会自动将表单数据填充到FormData对象中)

上传文件

1. 定义UI结构
2. 验证是否选择了文件
3. 向FormData中追加文件
4. 使用xhr发起上传文件的请求

显示文件上传进度

通过建通xhr.upload.onprogress事件来获取到文件的上传进度

xhr.upload.onprogress=function(e){
 if(e.lengthComputable){
           var percentComplete = Math.ceil((e.loaded / e.total)*100)
   }
}
1
2
3
4
5

• e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
• e.loaded 已传输的字节
• e.total 需要传输的总字节

监听上传完成的事件

xhr.upload.onload = function(){  
}
1
2

jQuery高级用法实现文件上传

jQuery实现文件上传，必须注意以下两个属性：

• contentType ：false
• processData： false

 $.ajax({
       method: 'POST',
       url: 'http://www.liulongbin.top:3006/api/upload/avatar',
       data: fd,
        contentType: false,
        processData: false,
        success: function (res) {
             console.log(res);
       }
  })
1
2
3
4
5
6
7
8
9
10

ajaxStart（callback）

Ajax请求开始时，执行ajaxStart函数。可以在ajaxStart的callback中显示loading效果

注意： $(document).ajaxStart()函数会监听当前文档内的所有Ajax请求

ajaxStop（callback）

Ajax请求结束时，执行ajaxStop函数。可以在ajaxStop函数的callback中隐藏loading效果

五、axios

什么是axios

axios是专注于网络数据请求的库

• 相比于原生的XMLHttpRequest对象，axios简单易用
• 相比于jquery，axios更加轻量化，只专注于网络数据请求

axios发起get请求

axios.get(‘url’, {params: { 参数 }}). then(allback)

axios发起post请求

axios.post(‘url’,{参数}).then(callback)

直接使用axios发起请求

axios({
   method: '请求类型',
   url: 请求的url地址,
   data:{   post数据 }，
   params: { get数据 }
}).then(callback)
1
2
3
4
5
6

注意 : res.data 才是服务器返回的数据

六、跨域和JSONP

同源策略

同源

如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源

同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能

MDN官方给定的概念

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互,这是一个用于隔离潜在恶意文件的重要机制
通俗的理解

浏览器规定，A网站的JavaScript，不允许和非同源的网站C之间，进行资源的交互

• 无法读取非同源网页的Cookie。LocalStorage和indexedDB
• 无法接触非同源网页的DOM
• 无法向非同源地址发送Ajax请求

跨域

是指两个URL的协议、域名、端口其中一个或者多个不一致，就是跨域

出现跨域的根本原因

浏览器的同源策略不允许非同源的URL之间进行资源的交互

JSONP

什么是JSONP

JSONP（JSON width Padding）是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题

JSONP的实现原理

由于浏览器同源策略的限制，网页中无法通过Ajax请求非同源的接口数据。但是< script>标签不受浏览器同源策略的影响，可以通过src属性，请求非同源的js的脚本

实现原理

通过< script>标签的src属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据

JSONP的缺点

由于JSONP是通过< script>标签的src属性，来实现跨域数据获取的，所以JSONP只支持GET数据请求，不支持POST请求

注意
JSONP和Ajax之间没有任何关系，不能把JSONP请求数据的方式叫做Ajax，因为JSONP没有用到XMLHttpRequest这个对象

jQuery中的JSONP

$.ajax({
   url:'http://.....',
  dataType: 'jsonp',
  success: function(res){
      console.log(res)
   }
})
1
2
3
4
5
6
7

默认情况下，使用jQuery发起JSONP请求，会自动携带一个callback=jQueryxxx的参数，jQueryxxx是随机生成的额一个回调函数名称

自定义参数及回调函数名称

1. JSONP的参数

   jsonp：‘callback’

2. 回调函数名称

   jsonpCallback： ‘abc’

jQuery中JSONP的实现过程

也是通过< script>标签的src属性实现跨域数据访问的，只不过采用的是动态创建和移除< script>标签的方式，来发起JSONP数据请求。

• 在发起JSONP请求的时候，动态向< header>中append一个< script>标签
• 在JSONP请求成功以后，动态从< header>中移除刚才append进去的< script>标签

---

---

---

以上就是对Ajax的总结了
🌻Per aspera ad astra 循此苦旅，以觅繁星🌻