MyException - 我的异常网
当前位置:我的异常网» jQuery » 用jQuery实现ajax总结以及跨域有关问题

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

www.MyException.Cn  网友分享于:2013-08-29  浏览:0次
用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');

文章评论

老程序员的下场
老程序员的下场
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
编程语言是女人
编程语言是女人
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
代码女神横空出世
代码女神横空出世
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
漫画:程序员的工作
漫画:程序员的工作
为什么程序员都是夜猫子
为什么程序员都是夜猫子
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
如何成为一名黑客
如何成为一名黑客
程序员都该阅读的书
程序员都该阅读的书
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
我的丈夫是个程序员
我的丈夫是个程序员
中美印日四国程序员比较
中美印日四国程序员比较
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
我是如何打败拖延症的
我是如何打败拖延症的
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员应该关注的一些事儿
程序员应该关注的一些事儿
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序员必看的十大电影
程序员必看的十大电影
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
每天工作4小时的程序员
每天工作4小时的程序员
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
旅行,写作,编程
旅行,写作,编程
10个调试和排错的小建议
10个调试和排错的小建议
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员和编码员之间的区别
程序员和编码员之间的区别
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
程序员的鄙视链
程序员的鄙视链
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有