Ajax和跨域问题深入解析
什么是ajax
Ajax(AsynchronousJavaScriptandXML),是一种可以向服务器请求额外的数据并且无需刷新页面的技术,ajax的出现带来了更好的用户体验.
Ajax的核心就是XMLHttpRequest(XHR)对象.XHR为向服务器发送请求和解析服务器响应提供了流畅的接口.可以使用XHR对象获取新数据,通过DOM将新数据插入到页面.虽然名字中包含XML,但是ajax通信和数据格式无关;这种技术就是可以不用刷新就从服务器获取数据,但是不一定是XML数据,也可以是json.
XMLHttpRequest对象
XHR的用法
1.创建一个XMLHttpRequest对象
2.发送请求
1）.设置请求行xhr.open()
2）.POST请求需要设置请求头xhr.setRequestHeader()POST请求头Content-Type的值:application/x-www-form-urlencoded
3）.设置请求体xhr.send()get请求传null,post根据情况
3.处理服务器响应
先判断响应状态码和异步对象是否解析完毕.
服务器返回的状态码status
1xx:消息
2xx:成功
3xx:重定向
4xx:请求错误
5xx:服务器错误
异步对象的状态码readystate
0:异步对象已经创建
1:异步对象初始化完成,发送请求
2:接收服务器返回的原始数据
3:数据正在解析,解析需要时间
4:数据解析完成,数据可以使用了
XML
XML的特点，出身名门，W3C制定，微软和IBM曾经共同大力推荐过的数据格式.XML指可扩展标记语言（ExtensibleMarkupLanguage）,被设计用来传输和存储数据,HTML是设计用来表示页面的.
语法规则:和HTML差不多,都是通过标记来表示的
特殊符号:比如<>要使用实体-转移字符
xml的解析需要前后台配合:
1.后台在返回的时候,在响应头中设置Content-Type的值为application/xml
2.前台异步对象在接收后台数据时,记得按照xml的方式来接收,xhr.responseXML,并且它返回的是一个object对象,内容是#document
JSON
JSON(JavaScriptObjectNotation),出身草根，是Javascript的子集，专门负责描述数据格式.JSON本身是一个特殊格式的字符串,可以转换成js对象,是网络上用来传输数据使用最广泛的数据格式，没有之一.
语法规则:数据以key/value值对表示,数据由逗号分隔,大括号保存对象,中括号保存数组,名称和值都需要使用双引号包含(这个是和js的一点小区别).
js中解析/操作JSON:
1.JSON.parse(json字符串);将一个json格式的字符串解析成js对象
2.JSON.stringify(js对象);将一个js对象转成一个json格式的字符串
自己封装一个ajax
functionpinjieData(obj){
//obj就相当于{key:value,key:value}
//最终拼接成键值对的字符串"key:value,key:value"
varfinalData="";
for(keyinobj){
finalData+=key+"="+obj[key]+"&";//key:value,key:value&
}
returnfinalData.slice(0,-1);//key:value,key:value
}
functionajax(obj){
varurl=obj.url;
varmethod=obj.method.toLowerCase();
varsuccess=obj.success;
varfinalData=pinjieData(obj.data);
//finalData最终的效果key:value,key:value
//1.创建xhr对象
varxhr=newXMLHttpRequest();
//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){
varresult=null;
//获取返回的数据类型
varrType=xhr.getResponseHeader("Content-Type");
if(rType.indexOf('xml')!=-1){
result=xhr.responseXML;
}elseif(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中使用ajaxAPIjQueryajax
jQuery为我们提供了更便利的ajax封装使用.
$.ajax({})可以配置方式发起ajax请求
$.get()以get方式发起ajax请求
$.post()以post方式发起ajax请求
$('form').serialize()序列化表单(格式化key=val$key=val)
参数说明
url:接口地址
type:请求方式(get/post)
timeout:要求为Number类型的参数，设置请求超时时间（毫秒）
dataType:应该是客户端传递给服务器一个值，告诉服务器如何进行处理:
data:发送请求数据
beforeSend:要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求.
success:成功响应后调用
error:错误响应时调用
complete:响应完成时调用（包括成功和失败）
//ajax===get
$.ajax({
url:'',
data:'key=value&key=value',
type:'get',
success:function(result){
console.log(result);
}
});
//ajax===post
$.ajax({
url:'',
data:'key=value&key=value',
type:'post',
success:function(result){
console.log(result);
}
});
//$.get
$.get({
url:'',
data:'key=value&key=value',
success:function(result){
console.log(result);
}
});
//$.post
$.post({
url:'',
data:'key=value&key=value',
success:function(result){
console.log(result);
}
});
//在使用jQuery中ajax发送请求的时候,只需要在dataType中写上jsonp即可实现ajax的跨域请求
dataType:'jsonp'
跨域
通过XHR实现ajax通信的一个主要限制(相同域,相同端口,相同协议),来源于跨服安全策略,默认情况下,XHR只能请求同一域的资源,这是为了防止某些恶意的行为.
CORS跨域
CORS(cross-originresourcesharing,跨域源资源共享)定义了在跨域时,浏览器和服务器应该如何沟通.CORS允许一个域上的网络应用向另一个域提交跨域AJAX请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
CORS支持所有类型的HTTP请求.
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。
JSONP
JSONP由回调函数和数据组成.JSONP只支持GET请求.JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据.
JSONP通过动态