网站域名列表怎么填写,网站开发的前端语言是哪些,网站关键词词库怎么做,大连网站网站建设这篇文章主要为大家详细介绍了原生JS发送异步数据请求的相关资料#xff0c;具有一定的参考价值#xff0c;感兴趣的小伙伴们可以参考一下在做项目的时候#xff0c;有时候需要用到异步数据请求#xff0c;但是如果这个时候没有框架的依赖#xff0c;就需要用到原生JS进行…这篇文章主要为大家详细介绍了原生JS发送异步数据请求的相关资料具有一定的参考价值感兴趣的小伙伴们可以参考一下在做项目的时候有时候需要用到异步数据请求但是如果这个时候没有框架的依赖就需要用到原生JS进行异步数据请求。这时候无非有两种请求方式一种是AJAX另一个是JSONP。通过原生JS对异步请求进行简单的封装。AJAXAJAX是一种数据请求方式不需要刷新整个页面就能够更新局部页面的数据。AJAX的技术核心是XMLHttpRequest对象主要请求过程如下创建XMLHttpRequest对象(new)连接服务器(open)发送请求(send)接收响应数据(onreadystatechange)不说话直接贴代码/*** 通过JSON的方式请求* param {[type]} params [description]* return {[type]} [description]*/ajaxJSON(params) {params.type (params.type || GET).toUpperCase();params.data params.data || {};var formatedParams this.formateParams(params.data, params.cache);var xhr;//创建XMLHttpRequest对象if (window.XMLHttpRequest) {//非IE6xhr new XMLHttpRequest();} else {xhr new ActiveXObject(Microsoft.XMLHTTP);}//异步状态发生改变接收响应数据xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {if (!!params.success) {if (typeof xhr.responseText string) {params.success(JSON.parse(xhr.responseText));} else {params.success(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);}},/*** 格式化数据* param {Obj} data 需要格式化的数据* param {Boolean} isCache 是否加入随机参数* return {String} 返回的字符串*/formateParams: function(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();}IE7及其以上版本中支持原生的 XHR 对象因此可以直接用var oAjax new XMLHttpRequest();。IE6及其之前的版本中XHR对象是通过MSXML库中的一个ActiveXObject对象实现的。通过xhr的open函数来连接服务器主要接收三个参数请求方式、请求地址和是否异步请求(一般都是异步请求)。请求方式有两种GET和POSTGET是通过URL将数据提交到服务器的POST则是通过将数据作为send方法的参数发送到服务器。给xhr绑定状态改变函数onreadystatechange主要用来检测xhr的readyState的变化当异步发送成功后readyState的数值会由0变成4同时触发onreadystatechange事件。readyState的属性及对应状态如下0 (未初始化) 对象已建立但是尚未初始化(尚未调用open方法)1 (初始化) 对象已建立尚未调用send方法2 (发送数据) send方法已调用但是当前的状态及http头未知3 (数据传送中) 已接收部分数据因为响应及http头不全这时通过responseBody和responseText获取部分数据会出现错误4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据在readystatechange事件中先判断响应是否接收完成然后判断服务器是否成功处理请求xhr.status 是状态码状态码以2开头的都是成功304表示从缓存中获取上面的代码在每次请求的时候都加入了随机数所以不会从缓存中取值故该状态不需判断。JSONP如果还是用上面的XMLHttpRequest对象来发送需要跨域的请求虽然调用了send函数但是xhr的状态一直都是0也不会触发onreadystatechange事件这个时候就要用到JSONP的请求方式了。JSONP(JSON with Padding) 是一种跨域请求方式。主要原理是利用了script标签可以跨域请求的特点由其src属性发送请求到服务器服务器返回js代码网页端接受响应然后就直接执行了这和通过script标签引用外部文件的原理是一样的。JSONP由两部分组成回调函数和数据回调函数一般是由网页端控制作为参数发往服务器端服务器端把该函数和数据拼成字符串返回。比如网页端创建一个script标签并给其src赋值为http://www.test.com/json/?callbackprocess 此时网页端就发起一个请求。服务端将要返回的数据拼作为函数的参数传入服务端返回的数据格式类似”process({‘name:xieyufei})”网页端接收到了响应值因为请求者是 script所以相当于直接调用process方法并且传入了一个参数。不说话直接贴代码。/*** 通过JSONP的方式请求* param {[type]} params [description]* return {[type]} [description]*/ajaxJSONP(params) {params.data params.data || {};params.jsonp params.jsonp || callback;// 设置传递给后台的回调参数名和参数值var callbackName jsonp_ (new Date()).getTime();params.data[params.jsonp] callbackName;var formatedParams this.formateParams(params.data, params.cache);//创建script标签并插入到页面中var head document.getElementsByTagName(head)[0];var script document.createElement(script);head.appendChild(script);//创建jsonp回调函数window[callbackName] function(json) {head.removeChild(script);clearTimeout(script.timer);window[callbackName] null;params.success params.success(json);};//发送请求script.src (!!formatedParams ? params.url ? formatedParams : params.url);//为了得知此次请求是否成功设置超时处理if (params.time) {script.timer setTimeout(function() {window[callbackName] null;head.removeChild(script);params.error params.error({message: 超时});}, params.time);}}给script标签设置src属性时浏览器就会去发送请求但是只能发送一次请求导致script标签不能复用因此每次操作完都需要把script标签移除。在浏览器发送请求之前给全局绑定一个回调函数当数据请求成功时就会调用这个回调函数。总结将两种发送异步数据的方式整合起来根据dataType来进行判断选用哪种方式。贴上完整的代码var xyfAjax {ajax: function(params) {params params || {};params.cache params.cache || false;if (!params.url) {throw new Error(参数不合法);}params.dataType (params.dataType || json).toLowerCase();if (params.dataType jsonp) {this.ajaxJSONP(params);} else if (params.dataType json) {this.ajaxJSON(params);}},/*** 通过JSONP的方式请求* param {[type]} params [description]* return {[type]} [description]*/ajaxJSONP(params) {params.data params.data || {};params.jsonp params.jsonp || callback;// 设置传递给后台的回调参数名和参数值var callbackName jsonp_ (new Date()).getTime();params.data[params.jsonp] callbackName;var formatedParams this.formateParams(params.data, params.cache);//创建script标签并插入到页面中var head document.getElementsByTagName(head)[0];var script document.createElement(script);head.appendChild(script);//创建jsonp回调函数window[callbackName] function(json) {head.removeChild(script);clearTimeout(script.timer);window[callbackName] null;params.success params.success(json);};//发送请求script.src (!!formatedParams ? params.url ? formatedParams : params.url);//为了得知此次请求是否成功设置超时处理if (params.time) {script.timer setTimeout(function() {window[callbackName] null;head.removeChild(script);params.error params.error({message: 超时});}, params.time);}},/*** 通过JSON的方式请求* param {[type]} params [description]* return {[type]} [description]*/ajaxJSON(params) {params.type (params.type || GET).toUpperCase();params.data params.data || {};var formatedParams this.formateParams(params.data, params.cache);var xhr;//创建XMLHttpRequest对象if (window.XMLHttpRequest) {//非IE6xhr new XMLHttpRequest();} else {xhr new ActiveXObject(Microsoft.XMLHTTP);}//异步状态发生改变接收响应数据xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {if (!!params.success) {if (typeof xhr.responseText string) {params.success(JSON.parse(xhr.responseText));} else {params.success(xhr.responseText);}}} else {params.error params.error(status);}}if (params.type GET) {//连接服务器xhr.open(GET, (!!formatedParams ? params.url ? formatedParams : params.url), true);//发送请求xhr.send(null);} else {//连接服务器xhr.open(POST, params.url, true);xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);//发送请求xhr.send(formatedParams);}},/*** 格式化数据* param {Obj} data 需要格式化的数据* param {Boolean} isCache 是否加入随机参数* return {String} 返回的字符串*/formateParams: function(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();}}xyfAjax.ajax({url:http://www.xieyufei.com,type:get, //or postdataType:json, //or jsonpdata:{name:xyf},success: function(data){console.log(data)}})
