AJAX --- 一种创建交互式网页应用的网页开发技术
2024-09-07 06:51:20
AJAX
ajax核心技术就是 XMLHttpRequest
对象,简称XHR
对象。这种客户端与服务器不刷新页面请求数据技术主要是利用XMLHttpRequest
对象实现的,IE7 之前版本的浏览器是通过 ActiveXObject
对象实现的。
创建XHR实例
var xhr = (typeof XMLHttpRequest === "object") ? new XMLHttpRequest() : new ActiveXObject();
指定readyStatechange事件处理程序
- 请求/响应步骤: 启动请求 → 发送请求 → 接收部分数据 → 接收完整数据。
- 用户通过检测XHR对象的
.readyState
属性来判断当前请求/响应阶段。
XHR.readyState | 说明 |
---|---|
0 | 未启动请求 |
1 | 启动请求 |
2 | 发送请求 |
3 | 接收部分数据 |
4 | 接收完整数据 |
每次 .readyState
属性值发生变化都会触发一个 readyStatechange
事件,用户可以监听这个事件来判断数据是否接收完毕。
xhr.onreadyStatechange = function() {
// xhr.readyState
};
启动请求
XHR对象的 .open( method, url, bool )
方法是启动一个请求(注意:这里并没有发送请求!)。
参数 | 说明 |
---|---|
method | 请求方法(get、post...) |
url | 请求url |
bool | 是否异步发送 |
xhr.open( "get", "index.php", false );
发送请求
XHR对象的 .send( null )
方法是正式发送请求。
xhr.send( null );
接收数据
当服务器响应请求后,响应的数据会自动填充 XHR
对象的属性中。
属性 | 说明 |
---|---|
responseText | 响应文本 |
responseXML | 响应数据的XML DOM文档 |
status | 响应HTTP状态 |
statusText | 响应HTTP状态说明 |
// 建议判断status的状态码来确定下一步动作
xhr.onreadyStatechange = function() {
if( xhr.status >= 200 && xhr.status < 300 || xhr.status == 304 ) {
console.log( xhr.responseText );
}
}
取消XHR请求/响应
- 通过XHR对象的
.abort()
方法来取消请求或者关闭响应。 - 终止请求之后,
XHR
会停止触发事件,并且禁止访问与响应有关的属性。 - 终止请求之后,最好释放XHR引用,避免内存浪费。
xhr.abort();
xhr = null;
最新文章
- 在Spring中轻松写日志
- Oracle 11g数据库详细安装步骤图解
- fiddler note
- 个人博客实现Archives查询小记
- Codeforces Round #368 (Div. 2) C. Pythagorean Triples(数学)
- java security
- Pythoner | 你像从前一样的Python学习笔记
- Linux批量重命名文件
- A1140. Look-and-say Sequence
- CF1056E Check Transcription 字符串哈希
- [HDU] 5306 Gorgeous Sequence [区间取min&;求和&;求max]
- 在学习前端的路上,立下一个Flag
- Error configuring application listener of class org.springframework.web.context.ContextLoaderListener
- Burpsuite神器常用功能使用方法总结
- Windows API中的坑
- sublime text光标移入移出括号的快捷键设置
- Android应用实现Push推送消息原理
- poi生成excel报表合并列
- javascript 六种基本数据类型转换
- eclipse代码凝视之模板xml
热门文章
- pnputil
- centos的python2.6.x升级到python2.7.x方法;python2.6.x的版本就不要用了
- Service具体解释(一):什么是Service
- SD卡读写之FileNotFoundException: /storage/emulated/0object.txt: open failed: ENOENT (No such file or dir
- 微信小程序 项目实战(一)生命周期 配置服务器信息 splash启动页
- 前端编程提高之旅(五)----写给大家看的css书
- 浅谈JavaScript的事件(事件委托)
- HDU 2601An easy problem-素数的运用,暴力求解
- 将线上服务器生成的日志信息实时导入kafka,采用agent和collector分层传输,app的数据通过thrift传给agent,agent通过avro sink将数据发给collector,collector将数据汇集后,发送给kafka
- 移动web开发适配rem