AJAX,全称为"Asynchronous JavaScript and XML",是一种在无需重新加载整个网页的情况下,能够与服务器交换数据并更新部分网页的技术。AJAX并不是一种全新的编程语言,而是一种使用现有标准的新方法,通过组合使用不同的技术,AJAX 提供了创建更好、更快且更用户友好的网络应用程序的可能性。
- 背景与起源
在传统的网页浏览中,每当用户与网页进行交互,如填写表单、点击按钮等,浏览器都会向服务器发送请求,服务器处理请求后返回一个新的页面。这种方式下,每当数据更新,用户都需要等待整个页面的重新加载,这导致了页面加载速度慢、用户体验差等问题。
为了解决这些问题,AJAX 技术应运而生。它允许网页在不重新加载整个页面的情况下,通过后台向服务器发送请求并处理响应,从而实现了页面的动态更新。
- 工作原理
AJAX 的核心是 XMLHttpRequest 对象。当用户在网页上执行某些操作时,JavaScript 代码会创建一个 XMLHttpRequest 对象,并使用它来向服务器发送异步请求。服务器处理请求后返回数据,JavaScript 代码再使用这些数据来更新网页的某一部分。
这个过程是异步的,意味着它不会阻止用户继续与网页交互。用户可以在等待服务器响应时继续浏览或进行其他操作。
- AJAX 请求方法( Method )
GET 、 POST 、 PUT 、 PACTH 、 DELETE 等
jQuery 中也有 AJAX 模块,该模块是在 XMLHttpRequest 的基础上进行了封装,语法( Syntax )
如下:
$.ajax( [settings ] ) - 默认用 GET 请求从服务器加载数据, 会返回 jQXHR 对象,可以利
用该对象的 abort 方法来取消请求。
$.get( url [, data ] [, success ] [, dataType ] ) - 发起 GET 请求,底层调用的还
是 $ajax()
$.post( url [, data ] [, success ] [, dataType ] ) - 发起 POST 请求,底层调用的
还是 $ajax()
- load():
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
$('selector').load('URL,data,callback');
必需的 *URL* 参数规定您希望加载的 URL。
可选的 *data* 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 *callback* 参数是 load() 方法完成后所执行的函数名称。
- get() post():
请求参数( Parameters )
url - 指定发送请求的 URL 。
method / type - 用于指定请求的类型 (e.g. "POST", "GET", "PUT") ,默认为 GET
data - 指定要发送到服务器的数据( PlainObject or String or Array )
processData :当 data 是一个对象时, jQuery 从对象的键 / 值对生成数据字符串,除非该
processData 选项设置为 false. 例如, { a: "bc", d: "e,f" } 被转换为字符串
"a=bc&d=e%2Cf" ,默认为 true 。
headers - 请求头的内容( PlainObject )
contentType:
application/x-www-form-urlencoded; charset=UTF-8 ,向服务器发送数据时指定内容
类型。请求体的数据以查询字符串形式提交,如:a=bc&d=e%2Cf 。
application/json; charset=UTF-8 指定为 json 字符串类型
multipart/form-data 。表单类型,一般用于上传文件
dataType - 期望服务器端发回的数据类型( json 、 xml 、 text... ),默认会根据响应的类
型来自动推断类型。
timeout - 请求超时时间。它以毫秒为单位。
beforeSend - 这是一个在发送请求之前运行的函数,返回 false 会取消网路请求。
success - 请求成功回调的函数 状态码 200
error - 请求失败回调的函数
500 后台代码出错
503 服务器维护
403 没有权限获取资源
404 没有找到资源
- AJAX有几种请求方式
6.1 使用“$.ajax()”创建XMLHttpRequest对象。通过这个方式,你可以进行远程HTTP GET或POST请求以载入数据。你可以指定请求类型(如GET、POST)、数据类型、URL以及请求成功或失败时的回调函数。
6.2 另一种方式是使用简单的GET请求。这种方式适用于简单的GET请求,请求成功时可以调用回调函数。
6.3 还可以使用HTTP POST请求来载入数据。这种方式也适用于POST请求,请求成功时可以调用回调函数。
通过HTTP GET请求载入JSON数据。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。