【速成之路】网页编程必会的Ajax——XMLHttpRequest对象

2401_84093860

于 2024-05-16 02:25:37 发布

阅读量676

点赞数 16

分类专栏：程序员文章标签： ajax okhttp 前端

本文链接：https://blog.csdn.net/2401_84093860/article/details/138932721

版权

程序员专栏收录该内容

266 篇文章 0 订阅

订阅专栏

通过 XMLHttpRequest 对象，Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新页面，也不用每次都将数据处理的工作交给服务器来完成，这样既减轻了服务器负担，又加快了响应速度，缩短了用户的等待时间。

🎆初始化XMLHttpRequest对象

====================================================================================

所有现代浏览器(例如IE、Firefox、Chrome、Safari和Opera)都有内置的 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法如下所示：


xmlhttp=new  XMLHttpRequest ();

旧版本的Internet Explorer中，Ajax使用ActiveX对象进行创建，语法格式如下所示：


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

为了提高程序的兼容性，可以创建一个跨浏览器的 XMLHttpRequest 对象。创建一个跨浏览器的 XMLHttpRequest 对象只需要判断一下不同浏览器，如果浏览器提供了 XMLHttpRequest 类，则直接创建一个实例，否则实例化一个ActiveX对象。具体代码如下：


if(window.XMLHttpRequest ){

//IE7+、Firefox、Chrome、Opera、Safari浏览器执行代码

xmlhttp=new  XMLHttpRequest ();

}

else

{

//IE6、IE5浏览器执行代码

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

}

🎆XMLHttpRequest对象的常用属性和事件

=========================================================================================

在这里插入图片描述

1.readyState属性

当一个 XMLHttpRequest 对象被创立后，readyState属性表示当前对象处于什么状态，可以通过对该属性的访问来判断此次请求的状态，然后做出相应的操作。具体的属性值表示的含义如下：

属性值为0：未初始化状态。此时已经创建了一个 XMLHttpRequest 对象，但是还没有初始化。
属性值为1：准备发送状态。此时已经调用了 XMLHttpRequest 对象的open()方法，并且 XMLHttpRequest 对象已经准备好将一个请求发送到服务器。
属性值为2：已发送状态。此时已经通过send方法把一个请求发送到服务器，等待响应。
属性值为3：正在接收状态。此时已经接收到HTTP响应的头部信息，但是消息体部分还没有完全接收到。
属性值为4：完成响应状态。此时已经完成了 HttpResponse 响应的接收。

2.response Text属性

responseText 属性包含客户端接收到的HTTP响应的文本内容。

readyState 属性为0、1或2时， responseText 属性包含一个空字符串。
readyState 属性值为3时，响应中包含客户端还没完成的响应信息。
readyState 属性值为4时， responseText 属性包含完整的响应信息。

3.responseXML属性

只有当 readyState 属性为4时，并且响应头部的Content-Type的MIME类型被指定为XML（text/xml或者 application/xml）时，该属性才会有值并且被解析成一个XML文档，否则该属性为null；如果该回传的XML文档结构未完成响应回传，该属性也会为null。

responseXML 属性用来描述被XMLHttpRequest 解析后的XML文档的属性。

4.status属性

status属性描述了HTTP状态的代码。注意，仅当 readyState 属性值为3(正在接收中)或者4(已加载)时，才能对此属性进行访问。如果在 readyState 属性值小于3时试图去读取status属性值，将会引发一个异常。

5.statusText属性

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

6.onreadystatechange事件

当ready State属性发生改变时， XMLHttpRequest 对象调用 onreadystate change事件。在处理该响应之前，事件处理器应该首先检查 readyState 的值和HTTP状态。当请求完成加载( readyState 值为4)并且响应已经完成(HTTP状态为“OK”)时，就可以调用一个 JavaScript 函数来处理该响应内容。下面是进行 onreadystate change事件调用的处理语句。


xmlhttp.onreadystatechange =function(){

//判断和服务器端的交互是否完成，判断服务器端是否正确返回了数据

   if(xmlhttp.readyState ==4){   //ready State=4表示交互完成

     if(xmlhttp.status==200){   //status=200表示正确返回了数据

        var message=xmlhttp.responseText ;// responseText 是从服务器返回的数据

        //此处是对从服务器端返回数据的处理语句

        }

     }

 }

🎆XMLHttpRequest对象的常用方法

======================================================================================

1.open（）方法

open()方法用于设置异步请求目标的URL、请求方法以及其他参数信息，其语法如下所示：


open("method","URL"[,asyncFlag[,"userName"[,"password"]]])

open()方法的参数说明见下表所示。

open（）方法的参数

| 参数 | 说明 |

| :-: | :-- |

| method | 用于指定请求类型，一般为GET或POST |

| URL | 用于指定请求地址，可以使用绝对地址或者相对地址，并且可以传递查询字符串 |

| asyncFlag | 可选参数，用于指定请求方式，异步请求为true(默认值)，同步请求为false |

| userName | 可选参数，用于指定请求用户名，没有时可省略 |

| password | 可选参数，用于指定请求密码，没有时可省略 |

例如，设置请求的服务器端程序名为 ajaxServer.jsp，请求方法为GET，请求方式为异步，语句代码如下所示：

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！