用jQuery实现ajax总结以及跨域问题

本文为作者原创，未经博主允许，不可转载

ajax请求的常用的参数设置：

type：请求类型，"POST","GET",默认为get
url:发送请求的地址
data：是一个对象，联通请求发送到服务器的数据，表单数据（$("#addForm").serialize()）或formData（文件上传时用到）
dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据http包MIME信息来智能判断，一般我们采用json格式，
可以设置为“json”，也可以设置为xml，（后面讲解）
success：是一个方法，请求成功后的回调函数，传入返回后的数据，以及包含成功代码的字符串
error:是一个方法，请求失败时调用此函数，传入XMLHTTPRequest对象。

什么地方会用到ajax，一般用ajax是为了页面异步刷新，在不刷新页面的情况下，异步到后台去请求数据，

并根据得到的数据做出想要的处理或操作，比如：提交form表单，进行文件上传，刷新表单数据等。

ajax请求有两种方式：即type:get或post两种，一般为post。两种的主要区别为：

GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的。

另外ajax常用的属性和方法为：

1.responseText ：获得字符串形式的响应数据
2.responseXML: 获得XML形式的响应数据
3.status 和 statusText： 以数字和文本形式返回http状态码
4.getResponseHeader() : 查询响应中的某个字段的值
5.getAllResponseHeader（） ：获取所有的响应报头

readyState属性（监听服务器连接及响应）：
0：请求为初始化，
1.服务器连接已建立， open已经调用
2.请求已接收，也就是接收到头消息了
3.请求处理中，也就是接收到响应主体了
4.请求已完成，且响应已就绪，也就是响应完成了

以下为使用的案例和跨域问题的研究

用jQuery的ajax进行form表单提交的案例为：

此处为get请求
$(document).ready(function(){
$("#submit").click(function(){
$.ajax({
type:"GET",
url:"",
dataType:"json",
success:function(data){
if(data.success){
$("#searchResult").html(data.msg);
}
else{
$("#searchResult").html("出现错误"+data.msg);
}
alert("成功"),
}
error:function(jqXHR){
alert("发生错误"+jqXHR.status);
}
})
})
})

post请求的案例为：

此处为post请求,需要加入data参数
$(document).ready(function(){
$("#submit").click(function(){
$.ajax({
type:"POST",
url:"",
data:{
name:$("#name").val(),
password:$("#password").val(),
sex:$("#sex").val(),
number:$("#number").val(),
}
dataType:"json",
success:function(data){    //data为后台返回的数据
if(data.success){
$("#searchResult").html(data.msg);
}
else{
$("#searchResult").html("出现错误"+data.msg);
}
alert("成功"),
}
error:function(jqXHR){
alert("发生错误"+jqXHR.status);
}
})
})
})

在工作应用当中，会有很多地方遇到ajax，用ajax请求返回的数据类型也会不一样，有json格式，xml格式以及formData格式等。

json格式一般返回的为一个对象，

当用json作为返回类型时，应用的案例为：

function submitDemandForm(){
$.ajax({
url:"<%=basePath%>handPlay/demandVideoSubmit",
type:"POST",
data:$("#addDemandVideoForm").serialize(),
dataType:'json',
success:function(data){
console.info(data);
//     alert("提交成功"+data.returnMsg);
//调用上传的方法
uploadPic();
uploadVideo();
submitValue = data.returnMsg;
console.info(data);
},
error:function(data){
if(data.status == "false"){
//   alert("提交失败");
console.info(data);
submitValue = data.returnMsg;

}
}

})
}

当用formData作为请求对象时，是进行文件上传时用到，其使用的方法为：

function uploadPic(){
var formData = new FormData();
console.info(formData);
formData.append("myfile",document.getElementById("file").files[0]);
var uploadPicValue = "";
$.ajax({
url:"${uploadCoverUrl}",
type:"POST",
data:formData,
contentType:false,
dataType:'xml',
/*
*必须false才会避开jQuery对formdata的处理
*/
processData:false,
success:function(data){
console.info(data);
//if(data.status == "true"){
alert("图片上传成功");
uploadPicValue = data.readyState;
//  }
if(data.status == "true"){
//alert("data.msg");
uploadPicValue = data.readyState;
$("#uploadPicBar").removeClass("active");

}
},
error:function(data){
console.info(data);
// alert("图片上传失败");
uploadPicValue = data.readyState;
//增加上传失败时的样式

//   document.getElementById("#uploadPicWord").innerHTML='上传失败';
$("#uploadPicWord").html('上传失败');
//   alert("uploadPicValue"+uploadPicValue);
}
})
}

跨域问题：

当使用火狐调试时，报的异常为：

火狐浏览器错误提示：
 http://localhost:8080/IMP/static/images/partners/partner_bg.png [HTTP/1.1 404 Not Found 5ms]
Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead[详细了解]  jquery-1.9.1.min.js:1
Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead[详细了解]  jquery-migrate-1.1.0.min.js:3
Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead[详细了解]  jquery.js:1
所用的 getPreventDefault() 已不赞成使用。请改用 defaultPrevented。  jquery-1.9.1.min.js:3:31293
FormData {  }  sendLiveForm:139:5
已拦截跨源请求：同源策略禁止读取位于 http://114.215.100.148:8060/image?prefix=abcd 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。 （未知）
FormData {  }  sendLiveForm:139:5
FormData {  }  sendLiveForm:139:5
Security wrapper denied access to property (void 0) on privileged Javascript object.
Support for exposing privileged objects to untrusted content via __exposedProps__ is being gradually removed - use WebIDL bindings or Components.utils.cloneInto instead.
Note that only the first denied property access from a given global object will be reported.

异常解析及解决方案：

跨域：
1.当协议，子域名，主域名，端口号中任意一个不相同时，都算作不同域
2.不同域之间相互请求资源，就算做“跨域”
3.JavaScript处于安全方面的考虑，不允许跨域调用其他页面的对象。什么是跨域呢，简单的理解
就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象

4.jsonp可用于解决主流浏览器的跨域数据访问的问题...（具体需要上网，且该方法存在较强的局限性）
5。解决跨域方法--XHR2
HTML5提供的XMLHttpRequest Level2 已经实现了跨域访问以及其他的一些新功能
IE10以下都不支持
在服务器端在一些小小的改造即可
header('Access-Control-Allow-Orign':*);
header('Access-Control-Allow-Methods:POST,GET');