zoukankan      html  css  js  c++  java
  • 原生js封装ajax,实现跨域请求

    描述:

    需要ajax跨域请求,用cors跨域方案。
    服务端设置:

    header('Access-Control-Allow-Origin: http://front.ls-la.me');
    header('Access-Control-Allow-Headers: X-Requested-With');

    设置了:

    后端需要的头信息,原生ajax以表单方式post提交数据,json数据data转换成key1=val1&key2=val2 的字符串格式

     1 var ajaxHdFn = function(uri, data, cb) {
     2   var getXmlHttpRequest = function() {
     3     if (window.XMLHttpRequest) {
     4       //主流浏览器提供了XMLHttpRequest对象
     5       return new XMLHttpRequest();
     6     } else if (window.ActiveXObject) {
     7       //低版本的IE浏览器没有提供XMLHttpRequest对象
     8       //所以必须使用IE浏览器的特定实现ActiveXObject
     9       return new ActiveXObject("Microsoft.XMLHttpRequest");
    10     }
    11 
    12   };
    13   var xhr = getXmlHttpRequest();
    14   xhr.onreadystatechange = function() {
    15     console.log(xhr.readyState);
    16     if (xhr.readyState === 4 && xhr.status === 200) {
    17       //获取成功后执行操作
    18       //数据在xhr.responseText
    19       var resJson = JSON.parse(xhr.responseText)
    20       cb(resJson);
    21     }
    22   };
    23   xhr.open("post", uri, true);
    24   xhr.setRequestHeader("DeviceCode", "56");
    25   xhr.setRequestHeader("Source", "API");
    26   xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");
    27   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
    28   var dataStr = '';
    29   for (var i in data) {
    30     if (dataStr) {
    31       dataStr += '&';
    32     }
    33     dataStr += i + '=' + data[i];
    34   }
    35   xhr.send(dataStr);
    36 };

    跨域相关内容

    CORS跨域的常见问题以及前后端的设置:

    《Ajax——CORS跨域调用REST API 的常见问题以及前后端的设置》

    data = JSON.stringify(data);
    xhr.setRequestHeader("Content-Type","application/json");

    这样设置,可以直接传json字符串给后端。后端也要做相应处理。

  • 相关阅读:
    JSP标准标签库(JSTL)--JSTL简介与安装
    JSP标签编程--简单标签
    Tomcat数据源
    Linux 更新vim
    perl 函数
    js 使用a标签 下载资源
    js arrayBuffer 字节序问题,小端法,大端法
    js 的 ArrayBuffer 和 dataView
    ajax 获取服务器返回的XML字符串
    遍历form表单里面的表单元素,取其value
  • 原文地址:https://www.cnblogs.com/woodk/p/5577938.html
Copyright © 2011-2022 走看看