jquery，ajax請(qǐng)求并處理跨域

2020-4-16    前端達(dá)人

自己寫了段jquery的ajax請(qǐng)求，并輸出到頁面的表格中 



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery實(shí)現(xiàn)JSONP</title>
</head>
<body>
<div id="mydiv">
    <button id="btn">點(diǎn)擊</button>

    <div id="container">
        <!--每個(gè)條目-->
        <div class="item">
            <div class="item-title">作業(yè)名字</div>
            <div>
                <span class="item-content">創(chuàng)建時(shí)間</span>
                <span class="item-content">發(fā)布老師</span>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){

            $.ajax({
                async : true,
                url : "xxxxxxxxxxx",
                type : "GET",
                dataType : "json", // 返回的數(shù)據(jù)類型，設(shè)置為JSONP方式
                jsonp : 'callback', //指定一個(gè)查詢參數(shù)名稱來覆蓋默認(rèn)的 jsonp 回調(diào)參數(shù)名 callback
                jsonpCallback: 'handleResponse', //設(shè)置回調(diào)函數(shù)名
                data : {
                    q : "javascript",
                    count : 1,
                    city:'北京'
                },
                success: function(response, status, xhr){
                    // console.log('狀態(tài)為：' + status + ',狀態(tài)是：' + xhr.statusText);
                    // console.log(response);

                    var group = response.hourly_forecast;

                    console.log(group,111111111)
                    console.log(group.length,222222222222)

                    //拼接字符串
                    var str = '';
                    //對(duì)數(shù)據(jù)做遍歷，拼接到頁面顯示
                    for(var i=0;i<group.length;i++){
                        str += '<div class="item">'+
                                '<div class="item-title">'+ group[i].date +'</div>'+
                                '<div>'+
                                '<span class="item-content">'+ group[i].hum +'</span>'+
                                '<span class="item-content">'+ group[i].pop +'</span>'+
                                '</div>'+
                                '</div>';
                    }
                    //放入頁面的容器顯示
                    $('#container').html(str);

                }
            });
        });
    });

    function handleResponse(response){
        // 對(duì)response數(shù)據(jù)進(jìn)行操作代碼
        alert("jsonp success!");
    }
</script>
</html>


jquery中ajax處理跨域的三大方式


一、處理跨域的方式：

1.代理

2.XHR2

HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已經(jīng)實(shí)現(xiàn)了跨域訪問。但ie10以下不支持

只需要在服務(wù)端填上響應(yīng)頭： 

header("Access-Control-Allow-Origin:*");

/*星號(hào)表示所有的域都可以接受，*/

header("Access-Control-Allow-Methods:GET,POST");


        

            3.jsonP
        


        

            原理：
        


        

             ajax本身是不可以跨域的，
通過產(chǎn)生一個(gè)script標(biāo)簽來實(shí)現(xiàn)跨域。因?yàn)閟cript標(biāo)簽的src屬性是沒有跨域的限制的。
        


        

            其實(shí)設(shè)置了dataType: 'jsonp'后，$.ajax方法就和ajax XmlHttpRequest沒什么關(guān)系了，取而代之的則是JSONP協(xié)議。JSONP是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過javascript callback的形式實(shí)現(xiàn)跨域訪問。
        


        

             ajax的跨域?qū)懛ǎ?        


        

            （其余寫法和不跨域的一樣）：
        


        

            比如 
        



    





    


				

				
分享本文至：     
				
			

		

		
		
	




    
  

    
日歷

    

        

        
    

  

    
    

      
鏈接

      
    
                

    

    

      
個(gè)人資料

      
    

    

      
存檔