Ajax原理及应用

Ajax

1.Ajax概述

Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。

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

它是一组用于异步显示数据的相关技术。换句话说，它在不重新加载网页的情况下发送和检索数据。

1.1为什么需要Ajax

以前，当我们点击了一个按钮，向服务器请求数据的时候，通常会有这么一个流程。

浏览器向服务器发送Http请求→服务器返回整个页面→浏览器将原先的整个页面替换成新的页面。

这样子做当然没有什么问题，但是比如在看土豆的视频的时候，想看一下下方的评论，不过瘾，想再看下一页的评论，这时候浏览器会向服务器发请求，要是正在看视频的时候整个页面重新加载，视频重加载一次，那简直不可饶恕。

所以就产生了Ajax这种技术，用来进行页面的局部刷新，省的每次更新界面都得重新下载一个完整的界面。

1.2Ajax优缺点

优点：

• 页面局部刷新数据，用户体验感好；
• 所有浏览器都支持，不需下载额外插件；
• 使用异步方式与服务器通信；
• 减轻了服务器压力，加快了响应速度，体现ajax是按需获取数据的。

缺点：

• 破坏了浏览器的后退功能，用户不能通过后退来取消前一次的操作；
• 网络延迟问题；
• 安全性问题，ajax变相地提供了一个访问服务器数据的接口

1.3Ajax的工作原理

客户端通过XMLHttpRequest对象向服务器发起异步请求，从服务器获取数据，然后通过JavaScript操作DOM节点来更新页面数据。

2.XMLHttpRequest

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

2.1 使用xhr发起GET请求

• 创建 xhr 对象
• 调用 xhr.open() 函数
• 调用 xhr.send() 函数
• 监听 xhr.onreadystatechange 事件

// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定 请求方式 与 URL地址
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
//xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')   查询字符串
// 3. 调用 send 函数，发起 Ajax 请求
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    // 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 4.2 打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}

readyState值	状态	描述
0	UNSENT	XMLHttpRequest 对象已被创建，但尚未调用 open方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，响应头也已经被接收。
3	LOADING	数据接收中，此时 response 属性中已经包含部分数据。
4	DONE	Ajax 请求完成，这意味着数据传输已经彻底完成或失败。

2.2 使用xhr发起POST请求

• 创建 xhr 对象
• 调用 xhr.open() 函数
• 设置 Content-Type 属性（固定写法）
• 调用 xhr.send() 函数，同时指定要发送的数据
• 监听 xhr.onreadystatechange 事件

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send()，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}

2.3 封装Ajax函数

<!-- 1. 导入自定义的ajax函数库 -->
<script src="./itheima.js"></script>

<script>
    // 2. 调用自定义的 itheima 函数，发起 Ajax 数据请求
    itheima({
        method: '请求类型',
        url: '请求地址',
        data: { /* 请求参数对象 */ },
        success: function(res) { // 成功的回调函数
            console.log(res)     // 打印数据
        }
    })
</script>

//封装的内容
function resolveData(data) {
  var arr = []
  for (var k in data) {
    arr.push(k + '=' + data[k])
  }
  return arr.join('&')
}

function itheima(options) {
  var xhr = new XMLHttpRequest()
  // 拼接查询字符串
  var qs = resolveData(options.data)

  // 监听请求状态改变的事件
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var result = JSON.parse(xhr.responseText)
      options.success(result)
    }
  }
}

if (options.method.toUpperCase() === 'GET') {
    // 发起 GET 请求
    xhr.open(options.method, options.url + '?' + qs)
    xhr.send()
} else if (options.method.toUpperCase() === 'POST') {
    // 发起 POST 请求
    xhr.open(options.method, options.url)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
}

3.jQuery中的Ajax

jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。

3.1 $.get()函数的语法

jQuery 中 $.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。

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

参数名	参数类型	是否必选	说明
url	string	是	要请求的资源地址
data	object	否	请求资源期间要携带的参数
callback	function	否	请求成功时的回调函数

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

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

3.2 $.post()函数的语法

jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。

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

参数名	参数类型	是否必选	说明
url	string	是	提交数据的地址
data	object	否	要提交的数据
callback	function	否	数据提交成功时的回调函数

$.post(
   'http://www.liulongbin.top:3006/api/addbook', // 请求的URL地址
   { bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' }, // 提交的数据
   function(res) { // 回调函数
      console.log(res)
   }
)

3.3 $.ajax()函数的语法

相比于 $.get() 和 $.post() 函数，jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许我们对 Ajax 请求进行更详细的配置。

$.ajax({
   type: '', // 请求的方式，例如 GET 或 POST
   url: '',  // 请求的 URL 地址
   data: { },// 这次请求要携带的数据
   success: function(res) { } // 请求成功之后的回调函数
})

$.ajax({
   type: 'GET', // 请求的方式
   url: 'http://www.liulongbin.top:3006/api/getbooks',  // 请求的 URL 地址
   data: { id: 1 },// 这次请求要携带的数据
   success: function(res) { // 请求成功之后的回调函数
       console.log(res)
   }
})

$.ajax({
   type: 'POST', // 请求的方式
   url: 'http://www.liulongbin.top:3006/api/addbook',  // 请求的 URL 地址
   data: { // 要提交给服务器的数据
      bookname: '水浒传',
      author: '施耐庵',
      publisher: '上海图书出版社'
    },
   success: function(res) { // 请求成功之后的回调函数
       console.log(res)
   }
})

4. 通过Ajax提交表单数据

4.1 form表单

表单由三个基本部分组成：

• 表单标签
• 表单域
• 表单按钮

表单标签

属性	值	描述
action	URL地址	规定当提交表单时，向何处发送表单数据
method	get或post	规定以何种方式把表单数据提交到 action URL
enctype	见下表	规定在发送表单数据之前如何对其进行编码
target	见下表	规定在何处打开 action URL

target值	描述
_blank	在新窗口中打开。
_self	默认。在相同的框架中打开。
_parent	在父框架集中打开。（很少用）
_top	在整个窗口中打开。（很少用）
framename	在指定的框架中打开。（很少用）

enctype值	描述
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。
text/plain	空格转换为 “+” 加号，但不对特殊字符编码。（很少用）

4.2 监听表单提交事件

$('#form1').submit(function(e) {
   alert('监听到了表单的提交事件')
   // 阻止表单的提交和页面的跳转
   e.preventDefault()

})

$('#form1').on('submit', function(e) {
   alert('监听到了表单的提交事件')
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})

4.3 快速获取表单中的数据

serialize()函数

$(selector).serialize()

<form id="form1">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</form>

$('#form1').serialize()
// 调用的结果：
// username=用户名的值&password=密码的值
//注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！

5. axios

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

相比于原生的 XMLHttpRequest 对象，axios 简单易用。

相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。

5.1 axios发起GET请求

axios.get('url', { params: { /*参数*/ } }).then(callback)

 // 请求的 URL 地址
 var url = 'http://www.liulongbin.top:3006/api/get'
 // 请求的参数对象
 var paramsObj = { name: 'zs', age: 20 }
 // 调用 axios.get() 发起 GET 请求
 axios.get(url, { params: paramsObj }).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(res)
 })

5.2 axios发起POST请求

 axios.post('url', { /*参数*/ }).then(callback)

 // 请求的 URL 地址
 var url = 'http://www.liulongbin.top:3006/api/post'
 // 要提交到服务器的数据
 var dataObj = { location: '北京', address: '顺义' }
 // 调用 axios.post() 发起 POST 请求
 axios.post(url, dataObj).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(result)
 })

5.3 直接请求

 axios({
     method: '请求类型',
     url: '请求的URL地址',
     data: { /* POST数据 */ },
     params: { /* GET参数 */ }
 }) .then(callback)