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字符串给后端。后端也要做相应处理。

  • 相关阅读:
    myeclipse项目转到eclipse中
    线程防止冲突
    Flex FLOWBOX 添加RichText 不换行
    win7 修复系统文件
    一月学习socket tcp通信总结
    flex
    [调试技巧] 如何利用WinDbg找出程序崩溃的位置
    Class Struct 转Byte Serialize Marshal 区别
    C#捕获摄像头进行拍照和录像资料总结
    WebBrowser控件使用技巧分享
  • 原文地址:https://www.cnblogs.com/woodk/p/5577938.html
Copyright © 2011-2022 走看看