开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第十天，点击查看活动详情

一.概述

• Ajax(Asynchronous JavaScript and XML,异步的JavaScript和XML)技术可以实现页面的局部更新

• 传统请求方式是在页面跳转或页面刷新时发出请求，每次发出请求都会请求一个新的页面，即使刷新也是重新加载本页面

• Ajax异步请求方式不同于传统的方式，通过Ajax异步请求方式向服务器发出请求，得到数据后再更新页面（通过DOM操作修改页面），整个过程不发生页面跳转或刷新操作

• 传统方式与Ajax异步请求的对比

  方式	协议	请求发出方式	数据展示方式
  传统请求方式	HTTP	页面链接跳转	重新载入新页面
  Ajax异步请求方式	HTTP	由XMLHttpRequest实例发出请求	JavaScript和DOM技术把数据更新到页面

  Ajax优势：

  • 请求数据量少：只需请求必要数据，对不需更新的数据不做请求
  • 请求分散：按需请求，异步的形式，在任意时刻发出，所以请求不会集中爆发
  • 用户体验优化：响应时间短，速度快

• 使用JavaScript可以实现Ajax，但是代码复杂需要考虑到浏览器兼容问题

• jQuery二次封装了JavaScript，同时对Ajax操作进行了整理和封装，简化了Ajax操作

二.实现方式

1.使用GET方式实现Ajax

• 语法

  $.get(url,data,function(data,status,xhr),datatype)
  

  • 该方法由jQuery提供，其中参数含义如下

    参数	说明
    url	必选，规定加载资源的路径
    data	可选，发送至服务器的数据
    function(data,status,xhr)	可选，请求成功时执行的函数，data表示从服务器返回的数据，status表示请求的状态值，xhr表示当前请求相关的XMLHttpRequest对象
    datatype	可选，预期的服务器响应的数据类型（xml,html,text,script,json,js