能不能用通俗的语言解释下什么是ajax的原理和跨域的原理？

请老师另外举一个跨域的例子运用，帮助我理解？

这个应该运用到服务器的知识吧，请问我如何在pc端测试是否代码正确？

     // 封装通用的xhr,兼容各个版本
     function createXHR() {
         //判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，Firefox，Opera等浏览器
         if (typeof XMLHttpRequest != "undefined") {
             return new XMLHttpRequest();
         } else if (typeof ActiveXObject != "undefined") {
             //将所有可能出现的ActiveXObject版本放在一个数组中
             var xhrArr = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
             //遍历创建XMLHttpRequest对象
             var len = xhrArr.length;
             for (var i = 0; i < len; i++) {
                 try {
                     //创建XMLHttpRequest对象
                     xhr = new ActiveXObject(xhrArr[i]);
                     //如果创建XMLHttpRequest对象成功，则跳出循环
                     break;
                 } catch (ex) {}
             }
         } else {
             throw new Error("No XHR object available.");
         }
     }

     var xhr = createXHR(),
         data = null; //用于接收服务器端返回的数据
     //响应XMLHttpRequest对象状态变化的函数
     xhr.onreadystatechange = function() {//当readyState属性状态发生改变调用事件
         //异步调用成功
         if (xhr.readyState === 4) {
             if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {//前面表示异步调用成功，后面表示请求资源没有被修改
                 //获得服务器返回的数据
                 data = JSON.parse(xhr.responseText);
				 //data=eval("("+xhr.responseText+")");
				 //eval("("+xhr.responseText+")"); 的意思是强制转化成json对象，之所以写成 eval“("("+data+")");这种格式，原因是由于json是以”{}”的方式来开始以及结束的。在JavaScript中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式，加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式转化为对象，而不是作为语句来执行
				 //将响应信息作为字符串返回responseText
				 //console.log(data.slider);
                  //渲染数据
                 renderDataToDom();
             } else {
                 console.log('unsuccess');
             }
         }
     };
     //创建http请求
     xhr.open('get', './server/slider.json', false);
     //发送http请求
     xhr.send(null);
	 //发送请求的两种方式
	 //xhr.send({user:"zhangsan",id:6});//post
	 //xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	 //get//xhr.open('get', './server/slider.json?user=zhangsan&id=6', false);

      //渲染数据
     function renderDataToDom() {
         var img = data.slider,
             i,
             len = img.length,
             str = "",
             banner = document.getElementById("banner");
          //遍历数据,拼接字符串
         for (i = 0; i < len; i++) {
			 //第二种写法
			 /*var a=document.createElement("a");
			 a.href=img[i].linkUrl;
			 a.innerHTML='<img src="' + img[i].picUrl + '">';
			 banner.appendChild(a);*/
             str += '<a href="' + img[i].linkUrl + '"><img src="' + img[i].picUrl + '"></a>'
         }
         // 渲染图片信息
         banner.innerHTML = str;
     }

     // jquery请求
     $.ajax({
         url: "./server/slider.json",//请求地址
         type: "post",//请求方式
         dataType: "json",//数据格式
         async: true,//同步异步
         success: function(datas) {//请求成功的回调
             renderData(datas.slider);
         }
     })

     // jquery渲染数据
     function renderData(data) {
         var str = "";
         $.each(data, function(index, obj) {
             str += '<a href="' + obj.linkUrl + '"><img src="' + obj.picUrl + '"></a>'
         })
         $("#banner_jq").html(str);
     }

    // // 封装一个jsonp函数,实现跨域
    function getJSONP(url, callback) {
        if (!url) {
            return;
        }
        var a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']; //定义一个数组以便产生随机函数名
		//为保证Jsonp正常运作，在发出请求之前需要在window对象上放置回调函数。假设回调函数不是随机的，那在连续JSONP请求时，后发出的请求放置的回调函数会覆盖掉之前的，回调数据会出问题
        var r1 = Math.floor(Math.random() * 10);
        var r2 = Math.floor(Math.random() * 10);
        var r3 = Math.floor(Math.random() * 10);
        var name = 'getJSONP' + a[r1] + a[r2] + a[r3];
        var cbname = 'getJSONP.' + name; //作为jsonp函数的属性
        if (url.indexOf('?') === -1) {//判断url地址中是否有？号
            url += '?jsonp=' + cbname;
        } else {
            url += '&jsonp=' + cbname;
        }
        var script = document.createElement('script');//动态创建script标签
        //定义被脚本执行的回调函数
        getJSONP[name] = function(e) {
            try {
                callback && callback(e);//if语句可以代替
            } catch (e) {
                //
            } finally {
                //最后删除该函数与script元素
                delete getJSONP[name];
                script.parentNode.removeChild(script);
            }

        }
        script.src = url;
        document.getElementsByTagName('head')[0].appendChild(script);
    }
    // 跨域调用
    getJSONP('http://class.imooc.com/api/jsonp', function(response) {
        console.log(response);
    });