详解 Ajax

最新推荐文章于 2021-08-05 14:10:34 发布

Demo_Null

最新推荐文章于 2021-08-05 14:10:34 发布

阅读量453

点赞数 1

分类专栏： Java Web 文章标签： ajax js java

本文链接：https://blog.csdn.net/Demo_Null/article/details/106982938

版权

Java Web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.1 简介

1.1.1 概述

Ajax：标准读音 [ˈeɪˌdʒæks] ，中文音译：阿贾克斯。这个术语源自描述从基于 Web 的应用到基于数据的应用。Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象 XMLHttpRequest。通过这个对象，JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求)，这样就可使网页从服务器请求少量的信息，而不是整个页面。

在这里插入图片描述

1.1.2 Ajax 的优缺点

使用 Ajax 的最大优点，就是能在不更新整个页面的前提下维护数据。这使得 Web 应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。Ajax 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。Ajax 应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着 Ajax 的成熟，一些简化 Ajax 使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持 JavaScript 的用户提供替代功能。
对应用 Ajax 最主要的缺点就是，它可能破坏浏览器的后退与加入收藏书签功能。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的可能差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在 Ajax 应用程序中，却无法这样做。
进行 Ajax 开发时，网络延迟(即用户发出请求到服务器发出响应之间的间隔)需要慎重考虑。如果不给予用户明确的回应，没有恰当的预读数据，或者对 XMLHttpRequest 的不恰当处理，都会使用户感到厌烦。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

在这里插入图片描述

1.2 XMLHttpRequest

☞ XMLHttpRequest 详细介绍

1.3 jQuery 封装的 Ajax

jQuery 提供了 4 种 ajax 方法：$.get()、 $.post()、 $.ajax()、 $.getJSON()。$.ajax 这个是 JQuery 对 ajax 封装的最基础步，通过这个函数可以完成异步通讯的所有功能。$.post 这个函数其实就是对 $.ajax 进行了更进一步的封装，简化了数据提交方式，只能采用 POST 方式提交。$.get 和 $.post 类似，是对 GET 方法的提交数据进行封装，只能使用在 GET 提交数据解决异步刷新的方式上。一般只使用前三种方法。

在这里插入图片描述

1.3.1 语法

$.ajax({name:value, name:value, ... })

$.get({name:value, name:value, ... })

$.post({name:value, name:value, ... })

1.3.2 参数

参数	描述
async	布尔值，表示请求是否异步处理。默认是 true
beforeSend(xhr)	发送请求前运行的函数
cache	布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr，status)	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）
contentType	发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”
context	为所有 AJAX 相关的回调函数规定 “this” 值
data	规定要发送到服务器的数据
dataFilter(data，type)	用于处理 XMLHttpRequest 原始响应数据的函数
dataType	预期的服务器响应的数据类型
error(xhr，status，error)	如果请求失败要运行的函数
global	布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true
ifModified	布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false
jsonp	在一个 jsonp 中重写回调函数的字符串
jsonpCallback	在一个 jsonp 中规定回调函数的名称
password	规定在 HTTP 访问认证请求中使用的密码
processData	布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true
scriptCharset	规定请求的字符集
success(result，status，xhr)	当请求成功时运行的函数
timeout	设置本地的请求超时时间（以毫秒计）
traditional	布尔值，规定是否使用参数序列化的传统样式
type	规定请求的类型（GET 或 POST）
url	规定发送请求的 URL。默认是当前页面
username	规定在 HTTP 访问认证请求中使用的用户名
xhr	用于创建 XMLHttpRequest 对象的函数

1.3.3 示例

$.ajax({
	url:'test.do', 
	data:{username:"Demo_Null", password:"niubiplus"}, 
	type:'post', 
	dataType:'json', 
    beforeSend:function(xhr){
        // 请求前的处理
    },
    success:function(result, status, xhr){
        // 请求成功时处理
    },
    complete:function(xhr, status){
        // 请求完成的处理
    },
    error:function(xhr, status, error){
        // 请求出错处理
    }
})