ajax和跨域的一些问题

简单的总结下ajax和跨域问题。

手写原生ajax算是比较高频的面试题了，目的就是看你是否明白其原理。
首先是XMLHttpRequest对象，现代浏览器均支持（IE5 和 IE6 使用 ActiveXObject）。它是一个window对象。它的reponseText属性可以获取返回数据。readyState和status属性可以标识返回状态。
onreadystatechange是一个事件，或者说一个函数。

var request = new XMLHttpRequset();
request.onreadystatechange = function () {
    if (request.readyState ==4 && request.status == 200) {
            alert(requset.reponseText)//成功，返回reponseText
            }else {
            alert(requset.status)  //失败，返回错误状态码
            }
        }
requset.get('GET', url, true) ;//默认为true，可不写。表示异步
requset.send()

1. jsonp跨域。
   原理：利用script标签可跨域的特性。

<button onclick="getPrice()">点击刷新</button>
<p id="test"></p>

function refreshPrice(data) {
            var p = document.getElementById('test');
            p.innerHTML = '当前价格：' +
            data['0000001'].name +': ' + 
            data['0000001'].price + '；' +
            data['1399001'].name + ': ' +
            data['1399001'].price;
        }
        
function getPrice() {
            var script = document.createElement('script');
            var head = document.getElementsByTagName('head')[0];
            script.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
            head.appendChild(script)
        }

借用了廖雪峰老师网站里的例子。

2. CORS。
   CORS全称Cross-Origin Resource Sharing，是HTML5规范定义的如何跨域访问资源。设置服务端Access-Control-Allow-Origin
3. 服务器代理。同源域名下设置一个代理服务器来转发。
4. window.name
5. document.domain
6. window.postMessage
   下面3个网上都有许多介绍。我反正是不怎么了解。。。额。。

这个是借鉴网上一篇博客的总结，总之具体问题具体对待吧。

1. jsonp 需要目标服务器配合一个callback函数。
2. window.name+iframe 需要目标服务器响应window.name。
3. window.location.hash+iframe 同样需要目标服务器作处理。
4. html5的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage，主要侧重于前端通讯。
5. CORS 需要服务器设置header ：Access-Control-Allow-Origin
6. nginx反向代理
   这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求。