Ajax同步和异步的区别？如何解决跨域问题？

有关ajax的同步异步问题：

ajax方法有个属性async用于控制同步和异步，默认是true,即ajax请求默认是异步请求，有时项目中会用到AJAX同步，同步的概念是来源于OS中的概念，即不同进程为协同完成某项工作而在先后次序上做了调整，这一点是通过阻塞、唤醒等的方式，同步强调的是顺序性，异步则不存在这种顺序性。

同步（async值为true）：

浏览器访问服务器发生的请求，用户可以看到页面的刷新，重新发请求，等请求完，页面刷新，新内容出现，用户看到新内容，进行下一步操作。当ajax发送请求后，在等待server端返回的这个过程中，前台会继续 执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程 和ajax块后面的脚本（另一个线程）

 

$.ajax({
    type:"POST",
    url:"Venue.aspx?act=init",
    dataType:"html",
    async: false,
    success:function(result){  //function1()
        f1();
        f2();
    },
    failure:function (result) {
        alert('Failed');
    },

function2();

 

当把asyn设为false时，这时ajax的请求时同步的，也就是说，这个时候ajax块发出请求后，他会等待在function1（）这个地方，不会去执行function2()，直到function1()部分执行完毕。

 

 

 

异步（async值为false）：

浏览器访问服务器请求，用户正常操作，浏览器后端进行请求，请求完后页面不会刷新，但是用户照样可以再网页上看到刷新的效果。当执行当前AJAX的时候会停止执行后面的JS代码，直到AJAX执行完毕后时，才能继续执行后面的JS代码。

 

var returnValue = null;
xmlhttp = createXmlHttp();
xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        if (xmlhttp.responseText == "true") {
            returnValue = "true";
        }
        else {
            returnValue = "false";
        }
    }
};
xmlhttp.open("Post",url,true); //异步传输 
xmlhttp.setRequestHeader("If-Modified-Since","0"); //不缓存Ajax
xmlhttp.send(sendStr);
return returnValue;

 

 

 

下面是异步和同步的不同调用方式：

 

xmlHttpReq.open("GET",url,true);//异步方式
xmlHttpReq.onreadystatechange = showResult; //showResult是回调函数名
xmlHttpReq.send(null);
function showResult(){
    if(xmlHttpReq.readyState == 4){
        if(xmlHttpReq.status == 200){
           .......
        }
    }
}

xmlHttpReq.open("GET",url,false);//同步方式  
xmlHttpReq.send(null);
showResult(); //showResult虽然是回调函数名但是具体用法不一样~  
function showResult(){
    //if(xmlHttpReq.readyState == 4){  这里就不用了，直接dosomething 
    //if(xmlHttpReq.status == 200){  
   .......//dosomething  
    //}  
    //}  
}
xmlhttp.open("Post",url,true);

 

如果是同步(false)，返回值是true或false，因为执行完send后，开始执行onreadystatechange，程序会等到onreadystatechange都执行完，取得responseText后才会继续执行下一条语句，所以returnValue一定有值。

    如果是异步(true)，返回值一定是null，因为程序执行完send后不等xmlhttp的响应，而继续执行下一条语句，所以returnValue还没有来的及变化就已经返回null了。

 

 

跨域问题：

跨域问题即跨域名问题，即A网站在代码上访问了B网页的内容，由于同源策略，所以ajax不能实现跨域访问。

【同源策略：JavaScript和cookie只能访问同域名下的内容】

为了实现跨域问题，出现了以下几种解决方案：

jsonp、iframe、flash、xhr2、window.name、window.postMessage、服务器上设置代理页面，

比较常用的是jsonp

先来看一下关于jsonp是如何实现跨域访问的。

其本质上是利用HTML标签的src属性来实现跨域问题，如img、script、iframe等标记的src属性的值都可以附成其他域名的合法地址。