ajax异步请求

时间:2021-6-4 作者:qvyue

什么是 AJAX ?

Ajax 的全称是 Asynchronous JavaScript And XML(异步 JavaScriptxml
通俗理解:在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式,就是Ajax
突出的特点:当前网页没有刷新、没有跳转。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
既然ajax有这么多好处,我们要怎样使用ajax呢?代码说话

原声AJAX

-所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。原声请求分为POST和GET两种方式,GET的参数是通过url?后以键值对的形式传送给服务器的,POST是通过XMLHttpRequest中send方法传递过去的,与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

POST请求方式:

//首先创建一个XMLHttpRequest对象
          let xhr = new XMLHttpRequest();
          //open向服务器发送请求
           xhr.open('POST', url);
          //告知服务器post请求报文的格式
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
          //发送请求
            xhr.send(fd);
          //判断相应是否成功,并将服务器响应数据赋值
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let res = JSON.parse(xhr.responseText);
                    if (res.status !== 200) return alert(res.message);
                    console.log(res);
                }
            }

GET请求方式:

//首先创建一个XMLHttpRequest对象
          let xhr = new XMLHttpRequest();
          //open向服务器发送请求
           xhr.open('GET', url?'key:value');
          //发送请求
            xhr.send();
          //判断相应是否成功,并将服务器响应数据赋值
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let res = JSON.parse(xhr.responseText);
                    if (res.status !== 200) return alert(res.message);
                    console.log(res);
                }
            }

jQuery中的AJAX

由于XMLHttpRequest对象用法比较复杂
jQuery中为我们封装了XMLHttpRequest对象提供了一系列的Ajax相关的函数
jQuery中发起 Ajax 请求最常用的三个方法如下:

  • $.get() get方式请求,用于获取数据
  • $.post() post方式请求,用于提交数据
  • $.ajax() 比较综合,既可以获取数据,又可以提交数据

$.get()

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

ajax异步请求
image.png

$.post()

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

ajax异步请求
image.png

$.ajax()

$ajax的基本语法

ajax异步请求
image.png

Axios

Axios 是专注于网络数据请求的库。
相比于原生的 XMLHttpRequest 对象,axios 简单易用
相比于 jQueryaxios 更加轻量化,只专注于网络数据请求。

axios.get

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

// 请求的 URL 地址
var url = ''
// 请求的参数对象
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)
})

axios.post

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

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

axios

axios 也提供了类似于 jQuery$.ajax() 的函数,语法如下:

axios({
 method: '请求类型',
 url: '请求的URL地址',
 data: { /* POST数据 */ },
 params: { /* GET参数 */ }
}).then(callback)
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。