Ajax原生XHR对象
2024-10-14 13:22:19
前端学了有一段时间了,在项目中我通常使用的都是jQuery封装好的Ajax函数($.ajax、$.get、$.post),使用非常的简单方便,但为了更清楚的了解Ajax,需要学习原生xhr对象。
先来明确什么是Ajax,Ajax:“Asynchronous JavaScript and XML”,翻译过来就是异步JavaScript和XML。
Ajax是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。意味这可以再不重新加载整个网页的情况下,对网页的某部分进行更新。
创建Ajax:
要创建Ajax,主角是XMLHttpRequest(下简称XHR)对象。
第一步:创建XHR对象
var xhr = new XMLHttpRequest();
第二步:向服务器发送请求
方法:open(method,url,async) 和 send(string)
open()方法传入三参数
- method:请求的类型(GET/POST)
- url:文件在服务器上的位置
- async:布尔值,true表示异步,false表示同步(可选,默认为true)
send()方法将请求发送到服务器,有一个可选的参数string,仅用于POST类型的请求。
这里主要讨论一下async参数,XMLHttpRequest对象如果要用于AJAX的话,其open()方法的async参数必须设置为true。那如果参数设置为false会有什么样的后果呢?同步请求的后果是:JavaScript会等到服务器响应就绪才继续执行。如果是比较大型的请求或者服务器处于繁忙状态,应用程序会挂起或停止。简单点说就是页面会一直卡到响应内容回来才继续运行。
在发送GET请求的时候,可能得到缓存的信息(IE中),导致我们发送的异步请求不能正确的返回我们想要的最新的数据。
方法一:在url中添加一个唯一的ID:(随机数)
xhr.open("GET","demo.asp?t=" + Math.random(),true);
xhr.send();
这种方式可以避免拿到缓存中的旧消息,但它的每次请求仍然会被浏览器缓存起来,占用浏览器资源。
方法二:用setRequestHeader(header,value)方法向请求添加HTTP头。(关于setRequestHeader在后面讨论)
xhr.open("GET","demo.asp",true);
xhr.setRequestHeader("If-Modified-Since","0"); //设置浏览器不使用缓存
xhr.send();
GET中的url可以拼接字符串从而达到传参,而传送数据一般用POST。
如果我们用POST方法向服务器发送数据,应该这样设置http头。
xhr.open("POST","postdemo.asp",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //否则数据无法被正常接收
xhr.send("name=amie"); //send里写要发送的数据
第三步:服务器响应
XMLHttpRequest对象的responseText和responseXML属性分别获得字符串形式的响应数据和XML形式的响应数据
可以在控制台里输出响应
console.log(xhr.responseText);
还有三个关于响应状态的属性也经常用到:
- readyState:存有XMLHttpRequest的状态。XHR对象会经历5种不同的状态
- 0:请求未初始化(new完后);
- 1:服务器连接已建立(对象已创建并初始化,尚未调用send方法);
- 2:请求已接收;
- 3:请求处理中;
- 4:请求已完成,响应就绪;
- status:(HTTP状态码很多,请自行了解,举例常见的)
- 200:请求成功
- 404:未找到页面
- onreadystatechange:存储函数(或函数名),每当readyState属性改变时,就会调用该函数。
因此上面那行代码可以改为:
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
};
关于setRequestHeader
在HTTP协议里,客户端向服务器请求某个网页的时候,需要发送一个HTTP协议的头文件,而XMLHttp就是通过HTTP协议去的网站上的文件数据的,所以也要发送HTTP头给服务器。
发送请求时会默认发一个头文件,如果我们需要修改或添加参数,就需要用到setRequestHeader方法。
Ps:
1.响应头包含了许多信息,有兴趣的小伙伴可以去了解一下。(HTTP涉及了许多计算机网络的知识)。
2.查看http请求头可以到开发者工具里的Network里查看。
(写在结尾:前端新人一枚~欢迎大家指出错误,谢谢阅览~)
最新文章
- python类的实例方法\静态方法\类方法区别解析(附代码)
- js将多个方法添加到window对象上的多种方法
- 使用 nvm 管理不同版本的 node 与 npm
- HTML中图片添加
- Chrome DevTools的15个使用技巧【转载】
- WebRTC for UWP
- 第十二届浙江省大学生程序设计大赛-Beauty of Array 分类: 比赛 2015-06-26 14:27 12人阅读 评论(0) 收藏
- ubuntu系统安装jdk
- QVW中实现日期区间的选择功能!
- java.lang.RuntimeException: Method called after release()
- rebar
- 初写Python
- Customer segmentation – LifeCycle Grids with R(转)
- Centos 7.3 安装mysql5.7.19 各种调试就不多说了
- web自动化测试从入门到持续集成(selenium webdriver)
- Hexo server报错TypeError: Cannot read property 'utcOffset' of null解决方法
- java中接口和抽象类的异同点
- Python-查找两个文件中相同的ip地址
- C++单元测试gtest【搬砖】
- 【Java并发编程】19、DelayQueue源码分析