XMLHttpRequest对象

XMLHttpRequest

一、XMLHttpRequest对象是AJAX的技术基础。

“异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程。这一技术的优点在于,它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器。与现代浏览器的通过存取浏览器DOM结构的编程代码 (JavaScript) 动态地改变被显示内容的支持相配合,AJAX让开发者在浏览器端更新被显示的HTML内容而不必刷新页面。”---------即:XMLHTTPRequest对象可以在不刷新整个页面的前提下,实现局部刷新网页,Ajax就是基于此原理而开发的。

二、 XMLHttpRequest对象的属性和事件

XMLHttpRequest对象暴露各种属性、方法和事件以便于脚本处理和控制HTTP请求与响应。下面,我们将对此展开详细的讨论。
readyState属性

当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态:一直等待直到请求被处理;然后,它才接收一个响应。这样以来,脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性,如表格1所示。

ReadyState取值 描述
0 描述一种"未初始化"状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化。
1 描述一种"发送"状态;此时,代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2 描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。
3 描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。
4 描述一种"已加载"状态;此时,响应已经被完全接收。

onreadystatechange事件

无论readyState值何时发生改变,XMLHttpRequest对象都会激发一个readystatechange事件。其中,onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变,该对象都将激活。

status属性

这个status属性描述了HTTP状态代码,而且其类型为short。而且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。

statusText属性

这个statusText属性描述了HTTP状态代码文本;并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

三、 XMLHttpRequest对象的方法

XMLHttpRequest对象提供了各种方法用于初始化和处理HTTP请求,下列将逐个展开详细讨论。

abort()方法

你可以使用这个abort()方法来暂停与一个XMLHttpRequest对象相联系的HTTP请求,从而把该对象复位到未初始化状态。

open()方法

你需要调用open(DOMString method,DOMString uri,boolean async,DOMString username,DOMString password)方法

初始化一个XMLHttpRequest对象。其中,method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET,POST,PUT,DELETE或HEAD)。为了把数据发送到服务器,应该使用POST方法;为了从服务器端检索数据,应该使用GET方法。另外,uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。借助于window.document.baseURI属性,该uri被解析为一个绝对的URI-换句话说,你可以使用相对的URI-它将使用与浏览器解析相对的URI一样的方式被解析。async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求,需要把这个参数设置为false。对于要求认证的服务器,你可以提供可选的用户名和口令参数。在调用open()方法后,XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外,它还复位请求头部。注意,如果你调用open()方法并且此时readyState为4,则XMLHttpRequest对象将复位这些值。

send()方法

在通过调用open()方法准备好一个请求之后,你需要把该请求发送到服务器。仅当readyState值为1时,你才可以调用send()方法;否则的话,XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true时,send()方法立即返回,从而允许其它客户端脚本处理继续。在调用send()方法后,XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应时,在接收消息体之前,如果存在任何消息体的话,XMLHttpRequest对象将把readyState设置为3(正在接收中)。当请求完成加载时,它把readyState设置为4(已加载)。对于一个HEAD类型的请求,它将在把readyState值设置为3后再立即把它设置为4。

send()方法使用一个可选的参数-该参数可以包含可变类型的数据。典型地,你使用它并通过POST方法把数据发送到服务器。另外,你可以显式地使用null参数调用send()方法,这与不用参数调用它一样。对于大多数其它的数据类型,在调用send()方法之前,应该使用setRequestHeader()方法(见后面的解释)先设置Content-Type头部。如果在send(data)方法中的data参数的类型为DOMString,那么,数据将被编码为UTF-8。如果数据是Document类型,那么将使用由data.xmlEncoding指定的编码串行化该数据。

setRequestHeader()方法

该setRequestHeader(DOMString header,DOMString value)方法用来设置请求的头部信息。当readyState值为1时,你可以在调用open()方法后调用这个方法;否则,你将得到一个异常。

getResponseHeader()方法

getResponseHeader(DOMString header,value)方法用于检索响应的头部值。仅当readyState值是3或4(换句话说,在响应头部可用以后)时,才可以调用这个方法;否则,该方法返回一个空字符串。

getAllResponseHeaders()方法

该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部(每一个头部占单独的一行)。如果readyState的值不是3或4,则该方法返回null。

四、 发送请求

在AJAX中,许多使用XMLHttpRequest的请求都是从一个HTML事件(例如一个调用JavaScript函数的按钮点击(onclick)或一个按键(onkeypress))中被初始化的。

<input type="button" value="异步调用" οnclick="XMLRq();" />

这里响应事件函数是XMLRq(),那XMLRq()的函数代码片段如下:

function XMLRq()
        {
            var xhr = null;
            if (window.ActiveXObject)
            //window.XMLHttpRequest对象支持的是除了其之外的浏览器都可以使用。
            {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                //alert("xmlrequest对象创建成功")
            }
            else if (window.XMLHttpRequest) //除了IE5与IE6以外的浏览器
            {
                xhr = new XMLHttpRequest();
                //alert("c");
            }
            if (xhr != null) {
                xhr.open("GET", "Ajax_response1.aspx", true);
                //设置boolean为true是因为,这里采用了异步调用的方式。
                xhr.onreadystatechange = setCallback;
                //这里设置的回调函数是setCallback(),所以当请求加载完成,即readystate值为4,并且响应成功,这里HTTP的status为200时,说明我们已经成功响应了该按钮事件,服务器已经回传了信息。
                xhr.send(null);

            }
            function setCallback()
            {
                if (xhr.readyState == 4)
                {
                    if (xhr.status == 200)
                    {
                        document.getElementById("getext").innerHTML = xhr.responseText;
                    }
                }
            }
        }

前端封装ajax/axios 原理

封装的ajax原生代码

    function tool(url ,callback){
        var xhr=new XMLHttpRequest()||new ActiveXObject('MICSOFT.XMLHTTP')
    // var url="http://192.168.2.137:7001/public/sina.js"
    xhr.open("GET",url,true)//设置发送请求的配置:用户用GET请求,url网址,true/false是否异步

    xhr.send();//发送网络请求

    // xhr.readyState;//1,2,3,4--监听后端的四个阶段,4:后端已经把数据包发送给前端了
    
    //xhr.status---状态码==200  是想要的数据内容
    //xhr.status---状态码==404  不想要的数据


    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            // var re=xhr.responseText;//获取数据
            // console.log(re)

            callback(xhr.responseText)
        }
    }

    }

    tool("http://localhost:7001/public/sina.js",function(data){
        console.log(data)
    })

基于Promise封装axios

function axios(obj) {
				return new Promise(function(res,rej){
					var xhr=new XMLHttpRequest();
					xhr.open(obj.method,obj.url);
					xhr.send(JSON.stringify(obj.data));
					xhr.onreadystatechange=function(data){
						if(xhr.readyState==4){
							res(data.target.response)
						}
					}
				})
			}
			axios({
				method:'post',
				url: 'http://localhost:8080/getUserInfo',
				data:{
					username:ev.target.innerHTML
				}
			}).then(function(response){
			
				ev.target.innerHTML+=":"+response
			})
展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值