封装自定义AJAX请求函数

在网页中经常需要利用AJAX向后台请求数据，需要创建XMLHttpRequest对象。在请求个数不多时，可以单独写请求函数。可是如果请求数量多，就会有大量的重复性代码。为了减少冗余，就可以对请求函数进行封装，将一系列的请求操作逻辑封装好，我们只需调用这个函数，传入参数变量即可。

---

一、源代码

    
    



    

        
使用 AJAX 修改该文本内容
    
    修改内容

二、代码说明

首先创建div标签，给一个id属性，值为content。div里创建h2标签，内容为：“使用 AJAX 修改该文本内容”。再创建一个button标签，给onclick属性绑定一个函数：myfun()。myfun()是点击按钮时调用的函数，myfun函数中再调用封装的ajax请求函数。

---

封装函数解释

参数说明

封装的ajax函数有6个参数：responseType、event、method、url、isAsync、sendString

---

	说明	传入类型/值	默认值
responseType	决定使用哪种返回数据类型	字符串/("xml"、"text")	无
event	对返回数据进行处理的函数	函数	无
method	ajax的请求类型	字符串/("GET"、"POST")	无
url	被请求文件在服务器上的地址（位置）	字符串	无
isAsync	使用异步请求还是同步请求，默认异步	布尔值/(true、false)	true
sendString	使用POST请求时要发送的字符串	字符串	空字符串

函数体说明

除了IE5、IE6浏览器不支持XMLHttpRequest对象外，其他浏览器都支持。为了兼容性，需要判断window对象是否有XMLHttpRequest对象，如果有执行：xmlhttp = new XMLHttpRequest()，如果没有执行：xmlhttp = new ActiveXobject("Micrsoft.XMLHTTP")。

---

onreadystateChange：readystate（就绪状态）发生改变时触发的事件。

readystate存储XMLHttpRequest的状态信息，readystate一共变化四次：0-1,1-2,2-3,3-4，有以下值：

0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4: 请求已完成，且响应已就绪

status是状态码，有两个值：

200："OK"

404：未找到页面

当readystate值为4，status值为200时就可以获取到请求数据。

通过判断responseType是"xml"还是"text"决定使用xmlhttp.responseXML还是xmlhttp.responseText。然后将请求到的数据传入event函数，在event函数内，将返回的数据赋值给id为"content"的元素的内容。

XMLHttpRequest的函数open规定请求的类型，地址，是否异步。

send函数可以将自定义字符串发送到服务器，仅用于"POST"请求。

在mufun()函数中定义了ajax函数需要的参数，然后调用ajax函数，将参数传入。

三、运行效果

说明：ajax_info.txt与index.html在同目录下，txt文件内只有一句话：“这是通过AJAX请求的数据”

点击“修改内容”按钮，效果如下：

建议使用VSCode，安装插件Live Server，右键选择如下

使用本地服务器打开页面，直接在浏览器打开是无法请求到数据的。