1.什么是Ajax?

Ajax全称Asynchronous JavaScript and XML(异步的JavaScript和XML)

2.Ajax的优缺点

优点:

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

缺点:

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

3.XMLHttpRequest对象

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

jquery json取并集_jquery json取并集

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>

jquery json取并集_ajax_02

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

jquery json取并集_跨域_03

jquery json取并集_javascript_04

jquery json取并集_ajax_05

jquery json取并集_javascript_06

jquery json取并集_javascript_07


jquery json取并集_javascript_08

//第二步 创建请求
		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步:发送请求

jquery json取并集_jquery json取并集_09


jquery json取并集_ajax_10

//无参
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 获取服务器端返回的数据

jquery json取并集_跨域_11

jquery json取并集_jquery json取并集_12

jquery json取并集_ajax_13

jquery json取并集_跨域_14

4.jQuery的ajax方法

jquery json取并集_js_15

jquery json取并集_跨域_16

5.跨域

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

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

如何使用JSONP处理跨域问题?

JSONP是JSON with Padding(填充式Json)的简写,是应用JSON的一种新方法,也是一种跨域解决方案。

JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数的JSON数据。

jquery json取并集_跨域_17

jquery json取并集_ajax_18


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

jquery json取并集_js_19


jquery json取并集_jquery json取并集_20


jquery json取并集_jquery json取并集_21


jquery json取并集_跨域_22

jquery json取并集_ajax_23

jquery json取并集_jquery json取并集_24


完整代码:

// 封装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);
        });

jquery json取并集_jquery json取并集_25