原生 XMLHttpRequest
一、什么是XMLHttpRequest?
XHR英文全名XmlHttpRequest,中文可以解释为可扩展超文本传输请求。Xml可扩展标记语言,Http超文本传输协议,Request请求。XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页。当页面全部加载完毕后,客户端通过该对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据。 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest,它并不限于和 XML 文档一起使用:它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能,XMLHttpRequest 对象用于在后台与服务器交换数据,所有现代的浏览器都支持 XMLHttpRequest 对象。
二、XMLHttpRequest能干什么?
1、在不重新加载页面的情况下更新网页
2、在页面已加载后从服务器请求数据
3、在页面已加载后从服务器接收数据
4、在后台向服务器发送数据
三、XMLHttpRequest的open()和send()方法
1、open(method,url,async)方法
method:请求类型(GET或POST)
url:文件在服务器上的位置
async:ture(异步)或 false(同步)
2、send(string)方法
string:仅用于POST请求
四、XMLHttpRequest 对象的重要属性:
(1)readyState存有XMLHttpRequest 的状态,0~4。
0——请求未初始化
1——服务器连接已经建立
2——请求已接受
3——请求处理中
4——请求已完成,且响应已就绪。
(2)status,HTTP的特定状态码:
100-199:信息性的标示用户应该采取的其他动作。
200-299:表示请求成功。
300-399:用于那些已经移走的文件,常常包括Location报头,指出新的地址。
400-499:表明客户引发的错误。
500-599:由服务器引发的错误。
五、原生XMLHttpRequest代码实现
<script> //创建XMLHttpRequest对象 var xhr; if(window.XMLHttpRequest){ //IE7+,Firefox,Chrome,Opera,Safari 执行 xhr = new XMLHttpRequest(); }else{ // IE6,IE5 执行 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } // GET 请求 xhr.open("GET","url",true); xhr.send(); // POST 请求 xhr.open("POST","url",true); xhr.send(); //如果需要传参,则需要使用setRequestHeader() 来添加HTTP 头部 xhr.open("POST","url",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send("name=tome&age=24"); // 通过 onreadystatechange 事件来监听状态变化,并获取服务器响应 xhr.onreadystatechange = function(){ //请求成功时 if(xhr.readyState == 4 && xhr.status == 200){ alert(xhr.responseText); } } </script>
本文来自博客园,作者:可可西里(lemon),转载请注明原文链接:https://www.cnblogs.com/ldl326308/p/9464365.html