原生JS封装Ajax插件(同域、jsonp跨域)

深入原生JS封装的Ajax插件：跨域请求实战指南

你是否曾对原生JS的掌握程度产生过疑惑？今天，我将带你一起一个有趣且实用的主题——原生JS封装的Ajax插件。你将了解到在不同域之间如何互相请求资源，实现跨域交互。让我们一起深入吧！

一、核心：XMLHttpRequest对象

Ajax技术的核心在于XMLHttpRequest对象（简称XHR）。为了在各种浏览器中创建XHR对象，我们需要考虑兼容性问题。在IE5中，XHR对象是通过MSXML库中的ActiveX对象实现的。在创建XHR对象时，我们需要采用兼容性写法。以下是一个创建XHR对象的示例代码片段：

二、XHR的关键方法属性

了解XHR的方法属性是掌握Ajax的关键。主要方法包括open()、send()和abort()，而关键属性有responseText、status、statusText和readyState。这些属性和方法为我们提供了与服务器交互的基础。下面简要介绍它们的功能：

open()：接受请求类型、URL和是否异步发送的布尔值作为参数。

send()：发送请求主体数据。

abort()：在接收到响应之前取消异步请求。

responseText：返回的响应文本。

status：HTTP响应状态。

statusText：HTTP状态说明。

readyState：表示请求/响应过程的当前阶段，取值从0到4。

特别需要注意的是，onreadystatechange事件处理函数必须在调用open()方法之前指定，以确保跨浏览器兼容性。

三、同域发送请求：以GET为例

在同域内发送请求是Ajax最常见的应用场景之一。以GET请求为例，它是最常见的请求类型，常用于查询某些信息。通过封装好的Ajax插件，我们可以方便地发起GET请求，获取服务器返回的数据。在实际项目中，你可以根据需求传递数据、指定回调函数等。

通过向URL末尾追加查询字符串参数，我们可以将信息发送给服务器。在采用GET方法进行请求时，我们需要注意，查询字符串中的每个参数名称和值都必须经过encodeURIComponent()函数的编码处理，同时所有名-值对之间必须使用'&'符号进行分割。

当我们的请求类型为GET时，我们会遍历配置数据中的每一项，并使用addURLParam函数将参数添加到URL中。随后，我们设置请求状态改变的回调函数，打开XMLHttpRequest连接，并发送请求。

POST请求则常用于向服务器发送需要保存的数据，这些数据会被作为请求的主体进行提交，类似于模拟表单提交。在POST请求中，我们将Content-Type头部信息设置为application/x--form-urlencoded; charset=UTF-8。为了实现这一目的，我们有一个序列化函数，它将数据转换为符合这一格式的字符串。

当我们的请求类型为POST时，我们会为请求添加事件监听器，并设置相关的请求头信息。如果提供了contentType参数，我们会将其设置为请求的Content-Type。然后，我们打开XMLHttpRequest连接，并发送经过序列化的数据。

关于这两种请求方法的一些区别，首先是GET请求将参数数据添加到URL中，因此它们在URL中是可见的，而POST请求则将数据作为请求主体发送，因此无法从URL中看到。由于URL可能会被记录在浏览器历史或服务器日志中，因此GET请求相对于POST请求来说不够安全。GET请求的数据量通常较小，不能超过2kb，而POST请求的数据量则没有这样的限制。服务器处理这两种请求的方法也有所不同，GET请求通常通过Request.QueryString来获取变量值，而POST请求则通过Request.Form来获取。

还有一种跨域发送请求的方法叫做JSONP(JSON with Padding)。跨域是指当协议、子域名、主域名或端口号中的任意一个不相不同域之间互相请求资源的情况。由于浏览器遵循同源策略，限制了非同源内容之间的操作，因此JSONP成为了一种有效的跨域请求方式。

简单来说，JSONP利用`