AJAX总结(三),XMLHttpRequest对象
前言博主博客:Stillwater的博客 http://hiztx.top/2017/01/13/a... ??这篇文章介绍了XMLHttpRequest对象相关知识。包括:XMLHttpRequest对象的本质,Http请求和Http响应。 一、XMLHttpRequest对象的本质??为了更好的理解XMLHttpRequest对象的本质,我们将其分成三部分来理解。顾名思义,
什么是XML???XML设计用来传送及携带数据信息,不用来表现或展示数据,HTML语言则用来表现数据,所以XML用途的焦点是它说明数据是什么,以及携带数据信息。XML被广泛用来作为跨平台之间交互数据的形式,主要针对数据的内容。 <?xml version="1.0"?> <小纸条> <收件人>大元</收件人> <發件人>小張</發件人> <主題>問候</主題> <具體內容>早啊,飯吃了沒? </具體內容> </小纸条> 什么是Http???超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是互联网上应用最为广泛的一种网络协议。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。本文后面会详细介绍AJAX技术相关的Http知识。 什么是Request???Request翻译为请求,这个大家都知道。但是很多人会误解,只有用浏览器(Chrome,Safari,IE),我们才能向服务器发送Http请求。这是不对的。我们换个角度,从服务器的角度思考。当服务器收到全世界各地发来的Http请求的时候,它并不知道屏幕的对面是谁,有可能是正在网上冲浪的你,也有可能仅仅是一只网络爬虫,甚至有可能就是我们编写的AJAX程序中的XMLHttpRequest对象而已。 ??回到我们的问题,XMLHttpRequest对象的本质是什么?
??所以要想深入理解XMLHttpRequest对象,那就要学习一些Http的知识了。请往下看。 二、Http请求一个Http请求由4部分组成:
创建XMLHttpRequest对象之后,发起Http请求的下一步是调用XMLHttpRequest对象的open()方法去指定这个请求的两个必要部分:请求方法和URL。 request.open("GET",/home/index.html);//请求方法:GET,URL:/home/index.html open()的第一个参数指定Http请求方法,通常用大写字母来匹配Http协议。open()的第二个参数是URL,是请求的主要内容。如果有请求头的话,请求进程的下一个步骤是设置它。例如,POST请求需要“Content-type”。 request.setRequestHeader("Content-type","text/plain"); 使用XMLHttpRequest发起Http请求的最后一步是指定请求主体(可选)并向服务器发送它。使用send()方法像如下这样做: request.send(null); GET请求没有主体,所以应该传递null或省略这个参数。
例:用POST方法发送纯文本给服务器 function postMessage(msg){ var request = new XMLHttpRequest(); //创建新请求 request.open("POST","/log.php"); //用POST向服务器端发送脚本 request.setRequestHeader("Content-type","text/plain;charset=UTF-8"); //请求头设置 request.send(msg); //把msg作为请求主体发送 } //由于没有指定响应函数,所以我们将忽略任何响应 三、Http响应服务器返回的Http响应包含3部分:
我们可以通过XMLHttpRequest对象的属性和方法来获取上述响应包括的三个部分。
表:XMLHttpRequest的readyState值
为了监听readystatechange事件,请把事件处理函数设置为XMLHttpRequest对象的onreadystatechange属性。 例:获取Http响应的onreadystatechange //发出一个Http GET请求以获得指定URL的内容 //当响应成功到达,验证它是否是纯文本 //如果是,把它传递给指定回调函数 function getText(url,callback){ var request = new XMLHttpRequest(); //创建新请求 request.open("GET",url); //指定待获取的URL request.onreadystatechange = funciton(){ //定义事件处理函数 if (request.readyState===4&&request.status===200{ //如果请求完成,则它是成功的 var type = request.getResponseHeader("Content-Type"); if(type.match(/^text/)) //确保响应是文本 callback(request.responseText); //把它传递给回调函数 } }; request.send(null) //立即发送请求 } 四、总结本文介绍了XMLHttpRequest对象的本质是一个可以发送Http请求,处理Http响应,与服务器之间进行异步交换数据的对象,其核心是Http。然后介绍了Http请求和响应包括的具体内容。Http请求包括:方法,URL,请求头,请求主体。Http响应包:状态码,响应头和响应主体。
[1]维基百科 [2]JavaScript权威指南 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |