XMLHttpRequest

Posted 2023-04-19

参考技术A 1 .尽管名字里面有XML,Http，但是实际上是可以使用多种协议的file,ftp,发送任何形式的数据，包括字符串和二进制
2 .ajax只会向同源网址，发出http请求，跨域请求是会报错的
3 .

1 .返回一个整数，表示实例对象的当前状态，该属性只读。
2 .0 表示XMLHttprequest实例已经生成，但是实例的open方法没有被调用
3 .1 表示open方法已经调用，可以使用实例的setRequestHeader()方法设置HTTP请求头信息。此时send方法还没调用
4 .2 表示实例的send方法已经调用，并且服务器返回的头信息和状态码已经收到
5 .3 表示正在接收服务器传来的数据体body部分。这时，如果实例的responseType属性等于text或者空字符串，responseText属性就会包含已经收到的部分信息
6 . 4 表示服务器返回的数据已经完全接收，或本次接收已经失败
7 .通信过程中，每当实例对象发生状态变化，他的readyState属性就会改变，这个值每一次变化，都会触发readyStateChange事件

1 .指向一个监听函数，readystatechange事件发生时，就会执行这个属性
2 .在这个里面判断当前的状态，取得返回值

1 .表示服务器返回的数据体，可能是任意的数据类型，比如字符串，对象，二进制对象等，具体类型由XMLHttpRequest.responseType属性决定，该属性只读
2 .如果本次请求没有成功或者数据不完整，该属性等于null.但是，如果responseType属性等于text或空字符串，在请求没有结束之前，response属性包含服务器已经返回的部分数据
3 .

1 .表示服务器返回数据的类型
2 .这个属性是可写的，在open之后，send之前，设置这个值，告诉服务器返回指定类型的数据。如果responseType设为空字符串，就等同于默认值text
3 .“”表示服务器返回文本数据
4 .“arraybuffer”表示服务器返回二进制数组
5 ."blob"：表示返回二进制对象。图片文件
6 ."document"返回一个文档对象
7 ."json"json对象，浏览器自动对返回数据调用JSON.parse()方法
8 ."text"字符串

1 .属性返回从服务器接收的字符串，该属性为只读。只有HTTP请求完成以后，该属性才会包含完整的数据
2 .

1 .返回从服务器接收到的html或xml文档对象，该属性为只读。如果本次请求没有成功，或者受到的数据不能解析为xml或html,该属性等于null
2 .该属性生效的前提是HTTP回应的Content-type头信息等于text/xml或者application/xml。在发送前XMLHttprequest.responseType属性要设为document
3 .如果HTTP回应的Content-type头信息不等于text/xml和application/xml.但是想要从responseXML拿到数据需要手动调用XMLHttpRequest.overideMineType()方法，强制进行xml解析

1 .表示发送数据的服务器的网址
2 .这个属性的值与open方法指定的请求网址不一定相同，如果服务器端发生了跳转，这个属性返回最后实际返回数据的网址。另外，如果原始的url包括锚点，该属性会把锚点剥离

1 .XMLHttpRequest.status属性返回一个整数，表示服务器端回应的HTTP状态码。一般来说，通信成功，这个状态码返回的是200；
2 .只有2XX,304的状态码，服务器返回的数据是正确的
3 .statusText属性返回一个字符串，表示服务器发送的状态提示。该属性包含整个状态信息，比如ok，not found.在请求发送之前，该属性的值是空字符串，如果服务器没有返回状态提醒，该属性的值默认为ok,该属性为只读属性
4 .

1 .返回一个整数，表示多少毫秒之后，如果请求任然没有得到结果，就自动终止。如果该属性等于0，就表示没有时间限制
2 .xhr.ontimeout 用于设置一个监听函数，如果发生timeout事件，就会执行这个监听函数

1 .xhr.onloadstart
2 .xhr.onprogress(loaded,total,lengthComputeable)
3 .xhr.onabort
4 .xhr.onerror
5 .xhr.onload
6 .xhr.ontimeout
7 .xhr.onloadend:请求完成，不论失败或成功的监听函数

1 .该属性是一个布尔值，表示跨域请求时，用户信息cookie,http头信息是否会包含在请求之中，默认为false,即跨域请求发送时，不会发送example.com设置在本机上的cookie
2 .如果需要跨域请求发送cookie,需要withCredentials属性设为true.同源请求不需要设置这个属性
3 .为了这个属性生效，服务器必须显示返回Access-control-allow-credentials:true这个头信息
4 .脚本总是遵守同源策略，无法从document.cookie或者http回应的头信息之中，读取跨域的cookie，withCredentials属性不影响这一点
5 .

1 .open()用于指定http请求的参数，或者说初始化XMLHttpRequest实例对象

2 .send()方法用于发出实际http请求。参数可选

3 .setRequestHeader()

1 .用来指定MIME类型，覆盖服务器返回的真正的MIME类型，从而让服务器进行不一样的处理
2 .假设服务器返回的数据类型是text/xml，当浏览器解析不成功报错的时候，这时拿不到数据，为了拿到原始的数据，我们可以把MIME类型改成text/plain。这样浏览器就不会自动解析了，从而可以拿到原始文本了
3 .该方法必须在send方法之前调用
4 .修改服务器返回的数据类型，并不是正常情况下应该采取的方法。如果希望服务器返回指定的数据类型，可以使用responseType属性告诉服务器。只有在服务器无法返回某种数据类型时，才使用overrideMimeType()方法
5 .

1 .返回HTTP头信息指定字符安的值，如果还没有收到服务器返回或者指定字段不存在，返回null
2 .如果有多个字段同名，他们的只会被连接成为一个字符串，每个字段之间使用逗号+空格分割
3 .

1 .返回一个字符串，表示服务器发来的所有http头信息，格式为字符串，每个头信息之间使用换行分隔

1 .用来终止已经发出的http请求，调用这个方法以后，readyState属性变为4，status属性变为0
2 .

1 .readyStateChange，-onReadyStateChange事件
2 .progress

1 .想在用户卸载网页的时候，向服务器发送一些数据，常见的是pagehide事件回调里面，使用ajax发送数据，但是这样做的后果就是可能会发送不出去，因为ajax是异步发送数据，很可能在他即将发送的时候，页面就已经卸载了，从而导致异步取消或者发送失败
2 .上面那个方法可以保证是异步发出请求，但是请求和当前页面脱钩，作为浏览器任务，因为可以保证把数据发出去，不拖延卸载流程
3 .方法使用

XMLHttpRequest 对象

XMLHttpRequest 对象用于在后台与服务器交换数据。

什么是 XMLHttpRequest 对象？

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想，因为您能够：

• 在不重新加载页面的情况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

 

创建 XMLHttpRequest 对象

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。

通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

1 xmlhttp=new XMLHttpRequest();

 

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：  

1 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

XMLHttpRequest对象的属性：

 1 关于异步与同步
 2 异步传输是面向字符的传输，它的单位是字符；
 3 同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。

 4 XMLHttpRequest对象的属性。
 5   　　 onreadystatechange  每次状态改变所触发事件的事件处理程序。
 6   　　 responseText     从服务器进程返回数据的字符串形式。
 7   　　 responseXML    从服务器进程返回的DOM兼容的文档数据对象。
 8   　　 status           从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
 9   　　 statusText       伴随状态码的字符串信息
10   　　 readyState       对象状态值
11 　　　　 　　0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
12 　　　　 　　1 (初始化) 对象已建立，尚未调用send方法
13 　　　   　　2 (发送数据) send方法已调用，但是当前的状态及http头未知
14 　　　　 　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
15 　　　　 　　4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
16 　　　　　　　　Method ：Post   发送数据方式 url send（特属于post方式）
17         　　　　　　　　Get 　　发送数据方式  url

 

配置实例：

 1 !DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="myTime"></div>
 9 <input id="Button1" type="button" value="Get Time" onclick="creatReq();" >
10 
11 <script type="text/javascript" language="javascript">
12     var req; //定义变量，用来创建xmlhttprequest对象
13     function creatReq()  //创建xmlhttprequest,ajax开始
14     {
15         var url = "ajaxServer.aspx"; //要请求的服务端地址
16         if(window.XMLHttpRequest) //非IE浏览器及IE7(7.0及以上版本),用xmlhttprequest对象创建
17         {
18             req = new XMLHttpRequest();
19         }
20         else if(window.ActiveXObject) //IE(6.0及以下版本)浏览器用activexobject对象创建，如果用户浏览器禁用了ActiveX,可能会失败。
21         {
22             req = new ActiveXObject("Microsoft.XMLHttp");
23         }
24         if(req) //成功创建xmlhttprequest
25         {
26             req.open("GET",url, true); //与服务端建立连接(请求方式post或get，地址,true表示异步)
27             req.onreadystatechange = callback;  //指定回调函数
28             req.send(null); //发送请求
29         }
30     }
31     function callback()  //回调函数，对服务端响应处理，监视response状态
32     {
33         if(req.readyState == 4) //请求状态为4表示成功
34         {
35             if(req.status == 200)  //http状态200表示OK
36             {
37                 Display();  //所有状态成功，执行此函数，显示数据
38             }
39             else // http返回状态失败
40             {
41                 alert("服务端返回状态" + req.statusText);
42             }
43         }
44         else //请求状态还没有成功，页面等待
45         {
46             document.getElementById("myTime").innerHTML = "数据加载中...";
47         }
48     }
49 
50     function Display()  //接受服务器端返回的数据，对其进行显示
51     {
52         document.getElementById("MyTime").innerHTML = req.responseText;
53     }
54 </script>
55 </body>
56 </html>

View Code