Ajax跨域问题(宝典)

1、出现返回数据报No 'Access-Control-Allow-Origin' header is present on the requested resource错误

这是因为服务器没有设置资源权限，无法访问 在服务去给response设置属性

response.setHeader("Access-Control-Allow-Origin" , "*");//设置权限
response.getWriter().write(userservice.GetUser(user));//发送数据

2、什么是**Access-Control-Allow-Origin

Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。

他是通过服务器端返回带有Access-Control-Allow-Origin标识的Response header，用来解决资源的跨域权限问题。

使用方法，在response添加 Access-Control-Allow-Origin，例如

Access-Control-Allow-Origin:www.google.com

这说明这个是只有www.google.com 是访问的域名，根据实际情况设置。其他无法获得数据

也可以设置为 * 表示该资源谁都可以用

`Access-Control-Allow-Origin: *`

3、前端访问后台的两种方式

1、通过创建xmlHttpRequest对象

a = new XMLHttpRequest();
                a.onreadystatechange =function () {//当readyState状态发生变化时事件
                    if(a.readyState == 4 && a.status == 200){
                        //readyState
                        /*
                        readyState    
                        存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                        0: 请求未初始化
                        1: 服务器连接已建立
                        2: 请求已接收
                        3: 请求处理中
                        4: 请求已完成，且响应已就绪
                        =============================
                        status
                        200: "OK"
                        404: 未找到页面
                     */
                    document.getElementById("myDiv").innerHTML=a.responseText;
                        /*
                        responseText 获得字符串形式的响应数据。 
                        responseXML 获得 XML 形式的响应数据。 
                        */
                    }
                }
                a.open("GET","http://192.168.10.37:8080/servlet?     
                       method=getUser&user=1232",true);//创建
                a.send();//发送

2、通过jquey内置

$.ajax({
        url://请求的地址
        type:"post"//提交的方式
        dataType:"text"//返回的类型，json，等等
        success:function (e) {//成功事执行的方法（若返回类型和我定义的不一致也是失败）
        }
        error:function () {//失败执行的方法
        }
    })
})
  $.post("请求的地址""参数"function(e){
      alert(e)
  },"text")
$.get()

3、json数据的遍历

var b = {
                    "employees": [
                    { "firstName":"John","lastName":"Doe" }
                    { "firstName":"Anna","lastName":"Smith" }
                    { "firstName":"Peter","lastName":"Jones" }
                    ]
                    };
                    b1 = b.employees;
                    b1.forEach(function (value) {
                        alert(value.firstName)
                    });

            for(var key in b.employees){
                alert(key);//拿到每个键的名称
                alert(b.employees[key])//拿到每个值
            }
            for(var i =0 ;b.length;i++){
                var a = b[i];
                for(var key in a){
                    alert(key+":"+a[key]);
                }
            }