jQuery中的JSON和Ajax

1.什么是Ajax?

Ajax全称Asynchronous JavaScript and XML（异步的JavaScript和XML）

2.Ajax的优缺点

优点：

• 异步模式，提升用户体验
• 减少不必要的数据传输
• Ajax引擎在客户端运行，成单率一部分本来有服务器承担的工作。

缺点：

• 不支持浏览器back按钮
• 安全问题：Ajax暴露了与服务器交互的细节
• 对搜索引擎的支持比较差

3.XMLHttpRequest对象

XMLHttpRequest的作用：可以向服务器提出请求并处理响应，而不阻塞用户；可以在页面加载以后进行页面的局部更新。

3.1 第1步：创建XMLHttpRequest对象

我们封装一个函数，以兼容各个浏览器版本：

	<script type="text/javascript">
		//封装通用的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.2.0'];
				//遍历创建XMLHttpRequest对象
				var len = xhrArr.length,xhr;
				for(var i = 0;i<len;i++){
					try{
						//创建XMLHttpRequest对象
						xhr = new ActiveXObject(xhrArr[i]);
						break;
					}
					catch(ex){

					}
				}
				return xhr;
			}
			else{
				throw new Error("No XHR object available!");
			}
		}

		var xhr = createXHR();
		console.log(xhr);
	</script>

3.2 第2步：创建一个新的HTTP请求

//第二步 创建请求
		xhr.open("get","MAMP-PRO-Logo.png",true);

3.3 第3步：设置状态请求变化函数与send

//第三步
		xhr.onreadystatechange = function(){
			//异步调用成功，响应内容解析完成
			if(xhr.readyState === 4){
				if(xhr.status >=200 && xhr.status<300 || xhr.status===304){//304表示资源没有被修改，可以使用缓存
					// 获得服务器返回的数据
				}
			}
		}

3.4 第4步：发送请求

//无参
xhr.send(null);
//有参
xhr.send({name:"zhangsan",age:20});

== 完整请求 ==

<script type="text/javascript">
		//封装通用的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.2.0'];
				//遍历创建XMLHttpRequest对象
				var len = xhrArr.length,xhr;
				for(var i = 0;i<len;i++){
					try{
						//创建XMLHttpRequest对象
						xhr = new ActiveXObject(xhrArr[i]);
						break;
					}
					catch(ex){

					}
				}
				return xhr;
			}
			else{
				throw new Error("No XHR object available!");
			}
		}

		//第一步
		var xhr = createXHR();
		//第三步
		xhr.onreadystatechange = function(){
			//异步调用成功，响应内容解析完成
			if(xhr.readyState === 4){
				if(xhr.status >=200 && xhr.status<300 || xhr.status===304){//304表示资源没有被修改，可以使用缓存
					// 获得服务器返回的数据
				}
			}
		}
		//第二步 创建请求
		xhr.open("get","MAMP-PRO-Logo.png",true);
		//第四步 发送请求
		xhr.send(null);
	</script>

3.5 获取服务器端返回的数据

4.jQuery的ajax方法

5.跨域

同源：域名、协议、端口均相同
跨域：指的是从一个域名的网页去请求另外一个域名的资源，严格一点的定义是：只要协议、域名、端口有任何一个的不同，就被当做是跨域。
如何解决跨域问题：

• 跨域资源共享（CORS）
• 使用JSONP
• 修改document.domain
• 使用window.name

如何使用JSONP处理跨域问题？
JSONP是JSON with Padding（填充式Json）的简写，是应用JSON的一种新方法，也是一种跨域解决方案。
JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数的JSON数据。

在html中，href属性和src属性可以实现跨域访问

完整代码：

// 封装JSONP
        function getJSONP(url,callback){
            if(!url){
                return;
            }
            // 声明数组用来随机生成函数名
            var a = ['a','b','c','d','e','f','g','i','h','j'],
                r1 = Math.floor(Math.random()*10),
                r2 = Math.floor(Math.random()*10),
                r3 = Math.floor(Math.random()*10),
                name = 'getJSONP' + a[r1] + a[r2] + a[r3],
                cbname = 'getJSONP.' + name;
                // 判断url地址中是否含有?号
                if(url.indexOf('?') === -1){
                    url += '?jsonp=' + cbname;
                }else{
                    url += '&jsonp=' + cbname;
                }
                // 动态创建script标签
                var script = document.createElement('script');
                // 定义被脚本执行的回调函数
                getJSONP[name] = function(data){
                    try{
                        callback && callback(data);
                    } catch(e){
                        //
                    }finally{
                        // 最后删除该函数及script标签
                        delete getJSONP[name];
                        script.parentNode.removeChild(script);
                    }
                }
                // 定义script的src
                script.src = url;
                document.getElementsByTagName("head")[0].appendChild(script);
        }

        getJSONP("http://class.imooc.com/api/jsonp",function(data){
                console.log(data);
        });