用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');