js ajax跨域

1.什么是ajax？

Ajax是指一种创建交互式网页应用的网页开发技术，无需重新加载整个网页的情况下，能够刷新部分网页的技术。
ajax的优点：能在不更新整个页面的前提下维护数据，它不需要任何浏览器插件，但需要用户允许js在浏览器上执行。
缺点：它可能破坏浏览器的后退与加入收藏书签功能。在动态更新页面的情况下，用户无法回到前一个页面状态。
get请求：

    //创建异步对象
    var ajax = new XMLHttpRequest();
    //设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
    ajax.open('get','getStar.php?starName='+name);
    //发送请求
    ajax.send();
    //注册事件 onreadystatechange 状态改变就会调用
    ajax.onreadystatechange = function () {
        if (ajax.readyState==4 &&ajax.status==200) {
            console.log(ajax.responseText);//输入相应的内容
        }
    }

post请求：

    var result = null;
    function ajax(method, url, data, callback) {
        var http = new XMLHttpRequest();
        //get 跟post需要分别写不同的代码
        if (method == "get") {
        //get请求
            if (data) {
                url += "?";
                url += data;
            }
            http.open(method, url);
            http.send();
        }
        else {
        //post请求
        //post请求url 是不需要改变
            http.open(method, url);
            if (data) {
                http.send(data);
            }
            else {
                http.send();
            }
        }
        http.onreadystatechange = function () {
            if (http.readyState == 4 && http.status == 200) {
                callback(http.response);
            }
        }
    }
    ajax("post", "./data/data.txt", null, function (data) {
        console.log(data);
    });

2.ajax的使用及实现步骤

（1）创建一个xmlrequest对象；

`var http=new XMLHttpRequest()` 

（2）得到XMLHTTPRequest对象后，就可以调用对象的open()方法，与服务器连接；

 xmlHttpRequest.open("get",url,true);

（3）向服务器端发送数据：

http.send();

（4）注册事件服务器开始响应：

（5）针对不同的响应状态进行处理并更新和渲染界面：

http.onreadystatechange=function (){
        if(http.readyState==4)
        {
            //获取数据  
            var data=JSON.parse(http.response);
            console.log(data);
        }
    }

3.同步和异步：
默认是异步：true;同步：false.
区别：异步是服务器请求和后续代码同时执行;

var http=new XMLHttpRequest();
    http.open("get", url, true);
    http.send();
    function showdata(callback){
        http.onreadystatechange=function(){
            if(http.readyState==4 && http.status==200){
                callback(http.response);
            }
        }
    }
    showdata(function (data) {
        console.log(data);
    });

同步是服务器请求完成之后再去执行代码；

    var data=null;
    var http=new XMLHttpRequest();
    http.open("get",url,false);
    http.send();
    http.onreadystatechange=function(){
        if (http.readyState==4 && http.status==200){
            console.log(1);
        }
    }
    console.log(2);

4.跨域：
1.为什么跨域：一段脚本向后台请求数据，只能读取属于同一协议名、同一主机名、同一端口号下的数据；所以，请求不同协议名、不同端口号、不同主机名下面的文件时，将会违背同源策略，无法请求成功，需要进行跨越处理!
2.跨域分为jsonp跨域和cros跨域；
（1）jsonp通过传递回调函数来返回数据。动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。需要声明回调函数。

    var http=new XMLHttpRequest();
    http.open("post","");
    http.send();
    http.onreadystatechange=function (){
        if(http.readyState==4&&http.status==200) 
        {
            console.log(JSON.parse(http.response));
        }
    }

（2）cros跨域：在PHP文件里配置header('Access-Control-Allow-Origin: * ');