【Ajax 2】封装Ajax的核心对象:XMLHttpRequest对象
来源:互联网 发布:地籍数据标准 编辑:程序博客网 时间:2024/06/08 01:31
导读:AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。那么,XMLHttpRequest对象是怎么创建和封装的呢?
一、简介
1.1,用途
该对象向服务器发送请求,并接收服务器响应,实现与服务器的异步通信
1.2,发展
在1999年上半年,微软利用ActiveX对象实现了XMLHTTP对象,随后,在2000年,Mozilla实现了相同接口的原生对象XMLHttpRequest对象,Opera,Safari也相继实现。
二、XMLHttpRequest的基本知识
2.1,属性
2.2,状态
2.3,status和statueText
2.4,方法
三、封装XMLHttpRequest对象
3.1,步骤
总结说来,对于XMLHttpRequest对象的封装,有五步:
1,创建一个XMLHttpRequest对象
2,调用对象的Open()方法设置和服务器端交互的基本信息
3,使用对象的onReadystatechange属性注册回调函数,在函数中判断交互是否结束,响应是否正确,并根据需要获取服务器返回的数据,更新页面内容
4,通过对象的setRequestHeader()方法设置相应的请求头(如果交互方式为:POST)
5,调用对象的send()方法发起请求
3.2,封装
<span style="font-family:KaiTi_GB2312;font-size:18px;">/*封装XMLHTTPRequest对象*/var XMLHTTPRequest=function(userName) { //1,创建XMLHTTPRequest对象 var myXMLHttpRequest; if (window.XMLHttpRequest) { //IE7,IE8,Firefox,Mozillar,Safari,Opera myXMLHttpRequest = new XMLHttpRequest(); //服务器发送回来的头部,不是text/xml,进行忽略 if (myXMLHttpRequest.overrideMineType) { myXMLHttpRequest.overrideMineType("text/xml"); } }//IE5,IE6,IE5.5 else if (window.ActiveXObject) { //创建一个数组,包含所有能用于创建XMLHTTPRequest对象的ActiveXobject控件名称 var activeName = ["XSXML2.XMLHTTP", "Microsoft.XMLHTTP", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.6.0"]; for (var i = 0; i < activeName.length; i++) { //没有可用的控件,捕捉异常 try { myXMLHttpRequest = new ActiveXObject(activeName[i]); break;//创建成功,终止循环 } catch (e) { } } } //对象创建失败 if (myXMLHttpRequest == undefined || myXMLHttpRequest == null) { alert("当前浏览器不支持创建XMLHTTPRequest对象,请更换浏览器"); return; } /* //GET方式交互 //2,设置和服务器端交互的相应参数,打开资源 myXMLHttpRequest.open("GET", "AJAX?name=" + userName, true); //3,注册回调函数 myXMLHttpRequest.onreadystatechange = callback; //4,设置向服务器端发送的数据,启动和服务器端的交互 myXMLHttpRequest.send(null); */ //POST方式交互 //2,设置和服务器端交互的相应参数,打开资源 myXMLHttpRequest.open("POST", "AJAX",true); //3,注册回调函数 myXMLHttpRequest.onreadystatechange = callback; //4,设置请求头(和GET方式的区别) myXMLHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4,设置向服务器端发送的数据,启动和服务器端的交互 myXMLHttpRequest.send("name="+userName); //3.1,实现回调函数 function callback() { //判断和服务器端的交互是否完成,然后判断服务器端是否正确返回了数据 if (myXMLHttpRequest.readyState == 4) {//和服务器端的交互已经完成 if (myXMLHttpRequest.status == 200) {//服务器的响应代码为200,正确的返回了数据 //纯文本的接收方法,使用前提:服务器端设置content-type为text/xml var message = myXMLHttpRequest.responseText; //向div标签中填充文本内容 var div = document.getElementById("message"); div.innerHTML = message; } } }}</span>
四、总结
Ajax还有很多需要探索和学习的,比如说例子的实现,我没有实现它,肯定是对于这个知识的掌握还不够,或者说别的关于BS的知识学习的还不够,不能放弃,遇到一个问题就是我的一次机会。还有包括Ajax的封装,还有其跨域问题、缓存问题等,都需要解决。
1 0
- 【Ajax 2】封装Ajax的核心对象:XMLHttpRequest对象
- AJAX的核心XMLHttpRequest对象
- Ajax的核心对象XMLHttpRequest
- AJAX的核心对象XMLHttpRequest
- Ajax核心对象-- XMLHttpRequest
- AJAX核心XMLHttpRequest对象
- AJAX核心对象XMLHttpRequest
- Ajax核心--XMLHttpRequest对象
- AJAX核心对象XMLHttpRequest
- AJAX核心XMLHTTPRequest对象
- AJAX核心XMLHTTPRequest对象
- Ajax核心XMLHttpRequest对象
- Ajax核心对象 XMLHTTPRequest
- 为何XMLHttpRequest对象是AJAX的核心
- Ajax的核心——XMLHttpRequest 对象
- XMLHttpRequest对象是AJAX的核心
- ajax的核心javascript对象XMLHttpRequest创建
- Ajax学习系列2- 核心对象XMLHttpRequest
- HttpURLConnection获取JSON处理
- 简明 Vim 练级攻略
- Android成长(一)——环境搭建
- SHA1算法
- UWP开发之StreamSocket聊天室(五)
- 【Ajax 2】封装Ajax的核心对象:XMLHttpRequest对象
- DPDK环境搭建和测试
- 【Android】解决频繁的线程请求&绘制View引发的异常问题
- Android开发性能优化大总结
- 【操作系统】进程之间的通信机制
- WebService
- struts1与struts2的区别
- windows下安装octave工具箱
- 只会做水题-