Ajax

原生ajax请求

注：ActiveXObject(“microsoft.XMLHttp”) 判断是否为IE

function ajax(url){
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
        xhr.open("get",url,true);
        xhr.send();
        xhr.onreadysattechange = () =>{
            if(xhr.readystate == 4){
                if(xhr.status == 200){
                    var data = xhr.responseText;
                    return data;
                }
            }
        }    
    }

原生GET请求

//创建核心对象
		xmlhttp = null;
		if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) { 
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//编写回调函数
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				alert(xmlhttp.responseText)
			}
		}
		//open设置请求方式和请求路径
		xmlhttp.open("get", "/Ajax/ajax2?username=张三");//一个servlet，后面还可以写是否同步
		//send 发送
		xmlhttp.send();

原生POST请求

//创建核心对象
		xmlhttp = null;
		if (window.XMLHttpRequest) {// code for Firefox, Opera, IE7, etc.
			xmlhttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//编写回调函数
		xmlhttp.onreadystatechange = function() {
			
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				alert(xmlhttp.responseText)
			}
		
		}
		//open设置请求方式和请求路径
		xmlhttp.open("post", "/Ajax/ajax2");//一个servlet，后面还可以写是否同步
		//设置请求头
		xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded")
		//send 发送
		xmlhttp.send("username=张三");

Jquery版Ajax

$.ajax()

// get请求
$.ajax({
//请求方式
    type:'GET',
    //发送请求的地址以及传输的数据
    url:'fzz.php?number'+=xxx,
    //服务器返回的数据类型
    dataType:'json',
    success:function(data){
        //请求成功函数内容
    },
    error:function(jqXHR){
        //请求失败函数内容
    }
});

// post请求
$.ajax({
    //请求方式
    type:'POST',
    //发送请求的地址
    url:'fzz.php',
    //服务器返回的数据类型
    dataType:'json',
    //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
    data:{name:xxx,age:xxx},
    success:function(data){
        //请求成功函数内容
    },
    error:function(jqXHR){
        //请求失败函数内容
    }
});

$.get()

$.get('fzz.php',{
    //发送至服务器的数据，格式为key/value
    number:xxx  
},function(data){
    //请求成功时的callback
},'json');//json为返回内容的格式

$.post()

$.post('fzz.php',{
    //发送至服务器的数据，格式为key/value
    number:xxx  
},function(data){
    //请求成功时的callback
},'json');//json为返回内容的格式

load()方法

能载入远程HTML代码并插入DOM中

//data为发送的key/value数据，可选
//callback为请求完成的回调，可选无论请求成功或失败都会调用
$(‘xxx’).load(‘fzz.html’,data,callback);

serialize()方法

serialize()作用于一个jQuery对象，能够将DOM元素内容序列化为字符串,用于Ajax请求.

$(’#form1’).serialize();

Ajax跨域

实现跨域

• jsonp解决跨域
• CORS跨域资源共享
• document.domain

jsonp解决跨域

原理：动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。
步骤

• 去创建一个script标签
• script的src属性设置接口地址
• 接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
• 通过定义函数名去接收后台返回数据

//去创建一个script标签 
var script = document.createElement("script"); 
//script的src属性设置接口地址 并带一个callback回调函数名称 
script.src="http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面 
document.head.appendChild(script); 
//通过定义函数名去接收后台返回数据 
function jsonpCallback(data){ 
//注意 jsonp返回的数据是json对象可以直接使用 
//ajax 取得数据是json字符串需要转换成json对象才可以使用。
 }

CORS跨域资源共享

原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求
限制：浏览器需要支持HTML5，可以支持POST，PUT等方法兼容ie9以上
需要后台设置

Access-Control-Allow-Origin: * //允许所有域名访问，或者
Access-Control-Allow-Origin: http://a.com //只允许所有域名访问

document.domain

原理：相同主域名不同子域名下的页面，可以设置document.domain让它们同域
限制：同域document提供的是页面间的互操作，需要载入iframe页面

// URL http://a.com/aaa
var ifr = document.createElement('iframe');
ifr.src = 'http://b.a.com/bbb'; 
ifr.onload = function(){
    var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementsById("aaa").innerHTML);
};

ifr.style.display = 'none';
document.body.appendChild(ifr);