Ajax和跨域问题深入解析
什么是ajax Ajax(Asynchronous JavaScript and XML),是一种可以向服务器请求额外的数据并且无需刷新页面的技术,ajax的出现带来了更好的用户体验. Ajax的核心就是XMLHttpRequest(XHR)对象.XHR为向服务器发送请求和解析服务器响应提供了流畅的接口.可以使用XHR对象获取新数据,通过DOM将新数据插入到页面.虽然名字中包含XML,但是ajax通信和数据格式无关;这种技术就是可以不用刷新就从服务器获取数据,但是不一定是XML数据,也可以是json. XMLHttpRequest对象 XHR的用法 1.创建一个XMLHttpRequest对象 2.发送请求 1).设置请求行 xhr.open() 3.处理服务器响应 先判断响应状态码和异步对象是否解析完毕. 服务器返回的状态码 status 1xx:消息 异步对象的状态码 readystate 0:异步对象已经创建 XML XML的特点,出身名门,W3C制定,微软和IBM曾经共同大力推荐过的数据格式.XML 指可扩展标记语言(Extensible Markup Language),被设计用来传输和存储数据,HTML 是设计用来表示页面的. 语法规则:和HTML差不多,都是通过标记来表示的 特殊符号:比如<>要使用实体-转移字符 xml的解析需要前后台配合: JSON JSON(JavaScript Object Notation),出身草根,是 Javascript 的子集,专门负责描述数据格式.JSON本身是一个特殊格式的字符串,可以转换成js对象,是网络上用来传输数据使用最广泛的数据格式,没有之一. 语法规则:数据以 key/value 值对表示,数据由逗号分隔,大括号保存对象,中括号保存数组,名称和值都需要使用双引号包含(这个是和js的一点小区别). 自己封装一个ajax function pinjieData(obj) { //obj 就相当于 {key:value,key:value} //最终拼接成键值对的字符串 "key:value,key:value" var finalData = ""; for(key in obj){ finalData+=key+"="+obj[key]+"&"; //key:value,key:value& } return finalData.slice(0,-1);//key:value,key:value } function ajax(obj) { var url = obj.url; var method = obj.method.toLowerCase(); var success = obj.success; var finalData = pinjieData(obj.data); //finalData最终的效果key:value,key:value //1.创建xhr对象 var xhr = new XMLHttpRequest(); //get方法拼接地址,xhr.send(null) if (method=='get'){ url = url + "?"+finalData; finalData = null; } //2.设置请求行 xhr.open(method,url); // 如果是post请求,要设置请求头 if (method=='post'){ xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") } //3.发送 xhr.send(finalData); //4.监听服务器返回的数据 xhr.onreadystatechange = function () { if (xhr.status==200 && xhr.readyState==4){ var result = null; //获取返回的数据类型 var rType = xhr.getResponseHeader("Content-Type"); if (rType.indexOf('xml')!=-1){ result = xhr.responseXML; }else if(rType.indexOf('json')!=-1){ // JSON.parse 的意思是 将 json格式的字符串 //比如 [{ "src":"./images/nav0.png","content":"商品分类1"}] //转成js对象 result = JSON.parse(xhr.responseText); }else{//当成普通的字符串去处理 result = xhr.responseText; } //将这里解析好的数据交给页面去渲染 success(result); } } } jQuery中使用ajaxAPI jQuery ajax jQuery为我们提供了更便利的ajax封装使用. $.ajax({}) 可以配置方式发起ajax请求 参数说明 url :接口地址 //ajax===get $.ajax({ url:'',data:'key=value&key=value',type:'get',success:function (result) { console.log(result); } }); //ajax===post $.ajax({ url:'',type:'post',success:function (result) { console.log(result); } }); //$.get $.get({ url:'',success:function (result) { console.log(result); } }); //$.post $.post({ url:'',success:function (result) { console.log(result); } }); //在使用jQuery中ajax发送请求的时候,只需要在 dataType中写上jsonp即可实现ajax的跨域请求 dataType:'jsonp' 跨域 通过XHR实现ajax通信的一个主要限制(相同域,相同端口,相同协议),来源于跨服安全策略,默认情况下,XHR只能请求同一域的资源,这是为了防止某些恶意的行为. CORS跨域 CORS(cross-origin resource sharing,跨域源资源共享)定义了在跨域时,浏览器和服务器应该如何沟通.CORS允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单,只需由服务器发送一个响应标头即可。 JSONP JSONP由回调函数和数据组成.JSONP只支持GET请求.JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据. 通过修改document.domain来跨子域 使用window.name来进行跨域 HTML5中新引进 window.postMessage方法来跨域传送数据 flash iframe 服务器设置代理页面 图像Ping 通过使用标签,利用网页可以从任何网页加载图像原理. 2个缺点:1.只支持GET请求.2.无法访问服务器的响应文本.只能用于浏览器与服务器间的单项通信. var img = new Image(); img.onload = img.onerror = function (){ alert("Done!"); }; img.src = ""; comet 一种更高级的ajax技术.ajax是页面向服务器请求数据的技术.comet是服务器向页面推送数据的技术. SSE (Server-Sent Events) 服务器发送事件 Web Sockets Web Sockets的目标是在一个单独的持久链接上提供全双工,双向通信. 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |