原生js ajax请求与跨域

什么是ajax

它是一种用于创建快速动态网页的技术，通过后台与服务器进行少量数据交换（请求后端数据），ajax可以使网页实现异步更新，即在不更新整个网页的情况下进行部分网页更新减少用户的等待时间，加快响应。

XMLHttpRequest 对象

XMLHttpRequest 对象所有的是ajax的基础，XMLHttpRequest 用于在后台与服务器的数据交互目前所有的浏览器都支持XMLHttpRequest

建立对服务器的调用

open("method","URL",[asyncFlag],["userName"],["password"])
//method 参数可以为"get" "pust" "put"
// method 参数为get时：url参数为'getStar.php?starName='+name
//method 参数为 post时：向服务器发送请求时content为url内容 如:http.send('name=fox&age=18');
//URL 参数为相对或绝对URL
//asyncFlag 为是否选择异步 默认为异步
//userName 用户名
//password 密码

向服务器发送请求

send(content)

原生ajax写法：分为五步

1.创建XMLHttpRequest对象

  var http=new XMLHttpRequest();

2.使用open方法设置和服务器的交互信息

  http.open("get","./data/data.txt")
  //默认异步请求 true

3.设置发送数据，开始和服务器交互

  http.send();

4.注册事件
5.更新界面

 http.onreadystatechange=function (res){
                    /!*readyState 状态为4  读取完成
                     status   200  请求成功*!/
                    if(this.status==200&&this.readyState==4)
                    {
                        /!*5.更新界面*!/
                        console.log(this);
                        /!*读取成功之后的返回数据在response  responseText*!/
                        document.write(this.response);
                    }
                }

ajax 跨域

jsonp跨域前端后端都需要配置 CORS跨域只需要在前端进行配置

jsonp跨域
通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。

 <script>
        function getdata(data){
            console.log(data);
        }
    </script>
    <script src="http://localhost:8080/stu/selectUesr.php?callback=getdata"></script>
    //callback为回调函数

2.CORS请求原理
CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。它的实现原理就是使用自定义的HTTP头部让浏览器和服务器进行有效的沟通，从而决定请求或者响应是否成功即就是在我们发起跨域请求时，浏览器会自动创建一个origin字段，其值就是我们要请求的域名
第一种现象:No ‘Access-Control-Allow-Origin’ header is present on the requested resource,并且The response had HTTP status code 404
出现这种情况的原因如下：
本次ajax请求是“非简单请求”,所以请求前会发送一次预检请求(OPTIONS)
服务器端后台接口没有允许OPTIONS请求,导致无法找到对应接口地址
解决方案: 后端允许options请求
第二种现象:No ‘Access-Control-Allow-Origin’ header is present on the requested resource,并且The response had HTTP status code 405
这种现象和第一种有区别,这种情况下，后台方法允许OPTIONS请求,但是一些配置文件中(如安全配置),阻止了OPTIONS请求,才会导致这个现象
解决方案: 后端关闭对应的安全配置
第三种现象:No ‘Access-Control-Allow-Origin’ header is present on the requested resource,并且status 200
比如origin头部检查不匹配,比如少了一些头部的支持(如常见的X-Requested-With头部),然后服务端就会将response返回给前端,前端检测到这个后就触发XHR.onerror,导致前端控制台报错
解决方案: 后端增加对应的头部支持(Access-Control-Allow-Origin:*;)
*表示支持所有
第四种现象:heade contains multiple values ‘,’
表现现象是，后台响应的http头部信息有两个Access-Control-Allow-Origin:*
解决方案:
建议删除代码中手动添加的*，只用项目配置中的即可
建议删除IIS下的配置*，只用项目配置中的即可

后端应该如何配置以解决问题

PHP后台配置
PHP后台得配置几乎是所有后台中最为简单的,遵循如下步骤即可:
第一步:配置Php 后台允许跨域

<?php header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

主要为跨域CORS配置的两大基本信息,Origin和headers
第二步:配置Apache web服务器跨域(httpd.conf中)

//原始代码：
<Directory />
    AllowOverride none
    Require all denied
</Directory>
//修改代码：
<Directory />
    Options FollowSymLinks
    AllowOverride none
    Order deny,allow
    Allow from all
</Directory>

JAVA后台配置
JAVA后台配置只需要遵循如下步骤即可:
第一步:获取依赖jar包下载 cors-filter-1.7.jar, java-property-utils-1.9.jar 这两个库文件放到lib目录下。(放到对应项目的webcontent/WEB-INF/lib/下)
第二步:如果项目用了Maven构建的,请添加如下依赖到pom.xml中:

<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>[ version ]</version>
</dependency>

NET后台配置
.NET后台配置可以参考如下步骤:
第一步:网站配置
打开控制面板，选择管理工具,选择iis;右键单击自己的网站，选择浏览;打开网站所在目录,用记事本打开web.config文件添加下述配置信息,重启网站

("Access-Control-Allow-Headers":"X-Requested-With,Content-Type,Accept,Origin")