五步使用法——搞定XMLHttpRequest

一、什么是XMLHttpRequest

        XMLHttpRequest 对象是AJAX 的 Web 应用程序架构的核心。XMLHttpRequest 对象用于在后台与服务器交换数据。 

        当页面全部加载完毕后,客户端通过该对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据。 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest,它并不限于和 XML 文档一起使用:它可以接收任何形式的文本文档。

        XMLHttpRequest 对象是开发者的梦想,因为:
               在不重新加载页面的情况下更新网页
               在页面已加载后从服务器请求数据
               在页面已加载后从服务器接收数据
               在后台向服务器发送数据


二、如何使用——五步使用法

1、建立XMLHttpRequest对象

创建 XMLHttpRequest 对象的语法:

现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象
<strong><span style="font-size:18px;">xmlhttp=new XMLHttpRequest();</span></strong>

老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:

<strong><span style="font-size:18px;">xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");</span></strong>


不同浏览器中XMLHttpRequest对象建立的方法不同:
IE7,IE8,FireFox,Mozilla,Safari,Opera中直接new XMLHttprequest()
IE6,IE5.5,IE5则需要通过用某个正确的ActiveXObject控件的名称通过new ActiveXObject(控件名)的方式



2、注册回调对象

<span style="font-size:18px;"><strong>//注册回调方法
xmlhttp.onreadystatechange=callback;</strong></span>

        设置回调函数时,不要在函数名后面加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性。正确的方式应该是将回调函数的名字注册给这个属性

        实际上每次readyState的值发生变化的时候,回调函数都会被调用,但是一般我们只关心状态4。如果只关心正确的响应数据,只要在执行send方法之前设置回调函数即可。

3、使用open方法设置和服务器交互的基本信息

<strong><span style="font-size:18px;">xmlhttp.open("GET","Ajax?name=" + userName,true );
//true代表异步,false代表同步
xmlhttp.open("post", "Ajax", true);
//post方式交互所需要增加的代码
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");</span></strong>

使用GET方式,请求数据位于url链接中,后面的send方法的参数直接写null就可以
使用POST方式时,open方法后面需要先调用setRequestHeader方法,来设置ContentType的值,然后调用send方法,send的参数就是请求的数据

4、设置发送的数据,开始和服务器端交互

<span style="font-size:18px;"><strong>//设置向服务器端发送的数据,启动和服务器端的交互
xmlhttp.send(null); 
xmlhttp.send("name=" + userName);  //post需要填写提交的数据</strong></span>


5、在回调函数中判断交互是否结束,相应是否正确,并根据需要获取服务器端返回的数据,更新页面内容

<pre name="code" class="html"><span style="font-size:18px;"><strong>//判断和服务器端的交互是否完成,还要判断服务器端是否正确返回了数据
if(xmlhttp.readyState == 4){   //状态=4响应数据接收成功
if(xmlhttp.status==200){
//表示服务器的响应代码是200,正确的返回了数据
//纯文本数据的接受方法
var message=xmlhttp.responseText;
//XML数据对应的DOM对象的接受方法
//使用的前提是,服务器需要设置content-type为text/xml
//记忆向div标签中填充文本内容的方法
var div=document.getElementById("message");
div.innerHTML=message;
}
}
}</strong></span>




三、属性和方法

方法:


属性:





总结

        AJAX无非就是新思想(异步)旧技术(B/S)。而XMLHttpRequest就是AJAX的核心,负责进行异步数据检索,通过它,在不重载页面的情况与Web服务器交换数据,以达到更好的用户体验。

原文地址:https://www.cnblogs.com/chenxiaochan/p/7237619.html