AJAX&JQuery基础（适合入门-新手）

最新推荐文章于 2023-05-27 16:06:06 发布

ttxxi_

最新推荐文章于 2023-05-27 16:06:06 发布

阅读量1.2k

点赞数 3

分类专栏：前端文章标签： AJAX

本文链接：https://blog.csdn.net/ttxxi_/article/details/83996712

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

关于原生AJAX基础我在我自己的上一篇博客进行了简单阐述，需要的话自提https://blog.csdn.net/ttxxi_/article/details/83991752

在申明一下：我只是个大二学生，写的东西很基础，因为我也只是刚刚才接触，所有这个个人觉得也适合和我一样刚刚开始学的人看一下，大佬们喷的时候可以肆无忌惮一点，我觉得我就需要骂一骂hhh

一、AJAX简介

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

Ajax 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

二、AJAX封装

仅仅掌握原生AJAX肯定不够，因为一般的网页中需要动态刷新的地方有很多，比如我们在一个网页中点击了某个地方，发现网页内容发生了改变，如果地址栏里面的网址也跟着改变了，那么可能就是刷新了整个界面，要是网站稍微大一点或者需要下载的资源多一点我们可以明显看到页面的重新加载，十分影响用户体验；而地址栏里面的地址没有改变，则用的是ajax局部刷新，需要重新加载的部分也就只有我们网页内容发生更改的部分，加载量相比于刷新整个界面小很多，速度更快，体验更好。

但是在一个项目的开发中，需要运用到AJAX的地方很多，如果每一次都去重新new一个XMLHttpResponse的对象再去按照流程写函数体就显得十分麻烦，而且一旦多了就会是代码很臃肿，因此我们需要AJAX的封装。

在开发过程中用户可以根据自己的需求去自行封装代码，这个在这里我不做过多的讲述（其实是我才疏学浅没有去研究qwq）。其实我们用的最广泛的js插件Jquery以及为我们提供了一套ajax的封装，而且运用十分广泛方便，本文就此展开讨论。

三、AJAX&JQuery

1、$.ajax()

先来一个完整代码示例：

$.ajax({
   url: './get.php',
   type: 'post',
   dataType: 'json',
   data: { id: 1 },
   beforeSend: function (xhr) {
     console.log('before send')
   },
   success: function (data) {
     console.log(data)
   },
   error: function (err) {
     console.log(err)
   },
   complete: function () {
     console.log('request completed')
   }
 })

相信大家就算没有接触过JQuery下的AJAX看了这段代码也应该大概能懂这个AJAX请求的方法以及对应状态的相应方法，因为jQuery封装十分语义化，可以见名知意

下面解释一下常用选项参数：

url：请求地址

type：请求方法，默认为 get

dataType：服务端响应数据类型，可以更加准确的设置返回的数据类型，即使服务器返回的相应头设置的与我们实际的数据类型不一致，通过dataType也可以改正过来。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断

contentType：请求体内容类型，默认 application/x-www-form-urlencoded （一般情况下，我们就使用默认，不写这一项）

data：需要传递到服务端的数据，如果 GET 则通过 URL 传递(即在url请求地址后面通过？的方式传参)，因此不需要写这一项；如果 POST 则通过请求体传递，必须写这一项，不能通过url传参，data里面以键值对的形式写要穿的参数。

timeout：请求超时时间

beforeSend：请求发起之前触发，无特殊要求可以不写

success：请求成功之后触发（响应状态码 200），我们需要完成的功能就写在这个里面，因为只有相应成功我们才准确拿到了数据才能处理

error：请求失败触发，可以是请求失败后一些提示信息

complete：请求完成触发（不管成功与否）

2、$.get()

get() 方法通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

语法为：$(selector).get(url,data,success(response,status,xhr),dataType)

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断。

可以说这个是如下$.ajax()的简化：

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

3、$.post()

post() 方法通过 HTTP POST 请求从服务器载入数据。

语法为：jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

参数	描述
url	必需。规定把请求发送到哪个 URL。
data	可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。

可以说这个是如下$.ajax()的简化：

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

5、ajax跨域问题

ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”。

即如果网页文件所在服务器的域名必须和请求的服务器的域名一致，否则请求失败，这个就为前后端分离开发造成了巨大的困扰，为了解决这个问题而提出了ajax跨域。

详细见：https://blog.csdn.net/ttxxi_/article/details/84000759

最后我只是一个刚刚大二的菜鸡，一边学校里面学习一边总结，如果有错误，请不要怜香惜玉，尽情的批判我吧！这是我在学校实训项目结束后想总结一下才写的，借鉴了我视频学习资料里面的一些源码。再次声明我是菜鸡。谢谢

ttxxi_

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
AJAX&JQuery基础（适合入门-新手）

关于原生AJAX基础我在我自己的上一篇博客进行了简单阐述，需要的话自提https://blog.csdn.net/ttxxi_/article/details/83991752在申明一下：我只是个大二学生，写的东西很基础，因为我也只是刚刚才接触，所有这个个人觉得也适合和我一样刚刚开始学的人看一下，大佬们喷的时候可以肆无忌惮一点，我觉得我就需要骂一骂hhh一、AJAX简介Ajax 即“A...
复制链接

扫一扫