ajax和jsonp

今天群里有小伙伴说：只会做页面不会接接口。聊了会，感觉还是写写ajax和jsonp吧。

先来说说ajax和jsonp是啥，然后再看看他们的实例。

官方点讲，ajax是用来创建快速动态页面的技术，也可以说是一种方法。它通过XMLHttpRequest对象来进行服务器与后台数据的交换并且两者间只需要少量的数据交换，就可以实现网页的异步更新。就是在网页不重新加载的情况下，局部更新内容。

但是ajax它本身是不具备跨域的能力的，但是通过服务器代理，也是能够进行跨域的。

说到同源策略，就是只有协议+主机名+端口号相同，则允许相互访问。同源策略主要限制的也只是js,对于HTML本身来说，并不受同源策略的影响。就像a标签，只要你给了地址，就能够访问。

jsonp是一种跨域数据交互协议，但它是非官方的协议。它借助的就是HTML不受同源策略影响，利用script标签能够跨域的特性，通过src发送请求到服务器，服务器返回JS代码，浏览器接受响应，然后就直接执行了，这和通过script标签引用外部文件的原理是一样的。

ajax

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

xhr=new XMLHttpRequest();

IE6以下版本使用 ActiveX 对象：

xhr=new ActiveXObject("Microsoft.XMLHTTP");

var Ajax={
    get: function(url, fn) {
	    var xhr;
	    if(window.XMLHttpRequest){
		    xhr = new XMLHttpRequest();
	    }else{
		    xhr = new AvtiveXObject('Microsoft.XMLHTTP')
	    }
	    xhr.open('GET',url,true);
	    xhr.onreadystatechange = function(){
         //readyState = 4 响应完成;status == 200 请求成功
		    if(xhr.readyState ==4 && xhr.status == 200){
			    fn.call(this, xhr.responseText);
		}
	}
	xhr.send();
}，
   post: function (url, data, fn) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url, true);
        //post传递数据时需添加http头，后面是数据发送到服务器时的编码类型
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
            fn.call(this, xhr.responseText);
      }
    };
        xhr.send(data);
  }
}

jsonp

jsonp它只支持get请求

function jsonpCallback(result) {  
            for(var i in result) {  
                console.log(i+":"+result[i]);//循环输出result的元素  
            }  
        }  
        var JSONP=document.createElement("script");  
        JSONP.type="text/javascript"; 
        // 通过src进行连接传参
        JSONP.src="url?callback=jsonpCallback";  
        document.getElementsByTagName("head")[0].appendChild(JSONP); 

在JQ中，实现ajax就很简单了

$.ajax({
    url: ,
    type: '',//get || post
    dataType: '', //json || text || html等
    async: ,//true为异步，false为同步
    timeout: ,//设置超时时间，一般都是设定3000ms
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })

JQ实现jsonp,是将其封装在ajsx中

$.ajax({
    type: 'GET',
    async:false,
    url: ,
    dataType: 'jsonp', 
    data: {
          
    },
    //传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)
    jsonp: "callback",
    //自定义的jsonp回调函数名称，默认为jQ自动生成的随机函数名
    jsonpCallback:"hand",
    //成功获取跨域服务器上的json数据后,会动态执行这个callback函数
    success: function(){
         
    },
    error: function(){
          
    }
 })