AJAX
概述
1、AJAX:异步 JavaScript 和 XML,Asynchronous JavaScript And XML
2、创建交互式网页应用的网页开发技术
3、浏览器通过 JavaScript 异步发起请求,局部更新页面的技术
(1)局部更新:浏览器地址栏不会发生变化,不会舍弃原来页面的内容
(2)异步: 异步处理不用阻塞当前线程来等待处理完成,而是允许后续操作,直至其它线程将处理完成,并回调通知此线程
JavaScript 发起 AJAX 请求示例
function AJAXRequest() {
//创建SMLHttpRequest对象
var xmlHttpRequest = new XMLHttpRequest();
//绑定onreadystatechange事件,处理请求完成后的操作
xmlHttpRequest.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
}
};
//调用open方法设置请求参数
xmlHttpRequest.open(method, url, async);
//调用send方法发送请求
xmlHttpRequest.send();
}
XMLHttpRequest 对象
1、Ajax 的核心
2、所有现代浏览器(Chrom、IE7+、Firefox、Safari、Opera)都支持 XMLHttpRequest 对象
3、XMLHttpRequest 对象用于同幕后服务器交换数据,这意味着可以更新网页的部分,而不需要重新加载整个页面
4、创建 XMLHttpRequest 对象
var = new XMLHttpRequest();
5、XMLHttpRequest 对象方法
方法 | 描述 |
---|---|
new XMLHttpRequest() | 创建新的 XMLHttpRequest 对象 |
abort() | 取消当前请求 |
getAllResponseHeaders() | 返回头部信息 |
getResponseHeader() | 返回特定的头部信息 |
open(method, url, async, user, psw) |
规定请求 method:请求类型 GET 或 POST url:文件位置 async:true(异步)或 false(同步) user:可选的用户名称 psw:可选的密码 |
send() | 将请求发送到服务器,用于 GET 请求 |
send(string) | 将请求发送到服务器,用于 POST 请求 |
setRequestHeader() | 向要发送的报头添加标签/值对 |
6、XMLHttpRequest 对象属性
属性 | 描述 |
---|---|
onreadystatechange | 定义当 readyState 属性发生变化时被调用的函数 |
readyState |
保存 XMLHttpRequest 的状态。 0:请求未初始化 1:服务器连接已建立 2:请求已收到 3:正在处理请求 4:请求已完成且响应已就绪 |
responseText | 以字符串返回响应数据 |
responseXML | 以 XML 数据返回响应数据 |
status |
返回请求的状态号(HTTP 状态消息) |
statusText | 返回状态文本(比如 "OK" 或 "Not Found") |
7、调用 send() 之前,必须绑定 onreadystatechange
8、open(),选择异步
jQuery 中的 AJAX 请求
1、$.ajax(url,[settings])
(1)通过 HTTP 请求加载远程数据
(2)jQuery 底层 AJAX 实现,简单易用的高层实现见
(3)最简单的情况下,$.ajax() 可以不带任何参数直接使用
(4)注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置
(5)url:一个用来包含发送请求的URL字符串
(6)settings:AJAX 请求设置,所有选项都是可选的
2、$.post(url,[data],[fn],[type])
(1)通过远程 HTTP POST 请求载入信息
(2)这是一个简单的 POST 请求功能以取代复杂
(3)url:发送请求地址
(4)data:待发送 Key/value 参数
(5)callback:发送成功时回调函数
(6)type:返回内容格式,xml、html、script、json、text、 _default
3、$.get(url,[data],[fn],[type])
(1)通过远程 HTTP GET 请求载入信息
(2)这是一个简单的 GET 请求功能以取代复杂
(3)url:待载入页面的URL地址
(4)data;待发送 Key/value 参数
(5)callback:载入成功时回调函数
(6)type:返回内容格式,xml、html、script、json、text、 _default
4、$.getJSON(url,[data],[fn])
(1)通过 HTTP GET 请求载入 JSON 数据
(2)url:发送请求地址
(3)data:待发送 Key/value 参数
(4)callback:载入成功时回调函数
5、表单序列化
(1)serialize():获取表单中所有表单项的内容 ,并以 name=value&name=value 的形式,进行字符串拼接
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战