ajax异步加载和允许跨域访问的方法

ajax(Asynchronous JavaScript and XML)异步js和xml,主要用于按需加载页面，它可以防止页面刷新给用户带来的不好的浏览体验，具体的实现要涉及到XMLHttpRequest对象，使用jQuery可以方便的进行ajax编程这里不详细提及，有兴趣的同学自行百度，获取XMLHttpRequest的方法，因为考虑到IE浏览器我们要进行兼容处理

//这个方法可以返回一个XMLHttpRequest对象
function createXMLHttpRequest(){
	var xmlRequest;
	if(window.ActiveXObject){
		xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}else if(window.XMLHttpRequest){
		xmlRequest = new XMLHttpRequest();
	}
	return xmlRequest;
}

XMLHttpRequest对象有send, open等方法，但主要用的就是这两个方法,下面是这两个方法的使用实例

function submit(){
	var name = document.getElementById("name").value;
	var client = new XMLHttpRequest();
	client.open("post", "/jsp/ajax?name=" + name, true);//如果设置为false那么回调函数就不会执行
	//这样的ajax请求是违反浏览器的同源策略的
	//client.open('get', 'http://api.money.126.net/data/feed/0000001,1399001');
	console.log(client.readyState);
	client.onreadystatechange = function() {
		if(client.readyState === 4){
			if(client.status === 200){
				alert(client.responseText);
			}else{
				alert('请求失败');
			}
		}else{
			alert('请求还在继续'+ client.readyState);
		}
	};
	client.send();
}

open函数要注意第三个参数（可以不写，默认为true），如果为false到的话，就是同步请求，也就是说只有当服务器返回数据后浏览器才会继续做动作,在这之前浏览器会处于假死状态，最直观的反应就是当readyState改变时，回调函数不会执行

使用Ajax会有个问题，就是不允许跨域访问，下面我们就来决解这个问题

1.使用jsonp:jsonp是json的一种使用模式，原理其实就是利用script可以跨域调用js,下面是一个例子

//用jsonp进行跨域请求数据,原理是利用浏览器允许script调用外域的js,这里我们不是请求js文件
function jsonp() {
	var sc = document.createElement('script');
	var body = document.getElementsByTagName("body")[0];
    //外域url
	url = "http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice";
	sc.src = url;
	body.appendChild(sc);
}
//跨域请求成功它会执行回调函数,data是返回的js对象
function refreshPrice(data){
	console.log(typeof data, data);
}

2.在服务器端设置相应的首部

如果要接受跨域访问请求，就必须在服务器端返回的资源中加入 Access-Control-Allow-Origin 头标识， Access-Control-Allow-Origin 的值可以是 URL 或 *，如果是 URL 则只会允许来自该 URL 的请求，* 则允许任何域的请求。比如，在 HTML 中可以设置：
1.在ajax请求的那个服务器上输出的页面上做header的一个标签，
<meta http-equiv="Access-Control-Allow-Origin" content="*">
*代表所有的服务器 或 只允许某一个
<meta http-equiv="Access-Control-Allow-Origin" content="http://www.baidu.com:80">
 
2.在ajax请求的那个服务器上脚本上设置header请求参数
Access-Control-Allow-Origin: *
response.setHeader("Access-Control-Allow-Origin", "*");