原生js实现ajax请求和JSONP跨域请求操作示例

本文实例讲述了原生js实现ajax请求和JSONP跨域请求。分享给大家供大家参考,具体如下:

直接上代码:

const ajax = (params = {}) => {
 const nowJson = params.jsonp ? jsonp(params) : json(params);
 function jsonp(params){
  //创建script标签并加入到页面中
  var callbackName = params.jsonp;
  var head = document.getElementsByTagName('head')[0];
  // 设置传递给后台的回调参数名
  params.data['callback'] = callbackName;
  var data = formatParams(params.data);
  var script = document.createElement('script');
  head.appendChild(script);

  window[callbackName] = function(jsonData) {
   head.removeChild(script);
   clearTimeout(script.timer);
   window[callbackName] = null;
   params.success && params.success(jsonData);
  };
  //console.log(window[callbackName])
  //console.log(params.url + '?' + data)

  //url形式传参
  //说明:下面的script加载资源后会返回一个自执行函数:[callbackName](responseData),这个形式就是去执行一个函数,函数的名字是一个参数
  //      同时在windows对象上定义了这个函数:[callbackName] = function(responseData){},这时就会调用这个函数
  script.src = params.url + '?' + data;

  //为了得知此次请求是否成功,设置超时处理
  if(params.time) {
   script.timer = setTimeout(function() {
    window[callbackName] = null;
    head.removeChild(script);
    params.error && params.error({
     message: '超时'
    });
   }, params.time);
  }
 }
 //格式化参数
 function formatParams(data) {
  var arr = [];
  for(var name in data) {
   arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
  };

  // 添加一个随机数,防止缓存
  arr.push('v=' + random());
  return arr.join('&');
 }

 // 获取随机数
 function random() {
  return Math.floor(Math.random() * 10000 + 500);
 }
 function json(params) {
  // 请求方式,默认是GET
  params.type = (params.type || 'GET').toUpperCase();
  // 避免有特殊字符,必须格式化传输数据
  params.data = formatParams(params.data);
  var xhr = null;

  // 实例化XMLHttpRequest对象
  if(window.XMLHttpRequest) {
   xhr = new XMLHttpRequest();
  } else {
   // IE6及其以下版本
   xhr = new ActiveXObjcet('Microsoft.XMLHTTP');
  };

  // 监听事件,只要 readyState 的值变化,就会调用 readystatechange 事件
  xhr.onreadystatechange = function() {
   // readyState属性表示请求/响应过程的当前活动阶段,4为完成,已经接收到全部响应数据
   if(xhr.readyState == 4) {
    var status = xhr.status;
    // status:响应的HTTP状态码,以2开头的都是成功
    if(status >= 200 && status < 300) {
     var response = '';
     // 判断接受数据的内容类型
     var type = xhr.getResponseHeader('Content-type');
     if(type.indexOf('xml') !== -1 && xhr.responseXML) {
      response = xhr.responseXML; //Document对象响应
     } else if(type === 'application/json') {
      response = JSON.parse(xhr.responseText); //JSON响应
     } else {
      response = xhr.responseText; //字符串响应
     };
     // 成功回调函数
     params.success && params.success(response);
    } else {
     params.error && params.error(status);
    }
   };
  };

  // 连接和传输数据
  if(params.type == 'GET') {
   // 三个参数:请求方式、请求地址(get方式时,传输数据是加在地址后的)、是否异步请求(同步请求的情况极少);
   xhr.open(params.type, params.url + '?' + params.data, true);
   xhr.send(null);
  } else {
   xhr.open(params.type, params.url, true);
   //必须,设置提交时的内容类型
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
   // 传输数据
   xhr.send(params.data);
  }
 }
}
export default ajax;

调用:

ajax({
   jsonp:'JSONP',
   url:'http://localhost:8080/test',
   data:{},
   time:1000,
   success:function(data){
    console.log(data)
   },
   error:function(error){
    console.log(error)
   }
  })

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript中ajax操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

(0)

相关推荐

  • 原生js jquery ajax请求以及jsonp的调用方法

    ajax 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容 同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前面的任务是耗时操作,则需要一直等待 异步:多条任务并发执行,也就是一个任务的开启,不需要等待其他任务执行结束,效率较高 ajax的语言载体是JavaScript,最大的特点是页面不刷新 1.获取ajax对象 主流浏览器获取方式:火狐.谷歌.

  • 原生javascript的ajax请求及后台PHP响应操作示例

    本文实例讲述了原生javascript的ajax请求及后台PHP响应操作.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table id="t">

  • JavaScript用JSONP跨域请求数据实例详解

    前言 最近因为工作需要,需要把爱词霸的每日一句引入到页面上,爱词霸向外开放了 API, 接口返回 json 数据,为了让页面更轻巧,我没有用 jQuery,而是直接纯 js 写了一段代码: <script type="text/javascript"> function httpGetAsync(theUrl, callback) { xmlHttp = null; if (window.XMLHttpRequest) {// code for IE7, Firefox,

  • 实例讲解使用原生JavaScript处理AJAX请求的方法

    Ajax 是异步的JavaScript和XML的简称,是一种更新页面某部分的机制.它赋予了你从服务器获取数据后,更新页面某部分的权力,从而避免了刷新整个页面.另外,以此方式实现页面局部更新,不仅能有效地打造流畅的用户体验,而且减轻了服务器的负载. 下面是对一个基本的 Ajax 请求进行剖析: var xhr = new XMLHttpRequest(); xhr.open('GET', 'send-ajax-data.php'); xhr.send(null); 在这里, 我们创建了一个能向服务

  • 详细解密jsonp跨域请求

    1.什么是跨域请求: 服务器A上的一个页面,要请求服务器B上的一个处理程序,这就叫做跨域请求 本次的测试页面为: 处理程序kimhandler.ashx,如下: %@ WebHandler Language="C#" Class="KimHandler" %> using System; using System.Web; public class KimHandler : IHttpHandler { public void ProcessRequest (

  • 详解JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),当然也可同步,这样就可使网页从服务器请求少量的信息,而不是整个页面.Ajax使我们的项目更小.更快,更友好,在前端开发有很高的地位,也是面试题的热点.本次测试是在localhost本地环境. 1.原生ajax (1)html前端代码get请求方式创建一个ajax实例xhr

  • Javascript原生ajax请求代码实例

    这篇文章主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 class Ajax{ constructor(url, method, data, callback_suc, callback_err, callback_run){ this.RT = true;//默认为异步请求 this.url = url; this.method = method || "POST";

  • JSONP跨域请求实例详解

    JSOP简介 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSON

  • 轻松搞定jQuery+JSONP跨域请求的解决方案

    JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSONP 抓到的资料

  • jsonp跨域请求实现示例

    网上看了很多关于jsonp的资料,发现在本机运行后实现不了,有的是有错漏,有的是说的比较含糊,接合自己的情况,整了一个可运行的示例: 前言: ajax请求地址:http://192.168.1.102:8080/carop/jsonp 服务端要返回的jsonp字符串:jsonpCallback({"name":"刘德华","电话":"17688888888"}) jsonp写法,写法上可以理解成一个javascript函数的执

  • Ajax jsonp跨域请求实现方法

    什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 具体策略限制情况可看下表: URL 说明 允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 h

  • JSONP跨域请求

    什么是跨域: 1.域名不同 2.域名相同端口不同 js出于对安全考虑不支持跨域请求.我们可以使用JSONP解决跨域问题. 一.JSONP是什么 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页js是无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <scr

随机推荐