>

解决ajax跨域问题,程序员的成长之路JQuery篇

- 编辑:金沙国际平台登录 -

解决ajax跨域问题,程序员的成长之路JQuery篇

JQuery ajax支持get方式的跨域,采用了jsonp来完成。完成跨域请求的有两种方式实现。一种是使用Jquery ajax最底层的Api实现跨域的请求,而另一种则是JQuery ajax的高级封装。

程序员的成长之路JQuery篇,成长之路jquery

方式1:使用Jquery ajax方式。

很久没写JS了,或者说自从工作以来都没怎么写过JS,最近在开发要用到JS,瞬间懵逼了. 立即去菜鸟找入门教材来看,磕磕碰碰的总算搞定了。以下是学习过程中碰到的问题以及自己的理解。

图片 1图片 2

一:jquery.js和jquery.min.js的区别

  从字面意思来看,jquery.min.js 是 jquery.js的迷你版本,功能都一样,只是jquery.js里面是没有进行处理的源代码,方便人们阅读与研究,而jquery.min.js是处理过的代码,在浏览器的开发者模式可以看到(F12)可以看到代码都进行过特殊的处理,如变量的名称基本都写成一个字母,而且格式缩进都被删除了.所以文件容量比较小(min),一般在网页中调用这个文件.

PS:附加一个下载地址:

二:JQuery 选择器

  这里有篇比较全的文章:

  上面讲得很全,总结得很好,在这里就不多做介绍

三:页面初始化加载

  JS初始化加载:是页面全部加载完成才执行初始化加载。 

  1,在body标签里面添加onload事件,绑定要初始化的方法 

<script>
    function test(){
        alert("页面初始化加载JS版")
    }
</script>
</head>
<body class="id1" onload="test()">

    2,直接在JS里面绑定初始化方法

<script>
    window.onload=function(){
        alert("页面初始化加载JS版")
    }
</script>
</head>
<body class="id1">
</body>

JQuery初始化加载: 等待页面加载完数据,以及页面部分元素(不包括图片、视频), 

  1,代码如下

$(function(){
        alert("JQuery First to load when the browser page initialize");
    });

  2,使用ready

$(document).ready(function(){ 
        alert("JQuery First to load when the browser page initialize");
    });

  3,代码如下

jQuery(function($){ 
        alert("JQuery First to load when the browser page initialize");
    });

PS:由于jquery使用$符号,和有些组件例如dwr就有冲突,为了解决这个问题,可以使用 

 代码如下:   var ace=jQuery.noConflict();  释放$给其他框架   四:JQuery 遍历   $(selector).each(function(index,element))   参数:必需。为每个匹配元素规定运行的函数。

  • index - 选择器的 index 位置。
  • element - 当前的元素(也可使用 "this" 选择器)。

五:JQuery Ajax与原生Ajax的用法

  AJAX 是异步的JavaScript和XML的简称,是一种更新页面某部分的机制。它赋予了你从服务器获取数据后,更新页面某部分的权力,从而避免了刷新整个页面。另外,以此方式实现页面局部更新,不仅能有效地打造流畅的用户体验,而且减轻了服务器的负载。

  原生Ajax要判断浏览器,而JQuery则完全的处理了这个问题

JQuery ajax 代码

图片 3

$.ajax({
    url:'/comm/test1.php',
    type:'POST', //GET
    async:true,    //或false,是否异步
    data:{
        name:'yang',age:25
    },
    timeout:5000,    //超时时间
    dataType:'json',    //返回的数据格式:json/xml/html/script/jsonp/text
    beforeSend:function(xhr){
        console.log(xhr)
        console.log('发送前')
    },
    success:function(data,textStatus,jqXHR){
        console.log(data)
        console.log(textStatus)
        console.log(jqXHR)
    },
    error:function(xhr,textStatus){
        console.log('错误')
        console.log(xhr)
        console.log(textStatus)
    },
    complete:function(){
        console.log('结束')
    }
})

View Code

原生ajax代码

图片 4

function createXMLHTTPRequest() {   
                 //1.创建XMLHttpRequest对象   
                 //这是XMLHttpReuquest对象无部使用中最复杂的一步   
                 //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码   
                 var xmlHttpRequest;
                 if (window.XMLHttpRequest) {   
                     //针对FireFox,Mozillar,Opera,Safari,IE7,IE8   
                    xmlHttpRequest = new XMLHttpRequest();   
                     //针对某些特定版本的mozillar浏览器的BUG进行修正   
                     if (xmlHttpRequest.overrideMimeType) {   
                         xmlHttpRequest.overrideMimeType("text/xml");   
                     }   
                 } else if (window.ActiveXObject) {   
                     //针对IE6,IE5.5,IE5   
                     //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中   
                     //排在前面的版本较新   
                     var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];   
                     for ( var i = 0; i < activexName.length; i++) {   
                         try {   
                             //取出一个控件名进行创建,如果创建成功就终止循环   
                             //如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建   
                            xmlHttpRequest = new ActiveXObject(activexName[i]); 
                            if(xmlHttpRequest){
                                break;
                            }
                         } catch (e) {   
                         }   
                     }   
                 }   
                 return xmlHttpRequest;
             }   

            function get(){
                var req = createXMLHTTPRequest();
                if(req){
                    req.open("GET", "http://test.com/?keywords=手机", true);
                    req.onreadystatechange = function(){
                        if(req.readyState == 4){
                            if(req.status == 200){
                                alert("success");
                            }else{
                                alert("error");
                            }
                        }
                    }
                    req.send(null);
                }
            }

               function post(){
                var req = createXMLHTTPRequest();
                if(req){
                    req.open("POST", "http://test.com/", true);
                    req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;");   
                    req.send("keywords=手机");
                    req.onreadystatechange = function(){
                        if(req.readyState == 4){
                            if(req.status == 200){
                                alert("success");
                            }else{
                                alert("error");
                            }
                        }
                    }
                }
            }

View Code

  PS:

  readyState有五种状态:

  0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法;
  1 (载入):已经调用open() 方法,但尚未发送请求;
  2 (载入完成): 请求已经发送完成;
  3 (交互):可以接收到部分响应数据;
  4 (完成):已经接收到了全部数据,并且连接已经关闭。
如此一来,你应该就能明白readyState的功能,而status实际是一种辅状态判断,只是status更多是服务器方的状态判断。关于status,由于它的状态有几十种,我只列出平时常用的几种:
  100——客户必须继续发出请求
  101——客户要求服务器根据请求转换HTTP协议版本
  200——成功
  201——提示知道新文件的URL
  300——请求的资源可在多处得到
  301——删除请求数据
  404——没有发现文件、查询或URl
  500——服务器产生内部错误

六:Json 与 Jsonp的区别

图片 5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
     <title>Untitled Page</title>
      <script type="text/javascript" src=jquery.min.js"></script>
      <script type="text/javascript">
     jQuery(document).ready(function(){ 
        $.ajax({
             type: "get",
             async: false,
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
             success: function(json){
                 alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
             },
             error: function(){
                 alert('fail');
             }
         });
     });
     </script>
     </head>
  <body>
  </body>
 </html>

View Code

说明:

1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。

总而言之,jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变着一点!

 

 

 

PS:暂时先写到这里,后期会有继续的跟进。

 

 

 

 

 

 

 1 $.ajax({ 2     url:'http://www.mysite.com/demo.do',  // 跨域URL 3     type:'get', 4     async:false, 5     dataType:'jsonp', 6     jsonp: 'jsoncallback', //默认callback 7     data: mydata,  8     time:5000, 9     beforeSend:function(){10      //jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了11     },12     success:function{13         //客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数 14        if(json.actionErrors.length!=0){ 15             alert(json.actionErrors); 16         } 17         genDynamicContent(qsData,type,json); 18     },19     complete: function(XMLHttpRequest, textStatus){ 20           $.unblockUI({ fadeOut: 10 }); 21     }, 22     error: function{ 23           //jsonp 方式此方法不被触发24           //请求出错处理 25           alert("请求出错(请检查相关度网络状况.)"); 26      } 27     28 });

 

很久没写JS了,或者说自从工作以来都没怎么写过JS,最近在开发要用到JS,瞬间懵逼了. 立即去菜...

View Code

方式2:使用JQuerygetJSO方式

图片 6图片 7

1 1   $.getJSON("请求的路径=?参数", 2 2         function{ //返回的结果3 3           if(json.属性名==值){ 4 4             // 执行代码 5 5         } 6 6  });

View Code

Jsonp的基本原理就是:动态的添加一个一致的。Jsonp是一种脚本的注入(Script InJection)行为,所以,它会有一定的安全性的问题。

同时需要注意Jsonp是不支持post跨域请求的。

本文由编程发布,转载请注明来源:解决ajax跨域问题,程序员的成长之路JQuery篇