天天看點
傳回

0基礎入門Ajax1.入門2js使用封裝的ajax3.jq中ajax的使用4擷取api資料5跨域

1.入門

需要掌握

1.資料的轉換parse()、stringify()	stringify(json,['name','age'])
2.建立流程、封裝流程
3.會用AJAX

什麼是 AJAX？

  • AJAX = Asynchronous JavaScript And XML.
  • 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

  • ajax可以異步和伺服器發送和接收資料
  • 我覺得學好AJAX需要直到怎麼搞懂怎麼擷取資料和渲染到頁面上
  • AJAX 并非程式設計語言。
  • AJAX 僅僅組合了：
    • 浏覽器内建的 XMLHttpRequest 對象（從 web 伺服器請求資料）
    • JavaScript 和 HTML DOM（顯示或使用資料）
  • Ajax 是一個令人誤導的名稱。Ajax 應用程式可能使用 XML 來傳輸資料，但将資料作為純文字或 JSON 文本傳輸也同樣常見。
  • Ajax 允許通過與場景後面的 Web 伺服器交換資料來異步更新網頁。這意味着可以更新網頁的部分，而不需要重新加載整個頁面。

1.1AJAX 介紹

  • AJAX 不是一種新的程式設計語言，而是一種用于建立更好更快以及互動性更強的 Web 應用程式的技術。
  • 通過 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 對象來直接與伺服器進行通信。通過這個對象，您的 JavaScript 可在不重載頁面的情況與 Web 伺服器交換資料。
  • AJAX 在浏覽器與 Web 伺服器之間使用

    異步資料

     傳輸（HTTP 請求），這樣就可

    使網頁從伺服器請求少量的資訊

     ，而不是整個頁面。
  • AJAX 可使網際網路應用程式更小、更快，更友好。
  • AJAX 是一種獨立于 Web 伺服器軟體的浏覽器技術。

1.2同步和異步

​ 同步：

一個人隻能同時做一件事情

，程式1調用程式2時，程式1停止,

必須程式2結束了，程式1才能執行

​ 異步：多件事情可以

同時進行

。（比如animate,注冊時的提示）

​

1.3ajax優點

​

局部重新整理

，比如留言闆，不用reload了，就用ajax來顯示留言内容

1.4json資料的轉換

​ 他是一個數組

​ 資料庫裡面拿出來的就是json字元串

1.Json就是數組對象(記住)
2.json字元串,單引号嵌套雙引号
3.将json字元串轉換為數組
	JSON.parse() 推薦
	eval()	不推薦
4.JSON.stringify(obj,arr)将數組或則對象轉化為字元串    第二個參數為過濾字段(數組),裡面寫需要的字段，相當于篩選字段
	比如：JSON.stringify(json,['name','age'])
           
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            // 數組
            var arr=[1,2,3,4,5];
            console.log(arr)

            // 對象
            var obj={
                title:'早飯',
                food:'雞蛋',
                sex:'男'
            }

            console.log(obj)

            // Json就是數組對象(記住)
            var json=[
                {
                    name:'張三',
                    age:18,
                    sex:'男'
                },
                {
                    name:'李四',
                    age:18,
                    sex:'男'
                },
                {
                    name:'王霸',
                    age:20,
                    sex:'男'
                }
            ]

            // json字元串,單引号嵌套雙引号
            var jsonStr='[{"name":"張三","age":"18","sex":"男"},{"name":"李四","age":"19","sex":"男"},{"name":"王霸","age":"20","sex":"男"}]'

            // JSON.parse()将json字元串轉換為數組		推薦
            var arr=JSON.parse(jsonStr);
            console.log(arr)

            // 方法二:eval()	不推薦
            var arr=eval(jsonStr);
            console.log(arr)//json字元串轉換為數組

            // 方法三JSON.stringify(obj,arr)将數組轉化為字元串
            var str=JSON.stringify(json)
            console.log(str)//[{"name":"張三","age":18,"sex":"男"},{"name":"李四","age":18,"sex":"男"},{"name":"王霸","age":20,"sex":"男"}]

            // 第二個參數為過濾字段,裡面寫需要的字段，相當于篩選字段
            var str=JSON.stringify(json,['name','age'])
            console.log(str)//[{"name":"張三","age":18},{"name":"李四","age":18},{"name":"王霸","age":20}]
        </script>
    </body>
</html>

0基礎入門Ajax1.入門2js使用封裝的ajax3.jq中ajax的使用4擷取api資料5跨域

1.5ajax使用Http

​

3個優點

：可以請求、可以得到資料、得到資料還不用重新整理頁面

​ 通過AJAX,您的js可以受用js的XMLHttpRequest對象之間與伺服器通信

1.6建立Ajax 

1.判斷是支援哪種浏覽器  
2.根據不同浏覽器進行建立(裡面要寫try..catch)
3.最後去調用就行
           
1.window.ActiveXObject(版本号)
2.window.XMLHttpRequest()括号裡面沒東西
3.建立ajax
	ajax=new XMLHttpRequest();普通浏覽器建立
	ajax=new ActiveXObject(version[i])；IE浏覽器建立，需要考慮版本号
	try...catch 可以測試代碼中的錯誤。try 部分包含需要運作的代碼，而 catch 部分包含錯誤發生時運作的代碼。
           
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button>發送資料</button>
        <script>
            // 建立ajax對象
            function Ajax(){
                var ajax;
                // alert(window.XMLHttpRequest)
                // 判斷浏覽器是否支援window.XMLHttpRequest對象
                if(window.XMLHttpRequest){
                    try{
                        //在此運作代碼
                        ajax=new XMLHttpRequest();
                    }catch(err){
                        //處理錯誤,error代表紅色字型
                        console.error(err)
                    }
                }
                // 支援IE,window.ActiveXObject(版本号)
                else if(window.ActiveXObject){
                    try{
                        var version=[
                            'Microsoft.XMLHTTP',
                            'MSXML.XMLHTTP',
                            'MSXML2.XMLHTTP.3.0',
                            'Msxml2.XMLHTTP.4.0',
                            'Msxml2.XMLHTTP.5.0',
                            'Msxml2.XMLHTTP.6.0',
                            'Msxml2.XMLHTTP.7.0'
                        ];
                        for(var i=0;i<version.length;i++){
                            ajax=new ActiveXObject(version[i])
                        }
                    }catch(err){
                        console.error(err)
                    }
                }

                // 傳回結果
                return ajax;
            }


            var btn=document.querySelector('button')
            btn.onclick=function(){
                // 調用
                var ajax=Ajax();
                console.log(ajax)//XMLHttpRequest {onreadystatechange: null, readyState: 0, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
            }
        </script>
    </body>
</html>
0基礎入門Ajax1.入門2js使用封裝的ajax3.jq中ajax的使用4擷取api資料5跨域

1.7Ajax請求伺服器 

1.AJAX向伺服器發送請求的XMlHttpRequest方法
	open(方法類型,url位址,是否是異步處理寫true)  比如：open(get,'get.php',true)
	ajax.open('GET','getData.php?name=zhangsan',true);用來給後端發送資料
	
	send()給伺服器發送請求，get請求必須有send()方法,send()内寫為null   	比如:send(null)

1.8 XMLHttpRequest對象 

1.onreadystatechange 屬性:存有處理伺服器響應的函數，每當 readyState 改變時，onreadystatechange 函數就會被執行。

2.responseText 屬性：擷取由伺服器傳回的資料

3. readyState 屬性

readyState

屬性可能的值

狀态 描述
請求未初始化（在調用 open() 之前）
1 請求已提出（調用 send() 之前）
2 請求已發送（這裡通常可以從響應得到内容頭部）
3 請求進行中（響應中通常有部分資料可用，但是伺服器還沒有完成響應）
4 請求已完成（可以通路伺服器響應并使用它）

php裡面的方法

1.json_encode()将數組轉換為json字元串
 2.echo是輸出的意思
 3.$_get是擷取get方式送出的前台資料，$_POST是擷取post方法送出的前台資料

1.9互動例子

前台和背景如何傳值的

前台傳給背景
	1.get方法通過open()的url給背景台
	2.post方法通過send（）方法傳給背景

前台擷取hou值:
	1.通過responseText取得值

方式一:get方法

$_GET擷取get方法傳的值

​

思路

：1.先放到那個軟體的www目錄，然後再複制到hbuilder來

​ 2.請求 ，

get請求必須有send()方法,send内寫null

​ 3.然後再觸發

onreadystatechange

方法

​ 4.必須滿足

readyState==4&& ajax.status==200

才能最後從後端擷取資料

​ 5.前端向後端發送資料隻需要

ajax.open('GET','getData.php?name=zhangsan',true);

​ 6.再後端用echo json_encode($_GET);轉為json字元串

​ 7.前端用JSON.parse()轉為數組就行了

ajax使用步驟或則封裝步驟

 (記住) 

1.建立ajax對象   XMLHttpRequest		或則IE采用ActiveXObject
2.發起HTTP請求	get/post	open() send() setRequestHeader()
3.監聽狀态改變	onreadystatechange監聽readystate==4和status==200
4.接受伺服器的響應資料	responseText
5.渲染頁面
           
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button type="button">發送資料</button>
        <script type="text/javascript">

            // 建立ajax對象
            function Ajax(){
                var ajax;
                // alert(window.XMLHttpRequest)

                // 判斷浏覽器是否支援window.XMLHttpRequest
                if(window.XMLHttpRequest){
                    try{
                        // 建立的代碼
                        ajax=new XMLHttpRequest();
                    }catch(err){
                        //TODO handle the exception
                        console.error(err)
                    }
                }
                // 支援IE浏覽器，還需要考慮版本
                else if(window.ActiveXObject){
                    try{
                        var version=[
                            'Microsoft.XMLHTTP',
                            'MSXML.XMLHTTP',
                            'MSXML2.XMLHTTP.3.0',
                            'Msxml2.XMLHTTP.4.0',
                            'Msxml2.XMLHTTP.5.0',
                            'Msxml2.XMLHTTP.6.0',
                            'Msxml2.XMLHTTP.7.0'
                        ];
                        for(var i=0;i<version.length;i++){
                            ajax=new ActiveXObject();
                        }
                    }catch(err){
                        //TODO handle the exception
                        console.error(err)
                    }
                }
                // 傳回ajax
                return ajax;
            }

            var btn=document.querySelector('button');
            btn.onclick=function(){
                var ajax=Ajax();
                // console.log(ajax)

                ajax.onreadystatechange=function(){
                    // 判斷是否請求成功
                    if(ajax.readyState==4&&ajax.status==200){
                        console.log('請求成功')
						// responseText為擷取伺服器響應的資料
						console.log(ajax.responseText)
						var data=JSON.parse(ajax.responseText)
						console.log(data)
                    }
                }

                // get請求
                // open(請求類型，url位址,true)
                // send()發送請求資料到伺服器
                ajax.open('GET','getData.php?name=zhangsan',true);
                // get請求必須有send()方法,send内寫null
                ajax.send(null)
            }
        </script>
    </body>
</html>

           
<?php
	// 擷取get請求傳遞的資料
	// var_dump($_GET);
	
	// 後端隻要有輸出則為響應的資料
	echo '1111';
	// echo '伺服器端資料';
	
	// json_encode()将數組轉換為json字元串
	// $_GET擷取get傳的值
	echo json_encode($_GET);
?>
0基礎入門Ajax1.入門2js使用封裝的ajax3.jq中ajax的使用4擷取api資料5跨域

方式二:post

1.請求頭的content-type四種類型

​ https://www.cnblogs.com/webDojo/p/9038765.html

1.content-type:application/json    表示我們要傳json字元串
2.application/x-www-form-urlencoded 	表示我們要傳鍵值對

2.封裝和請求過程和get

大緻一樣

3.與get的

差別

 
1.send()前面有請求頭			ajax.setRequestHeader('content-type','application/x-www-form-urlencoded');//傳鍵值對
2.send()裡面寫資料		   ajax.send('name=zhangsan&age=18')
           
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button type="button">發送資料</button>
        <script type="text/javascript">

            // 建立ajax對象
            function Ajax(){
                var ajax;
                // alert(window.XMLHttpRequest)

                // 判斷浏覽器是否支援window.XMLHttpRequest
                if(window.XMLHttpRequest){
                    try{
                        // 建立的代碼
                        ajax=new XMLHttpRequest();
                    }catch(err){
                        //TODO handle the exception
                        console.error(err)
                    }
                }
                // 支援IE浏覽器，還需要考慮版本
                else if(window.ActiveXObject){
                    try{
                        var version=[
                            'Microsoft.XMLHTTP',
                            'MSXML.XMLHTTP',
                            'MSXML2.XMLHTTP.3.0',
                            'Msxml2.XMLHTTP.4.0',
                            'Msxml2.XMLHTTP.5.0',
                            'Msxml2.XMLHTTP.6.0',
                            'Msxml2.XMLHTTP.7.0'
                        ];
                        for(var i=0;i<version.length;i++){
                            ajax=new ActiveXObject();
                        }
                    }catch(err){
                        //TODO handle the exception
                        console.error(err)
                    }
                }
                // 傳回ajax
                return ajax;
            }

            var btn=document.querySelector('button');
            btn.onclick=function(){
                var ajax=Ajax();
                // console.log(ajax)

                ajax.onreadystatechange=function(){
                    // 判斷是否請求成功
                    if(ajax.readyState==4&&ajax.status==200){
                        console.log('請求成功')
                        // responseText為擷取伺服器響應的資料
                        console.log(ajax.responseText)//
                        // var data=JSON.parse(ajax.responseText)
                        // console.log(data)
                    }
                }

                // post請求
                ajax.open('POST','postData.php',true)


                // 鍵值對的
                // 設定請求頭
                ajax.setRequestHeader('content-type','application/x-www-form-urlencoded');//傳鍵值對
                ajax.send('name=zhangsan&age=18')

                // json格式(好像得不到值)
                // ajax.setRequestHeader('content-type','application/json ')//傳json字元串
                // var data={name:'xuge',age:'21'};
                // ajax.send(JSON.stringify(data))
            }
        </script>
    </body>
</html>

           
<?php
	echo 222;
	echo json_encode($_POST)
?>
0基礎入門Ajax1.入門2js使用封裝的ajax3.jq中ajax的使用4擷取api資料5跨域

1.10狀态碼

常見http狀态碼(status)

https://www.cnblogs.com/xflonga/p/9368993.html

200
3xx:
	301
	302
	303
	304	not modified
4xx:用戶端錯誤
	400
	401
	402
	404沒有找到
5xx:伺服器錯誤
	500伺服器響應錯誤(記住)

2js使用封裝的ajax 

思路：
	1. 建立ajax對象
		var ajax=new Ajax();
	2.用get(url,sendContent,function(data){})或則post(url,sendContent,function(){})接受伺服器的資料
		data為伺服器的響應的資料
           
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button>發送資料</button>
        <script src="ajax.js"></script>
        <script>
            var btn=document.querySelector('button');
            btn.onclick=function(){
                // 建立ajax對象
                var ajax=new Ajax();
                console.log(ajax)

                //get(url,sendContent,function(data){}),//data為形參 為伺服器響應的資料
                ajax.get('getData.php','name=zhangsan&sex=0',function(data){
                    console.log(data)//{"name":"zhangsan","sex":"0"}
                })

                // ajax.get('getData.php',{name:'zs',age:18},function(data){
                // 	console.log(data)
                // })


                // post(url,sendContent,function(){})
                // ajax.post('postData.php','name=lisi&age=19',function(data){
                // 	console.log(JSON.parse(data))	
                // })

                // ajax.post('postData.php',{name:'lisi',age:20},function(data){
                // 	console.log(data)
                // })
            }
        </script>
    </body>
</html>
0基礎入門Ajax1.入門2js使用封裝的ajax3.jq中ajax的使用4擷取api資料5跨域

2.1擷取天氣資料例子 

思路:1.先大概布局
2.擷取php的資料
3.把資料處理了顯示再界面

4.把值渲染到頁面上:拼接法
	 $('ul').append('<li><div>'+forecast[i].date+'</div><div>'+forecast[i].fengli+'</div><div>'+forecast[i].fengxiang+'</div><div>'+forecast[i].high+'</div><div>'+forecast[i].low+'</div><div>'+forecast[i].type+'</div></li>')
           
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div.wrap{
                width: 1400px;
                height: 400px;

            }
            ul{
                margin-top:40px;
                width: 1400px;
                height: 400px;

                display: flex;
                justify-content: space-between;
            }
            li{
                width: 200px;
                height: 240px;
                list-style: none;

                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
            }

        </style>
    </head>
    <body>
        <button type="button">顯示天氣</button>
        <div class="wrap">
            <h2>今日天氣<span></span></h2>
            <p></p>
            <ul>
                <!-- <li>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</li>
<li>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</li>
<li>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</li>
<li>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</li>
<li>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</li>
<li>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</li> -->
            </ul>
        </div>
        <script src="ajax.js"></script>
        <script src="jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            var btn=document.querySelector('button');

            btn.onclick=function(){
                // 建立ajax對象
                var xhr=new Ajax();

                //用post方法拿到天氣資料,sendContent這裡不需要發送資料
                xhr.post('wearth.json','',function(wearthData){
                    console.log(JSON.parse(wearthData))
                    $('h2>span').text(JSON.parse(wearthData).data.wendu+'°C')
                    $('p').text(JSON.parse(wearthData).data.ganmao)

                    var forecast=JSON.parse(wearthData).data.forecast;
                    for(var i=0;i<forecast.length;i++){
                        // 添加li并向裡面添加未來天氣
                        $('ul').append('<li><div>'+forecast[i].date+'</div><div>'+forecast[i].fengli+'</div><div>'+forecast[i].fengxiang+'</div><div>'+forecast[i].high+'</div><div>'+forecast[i].low+'</div><div>'+forecast[i].type+'</div></li>')
                    }
                })
            }


        </script>
    </body>
</html>
0基礎入門Ajax1.入門2js使用封裝的ajax3.jq中ajax的使用4擷取api資料5跨域

3.jq中ajax的使用 

1.url:'',//請求的url位址

2.type:'get',//請求的方式 get或則post

3.data:{},//發送給伺服器的資料,自動被轉為字元串

4.async:true,//是否異步發送,可以省略,預設true

5.dataType:'json',//伺服器傳回的資料類型	jsonp常用作跨域

6.success:function(werath){//成功時傳回伺服器的資料,傳回了一個對象

}

7.error:function(err){//失敗時觸發

}
           
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="zuoye/jquery-3.5.1.min.js"></script>
        <script>
            $(function(){
                $.ajax({
                    url:'wearth.json',//請求的url位址
                    type:'get',//請求的方式 get或則post
                    data:{},//發送給伺服器的資料,自動被轉為字元串
                    async:true,//是否異步發送,可以省略,預設true
                    dataType:'json',//伺服器傳回的資料類型	jsonp常用作跨域
                    success:function(werath){//成功時傳回伺服器的資料,傳回了一個對象
                        console.log(werath)
                    },
                    error:function(err){//失敗時觸發
                        console.error(err)
                    }

                })
            })
        </script>
    </body>
</html>
0基礎入門Ajax1.入門2js使用封裝的ajax3.jq中ajax的使用4擷取api資料5跨域

4擷取api資料 

思路:
1.找到免費的api,複制php
2.把wam那個軟體的php拓展打開
3.在前端拿到資料，用append（）渲染到頁面
           
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        </style>
    </head>
    <body>
        <h2>驗證碼</h2>
        <ul>
        </ul>
        <script src="jquery-3.5.1.min.js"></script>
        <script>
            // 出現同源政策錯誤 ：浏覽器會有一個保護機制，禁止去通路不同域的内容  
            $(function(){
                $.ajax({
                    url:'zhiwu.php',
                    type:'post',
                    data:{},
                    success:function(data){
                        console.log(JSON.parse(JSON.parse(data)).result.fileName)
                        var pic=JSON.parse(JSON.parse(data)).result.fileName;
                        $('ul').append('<img src='+pic+'>')
                    },
                    error:function(error){
                        console.error(error)
                    }
                })
            })
        </script>
    </body>
</html>

           
<?php
    $method = "POST";
$url = "https://api.apishop.net/common/verify/getSimpleVerifyImage";
$headers = NULL;
$params = array(
    "apiKey"=>"KPd8ixXe9c15ecfdb47c425fcd0b8293595ca0017402c86",
    "codeType"=>"6"
);
$result = apishop_curl($method, $url, $headers, $params);
If ($result) {
    $body = json_decode($result["body"], TRUE);
    $status_code = $body["statusCode"];
    If ($status_code == "000000") {
        //狀态碼為000000, 說明請求成功
        echo json_encode($result["body"]);
    } else {
        //狀态碼非000000, 說明請求失敗
        echo "請求失敗：" . $result["body"];
    }
} else {
    //傳回内容異常，發送請求失敗，以下可根據業務邏輯自行修改
    echo "發送請求失敗";
}

/**
  * 轉發請求到目的主機
  * @param $method string 請求方法
  * @param $URL string 請求位址
  * @param null $headers 請求頭
  * @param null $param 請求參數
  * @return array|bool
  */
function apishop_curl(&$method, &$URL, &$headers = NULL, &$param = NULL)
{
    // 初始化請求
    $require = curl_init($URL);
    // 判斷是否HTTPS
    $isHttps = substr($URL, 0, 8) == "https://" ? TRUE : FALSE;
    // 設定請求方式
    switch ($method) {
        case "GET":
            curl_setopt($require, CURLOPT_CUSTOMREQUEST, "GET");
            break;
        case "POST":
            curl_setopt($require, CURLOPT_CUSTOMREQUEST, "POST");
            break;
        default:
            return FALSE;
    }
    if ($param) {
        curl_setopt($require, CURLOPT_POSTFIELDS, $param);
    }
    if ($isHttps) {
        // 跳過證書檢查
        curl_setopt($require, CURLOPT_SSL_VERIFYPEER, FALSE);
        // 檢查證書中是否設定域名
        curl_setopt($require, CURLOPT_SSL_VERIFYHOST, 2);
    }
    if ($headers) {
        // 設定請求頭
        curl_setopt($require, CURLOPT_HTTPHEADER, $headers);
    }
    // 傳回結果不直接輸出
    curl_setopt($require, CURLOPT_RETURNTRANSFER, TRUE);
    // 重定向
    curl_setopt($require, CURLOPT_FOLLOWLOCATION, TRUE);
    // 把傳回頭包含再輸出中
    curl_setopt($require, CURLOPT_HEADER, TRUE);
    // 發送請求
    $response = curl_exec($require);
    // 擷取頭部長度
    $headerSize = curl_getinfo($require, CURLINFO_HEADER_SIZE);
    // 關閉請求
    curl_close($require);
    if ($response) {
        // 傳回頭部字元串
        $header = substr($response, 0, $headerSize);
        // 傳回體
        $body = substr($response, $headerSize);
        // 過濾隐藏非法字元
        $bodyTemp = json_encode(array(
            0 => $body
        ));
        $bodyTemp = str_replace("", "", $bodyTemp);
        $bodyTemp = json_decode($bodyTemp, TRUE);
        $body = trim($bodyTemp[0]);
        // 将傳回結果頭部轉成數組
        $respondHeaders = array();
        $header_rows = array_filter(explode(PHP_EOL, $header), "trim");
        foreach ($header_rows as $row) {
            $keylen = strpos($row, ":");
            if ($keylen) {
                $respondHeaders[] = array(
                    "key" => substr($row, 0, $keylen),
                    "value" => trim(substr($row, $keylen + 1))
                );
            }
        }
        return array(
            "headers" => $respondHeaders,
            "body" => $body
        );
    } else {
        return FALSE;
    }
}
?>
0基礎入門Ajax1.入門2js使用封裝的ajax3.jq中ajax的使用4擷取api資料5跨域

5跨域

5.1概念：從一個域通路另外一個域的内容

  • 不同域

     的定義:協定 域名(子域名(主域名之間還有東西)、主域名) 端口号
  • 隻要協定 主域名 子域名 端口号有一個不同就是不同域

http與https差別

  • http:www.baidu.com與http:www.baidu.sa.com不同域
  • http預設通過

    明文

     傳輸 端口号

    80
  • https通過

    ssl/tls

     進行加密傳輸、端口号為

    443
  • 主域名www.taobao.com
  • 子域名:從主域名分出來的一小塊 比如： www.taobao.sasa.com
  • https更安全

5.2同源政策

  • 概念：當浏覽器通路存在跨域時，浏覽器會進行限制，這叫同源測略
  • 出現情況:目前的web的url和通路的url在不同域

5.3跨域的方式：

1.原生js通過動态建立script标簽，擷取資料 

思路:
1.建立一個script标簽
 2.在head标簽裡面添加script标簽
 3.設定scr
 	tag.src='請求的url位址?apiKey=您的apiKey&page=參數1&pageSize=參數2&keyword=參數3&callback=callbackfun'
4.定義回調函數傳回伺服器的值
// 回調函數傳回一個資料
function callbackfun(data){
	console.log(data)
}
           
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button type="button">原生js動态跨域</button>
        <script src="jquery-3.5.1.min.js"></script>
        <script>

            var btn=document.querySelector('button');
            btn.onclick=function(){
                // 1.建立script标簽
                var oscript=document.createElement('script');
                // 2.加入head标簽
                var head=document.querySelector('head');
                head.appendChild(oscript)
                // 3.設定src
                oscript.src='http://v.juhe.cn/joke/content/list.php?key=c41ad3d93efadae9e2032a422a2d3acf&page=2&pagesize=10&sort=asc&time=1418745237&callback=callbackfun'
            }

            // 4.定義回調函數傳回伺服器的值
            function callbackfun(data){
                console.log(data)
            }
        </script>
    </body>
</html>
0基礎入門Ajax1.入門2js使用封裝的ajax3.jq中ajax的使用4擷取api資料5跨域

2.jQuery通過jsonp跨域 

關鍵點
1.定義伺服器傳回類型為jsonp
	dataType:'jsonp',
2.定義回調函數
	jsonp:'callback',
           
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button>jQuery跨域</button>
        <script src="jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $('button').click(function(){
                    $.ajax({
                        url:'http://v.juhe.cn/joke/content/list.php',
                        type:'get',
                        data:{
                            key:'c41ad3d93efadae9e2032a422a2d3acf',
                            page:1,
                            pagesize:10,
                            sort:'asc',
                            time:1418745237
                        },
                        // 1.定義伺服器傳回的類型
                        dataType:'jsonp',
                        // 2.定義回調函數
                        jsonp:'callback',
                        success:function(data){
                            console.log(data)
                        },
                        error:function(err){
                            console.error(err)
                        }
                    })
                })
            })
        </script>
    </body>
</html>

y-3.5.1.min.js">

![image-20210902111713433](https://img-blog.csdnimg.cn/img_convert/bf9d5c8f9d3ef516674c08409c96b2c3.png)
ajax基礎 ajax
上一篇: ajax的readystate為3,ajax,javascript_ajax調用後readyState的值為2，ajax,javascript - phpStudy
下一篇: Spring MVC -- Spring Tool Suite和Maven（安裝Tomcat、JDK）

繼續閱讀