关于AJAX和跨域的备忘

 

/*杜绝IE678*/

    var xhl = new XMLHttpRequest();

    console.log(xhl);

    /*xhl对象下的属性*/

    /*XMLHttpRequest

        onabort:null  //当请求中止时触发

        onerror:null  //当请求因错误失败时触发。注意404等状态码不是error，因为此时响应仍然是成功完成的。

        onload:null   //当请求成功时触发

        onloadend:null  //在请求成功或者失败时触发；load、abort、error、timeout事件发生之后

        onloadstart:null  //当请求开始时触发

        onprogress:null  //当响应主体正在下载重复触发（约每隔50ms一次）

        onreadystatechange:null  //当readyState属性改变时触发

        ontimeout:null  //当timeout属性指定的时间已经过去但响应依旧没有完成时触发 用作请求超时处理

        //到这里，上面这些on...表示的是请求的时候会发生的一些事件




        readyState:0  //请求发送接收的过程

        response:""  //响应

        responseText:""  //http响应的文本内容

        responseType:""  //响应类型

        responseURL:""  //响应地址

        responseXML:null  //用于当接收到完整的HTTP响应时(readyState为4)描述XML响应

        status:0  //http状态码

        statusText:""  //描述了HTTP状态代码文本

        timeout:0  //描述了超出指定时间

        //到这里，上面这些属性表示请求的状态、内容等



        withCredentials:false
            //这个属性就简单说一下：
                //属性是一个Boolean类型，
                //它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。
                //在同一个站点下使用withCredentials属性是无效的。
             //详细的说明地址：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials
       */



    /*xhl对象下常用属性*/


    //readystate属性：请求发送接收的过程


        //取值范围:0,1,2,3,4

        //0:已经创建了xhl对象，但是还没有初始化

        //1:已经调用open方法，准备发送

        //2:已经调用send方法，请求已经到达服务器，但是还没有得到响应

        //3:收到响应，正在接受响应，已经收到了http响应头，主体还在传输中

        //4:响应接受完毕

    //status属性：http状态码   当readystate属性小于3时，status不可用，如果用，会引发错误
        //状态码的分类：
            //100-199：用于指定客户端相应的动作
            //200-299：用于表示请求成功
            //300-399：用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
            //400-499：用于指出客户端的错误
            //500-599：用于支持服务器错误
        //总共就这五种类型的状态码，每种类型下面还对应不同的状态，具体的以后再细究
        //主要说200范围内就是基本上是请求成功了，400-599的意思就是出错了

    //responseText属性：http响应的文本内容 只有当readystate属性为4的时候，responseText属性保存的才是完整的请求文本内容，其他情况均为空字符串

    //两个method：open & send
        //open方法规定了，请求方式，请求地址，同步(false)/异步(true)
        //send方法规定了，请求是否发送，如果调用则立即发送，如果不调用，则请求不发送，
            //send方法的参数：string data;   一般GET请求不需要传，用于POST

    //POST和GET
    //GET请求所有的数据全部在浏览器的地址栏中可见，
    //POST请求在地址栏中不可见，数据全部在请求报文主体中，HTTP请求在将他们封包，通过线路传输到达服务器，然后拆包，解析；就是这个歌意思

    //跨域
        //在本地测试的时候一定会出现跨域，这个时候就需要保持头脑清醒
        //1.本地发起请求如果地址是127.0.0.1，浏览器是不会让你把你当前这个请求发出去的
        //2.同源策略的限制，假如服务器和你根本就不是同一个路由下的机器，那么就相当于你的ip去请求百度的某一台服务器，百分之一万的会跨域
        //3.去network中查看你的请求
    //只要：主域、端口、子域、协议
        //这四个有任何一个不同，都会产生跨域


    //设置请求的报头，就是请求头，header

    //xhl.setRequestHeader('header属性名','属性值');

    //CORS解决一般的跨域


    //CORS很简单，就这么几句话


    //1.同源策略是浏览器制定的规则，也就是说，默认的浏览器是不允许发起AJAX请求的；(要告诉浏览器，我这个请求是合法的，你不要拦截我)；


    //2.阮一峰说的：CORS实现的关键是服务器对于CORS接口的实现；


        //也就是说，不管前台让浏览器觉得请求再怎么安全，服务器没有做相应的支持，折腾上天也没用；


    //3.区分【简单请求】和【不是那么简单的请求】，其实区别就是预检和不预检，报头多了点东西而已；


    //4.告诉服务器你的请求源【Origin】是什么，绝对路径，然后服务器做出判断：xhl.setRequestHeader('Origin','http://www.baidu.com')


    //5.同时服务器允许请求源允许访问:Access-Control-Allow-Origin:http://www.baidu.com


    //简单总结一下，CORS(跨域资源共享)，以前没有这个标准，在没有这个方式之前，基本就是jsonp、flash等；


    //上面说了，浏览器有同源策略的限制，而且本身默认是不允许本域与其他域之间通信，而CORS主要就是通过控制请求头的一些属性，来确认两域之间是否建立通信；


    //如果英文好的话：Access-Control-,这个的意思就是（访问-控制-），这样就清晰很多了，访问权限的控制嘛！那么所有添加在HTTP请求报头中的访问控制的字段，都属于CORS范畴；



    //如果是非简单请求，浏览器会增加一次HTTP查询，这就是预检，就是先问问你们家的服务器有没有允许你的访问【源】，如果允许了，继续执行请求，如果没有onerror事件被触发；



    //具体的报头中会有哪些访问权限的控制，自行百度，就那么几条；



    //做到上面这些还不够，因为危险还存在，而且很大，首先服务器要加密你请求的数据，包括整个响应体，到了前台将响应体解密，先不要着急取数据什么的，先看看响应【源】是不是你们家的服务器，再去执行；



    上面这些只是解决一般的跨域，还有更复杂的，我到现在都没解决，So,年轻人，革命尚未成功，大伙儿仍需努力！

 

 

转载于:https://www.cnblogs.com/wukong-js/articles/7816124.html