原生Ajax、Ajax的封装以及Ajax的跨域和跨域原理

原生JS Ajax请求

传统方法的缺点:
传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
什么是ajax？
ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
js原生的ajax主要做前后端分离项目 请求API

XMLHttpRequest 对象

XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest

abort() 停止当前请求
getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader(“header”) 返回指定首部的串值
open(“method”,“URL”,[asyncFlag],[“userName”],[“password”]) 建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send(content) 向服务器发送请求
setRequestHeader(“header”, “value”) 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post’方法一定要 )

五步使用法:
1.创建XMLHTTPRequest对象
2.使用open方法设置和服务器的交互信息
3.设置发送的数据，开始和服务器端交互
4.注册事件
5.更新界面

 //1.建立ajax对象
    var http=new XMLHttpRequest();
    //2.建立服务器链接
    http.open("get","");//第三个参数不写默认异步请求
    //3.发送请求
    http.send();
    //4.建立ajax事件
    http.onreadystatechange=function (){
        //readyState  4 请求读取完成
        //status  响应的状态码  200  500
        if(http.readyState==4&&http.status==200)
        {
            //5.渲染界面http.responseText  http.response    json
            //http.responseText
        }
    }
    //状态码   200  成功   404 丢失  500服务器
    //提供了API：open  建立服务器之间的链接  参数1：请求的方式  get post   参数2:api路径  参数3：async  true/false    用户名和密码
send()   向服务器发送请求

Ajax异步请求：局部刷新技术

封装ajax

封装好的Ajax可以直接调用

 /*
     * 封装ajax
     * get   "www.baidu.com/api?id=1&name=2"
     *
     * async  true  异步（请求和后续代码同时执行）   false  同步（等待请求完成在执行）
     * */
    function method(med, api, async, data, callback) {
        var http = new XMLHttpRequest();
        if (med == "get") {
            if (data) {
                api += "?";
                api += data;
            }
            http.open(med, api, async);
            http.send();
        }
        else {
            http.open(med, api, async);
            if (data) {
                http.send(data);
            }
            else {
                http.send();
            }
        }
        http.onreadystatechange = function () {
            if (http.readyState == 4 && http.status == 200) {
                callback(http.response);
            }
        }
    }
    //192.168.90.1/sue/php/read.php   读数据
    //192.168.90.1/sue/php/userLogin.php  用户登录   111  112
    method("get", "http://www.maodou.com/sue/php/userLogin.php", true, "userid=111&userpwd=112", function (result) {
        if (JSON.parse(result)[0].count == 1) {
            alert("登录成功！")
        }
    });

JS几种跨域方法和原理
js跨域是指通过js在不同的域之间进行数据传输或通信。
产生跨域的原因：协议不同 端口不同 主机名称。

1. 通过jsonp跨域
   在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。

<script>
    /*
     * 解决跨域
     * （跨域资源共享）
     * 报错  报  Access-Control-Allow-Origin   出现跨域访问
     *jsonp  跨域原理是通过src +  callback回调函数来请求 ---不是ajax
     * */
    function method(med, api, async, data, callback) {
        var http = new XMLHttpRequest();
        if (med == "get") {
            if (data) {
                api += "?";
                api += data;
            }
            http.open(med, api, async);
            /*http.setRequestHeader("header","Access-Control-Allow-Origin:*");
            http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");*/
            http.send();
        }
        else {
            http.open(med, api, async);
            if (data) {
                http.send(data);
            }
            else {
                http.send();
            }
        }

        http.onreadystatechange = function () {
            if (http.readyState == 4 && http.status == 200) {
                callback(http.response);
            }
        }
    }
    /*var src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1&cb=getData";
    method("get", src, true, "", function (result) {
        console.log(result);
    })*/
</script>
<script>
    function getData(res){
        console.log(res);
    }
</script>
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1&cb=getData" type="text/javascript"></script>

2. cros跨域
   cros跨域一般在后端配置cros跨域请求。
   1、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>

2、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>

3、NET后台配置
.NET后台配置可以参考如下步骤:
第一步:网站配置
打开控制面板，选择管理工具,选择iis;右键单击自己的网站，选择浏览;打开网站所在目录,用记事本打开web.config文件添加下述配置信息,重启网站
“Access-Control-Allow-Headers”:“X-Requested-With,Content-Type,Accept,Origin”