原生JS发送异步数据请求

在做项目的时候，有时候需要用到异步数据请求，但是如果这个时候没有框架的依赖，就需要用到原生JS进行异步数据请求。这时候无非有两种请求方式，一种是AJAX，另一个是JSONP。通过原生JS对异步请求进行简单的封装。 AJAX 　　AJAX是一种数据请求方式，不需要刷新整个页面就能够更新局部页面的数据。AJAX的技术核心是XMLHttpRequest对象，主要请求过程如下： 创建XMLHttpRequest对象(new) 连接服务器(open) 发送请求(send) 接收响应数据(onreadystatechange) 　　不说话直接贴代码 /** * 通过JSON的方式请求 * 原生JavaScript发送异步数据请求是Web开发中的基础技能，主要应用于向服务器获取或发送数据，而无需刷新整个页面。这种技术使得用户界面更加友好，提高了用户体验。在没有依赖任何框架的情况下，我们可以使用两种主要的方法：AJAX和JSONP。 **AJAX（Asynchronous JavaScript and XML）** AJAX的核心是XMLHttpRequest对象，它允许我们在后台与服务器进行通信，而不会中断用户的交互。AJAX请求通常包括以下几个步骤： 1. **创建XMLHttpRequest对象**：在现代浏览器中，我们可以通过`new XMLHttpRequest()`来创建一个实例；而在老版本的IE中，则需要使用`new ActiveXObject('Microsoft.XMLHTTP')`。 2. **连接服务器**：使用`xhr.open()`方法来建立与服务器的连接，接受三个参数：请求类型（GET或POST）、URL以及是否异步。例如：`xhr.open('GET', 'url', true)`。 3. **发送请求**：对于GET请求，调用`xhr.send()`即可；而对于POST请求，需要先设置请求头`xhr.setRequestHeader()`，然后调用`xhr.send(data)`，其中data为要发送的数据。 4. **接收响应**：监听`xhr.onreadystatechange`事件，当`xhr.readyState`变为4且`xhr.status`为200时，表示请求成功，可以通过`xhr.responseText`或`xhr.responseXML`获取响应数据。通常我们会将`xhr.responseText`解析为JSON对象处理，如`JSON.parse(xhr.responseText)`。 以下是一个简化的AJAX JSON请求的示例： ```javascript function ajaxJSON(params) { params.type = (params.type || 'GET').toUpperCase(); params.data = params.data || {}; var formatedParams = this.formateParams(params.data, params.cache); var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { params.success && params.success(JSON.parse(xhr.responseText)); } else { params.error && params.error(status); } }; if (params.type == 'GET') { xhr.open('GET', (!!formatedParams ? params.url + '?' + formatedParams : params.url), true); xhr.send(); } else { xhr.open('POST', params.url, true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(formatedParams); } } function formateParams(data, isCache) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name])); } if (isCache) { arr.push('v=' + (new Date()).getTime()); } return arr.join('&'); } ``` **JSONP（JSON with Padding）** JSONP主要用于解决跨域问题，因为AJAX受到同源策略的限制。它的工作原理是动态创建`<script>`标签，利用`src`属性指向一个提供JSON数据的URL，该URL通常是一个函数调用，参数为返回的JSON数据。服务器端返回一个JavaScript函数调用，执行这个函数并传递返回的数据。 例如，服务器端可能返回`callback({key: 'value'})`，客户端则预先定义一个名为`callback`的函数来接收数据。 总结来说，原生JS发送异步数据请求是Web开发的基础，无论是AJAX还是JSONP，它们都极大地提升了网页的交互性和实时性。在实际开发中，我们还需要考虑错误处理、兼容性问题以及性能优化等多方面因素。