原生js，ajax跨域

最新推荐文章于 2020-11-06 10:41:58 发布

蜗牛鸽

最新推荐文章于 2020-11-06 10:41:58 发布

阅读量269

点赞数

分类专栏：知识点文章标签： ajax xmlhttprequest javascript

本文链接：https://blog.csdn.net/qq_36675996/article/details/78351661

版权

知识点专栏收录该内容

58 篇文章 0 订阅

订阅专栏

直接贴代码：js文件:

function xmlhttp(){  
    var xhr = getHttpObj();//得到XMLHttpRequest对象;
    xhr.open("post","写上你需要跨域的路径", true);  
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");// 缺少这句，后台无法获取参数
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {  
        var data = xhr.responseText; //获取后台数据;
         var jsonData=eval("("+data+")"); //解析json成json对象（视个人情况而定）; 
         var obj = document.getElementsByName("zhujian");
                 ......
                    写你的内部逻辑;
                      .......
           }
          };  
         var content = "appid=11111&sign=222222222";  //传到后台的测试值(可忽略);
        xhr.send(content);  
      } 
function getHttpObj() {  
    var httpobj = null;  
    try {  
        httpobj = new ActiveXObject("Msxml2.XMLHTTP");  
    }  
    catch (e) {  
        try {  
            httpobj = new ActiveXObject("Microsoft.XMLHTTP");  
        }  
        catch (e1) {  
            httpobj = new XMLHttpRequest();  
        }  
    }  
    return httpobj;  
}

后台程序(我用的框架是SpringMVC):

@Controller
public class GetUserListController {

    @RequestMapping(value="路径后缀名")
    @ResponseBody
    public List<String> getUserList(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException{
        response.setHeader("Access-Control-Allow-Origin", "*");  //支持跨域访问,*代表你发送的所有请求方域名,也可以单独写你的请求方域名;
        response.setHeader("Access-Control-Allow-Methods", "POST,GET"); //支持跨域访问;
        List<String> list = new ArrayList<String>();//Map还是List是情况而定;
        list.add("测试1");
        list.add("测试2");
        list.add("测试3");
        return list;
    }
}