ajax全套和跨域

時間  2020-03-24
標籤 ajax 全套 欄目 Ajax 简体版
原文   原文鏈接

原生ajax

Ajax主要就是使用 【XmlHttpRequest】對象來完成請求的操做，該對象在主流瀏覽器中均存在(除早起的IE)，Ajax首次出現IE5.5中存在（ActiveX控件）。
XmlHttpRequest對象介紹
XmlHttpRequest對象的主要方法：html

a. void open(String method,String url,Boolen async)
   用於建立請求
    
   參數：
       method： 請求方式（字符串類型），如：POST、GET、DELETE...
       url：    要請求的地址（字符串類型）
       async：  是否異步（布爾類型）
 
b. void send(String body)
    用於發送請求
 
    參數：
        body： 要發送的數據（字符串類型）
 
c. void setRequestHeader(String header,String value)
    用於設置請求頭
 
    參數：
        header： 請求頭的key（字符串類型）
        vlaue：  請求頭的value（字符串類型）
 
d. String getAllResponseHeaders()
    獲取全部響應頭
 
    返回值：
        響應頭數據（字符串類型）
 
e. String getResponseHeader(String header)
    獲取響應頭中指定header的值
 
    參數：
        header： 響應頭的key（字符串類型）
 
    返回值：
        響應頭中指定的header對應的值
 
f. void abort()

XmlHttpRequest對象的主要屬性：前端

a. Number readyState
   狀態值（整數）
 
   詳細：
      0-未初始化，還沒有調用open()方法；
      1-啓動，調用了open()方法，未調用send()方法；
      2-發送，已經調用了send()方法，未接收到響應；
      3-接收，已經接收到部分響應數據；
      4-完成，已經接收到所有響應數據；
 
b. Function onreadystatechange
   當readyState的值改變時自動觸發執行其對應的函數（回調函數）
 
c. String responseText
   服務器返回的數據（字符串類型）
 
d. XmlDocument responseXML
   服務器返回的數據（Xml對象）
 
e. Number states
   狀態碼（整數），如：200、404...
 
f. String statesText
   狀態文本（字符串），如：OK、NotFound...

原生ajax實例jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>首頁</h1>
    <input type="text" id="i1" />
    +
    <input type="text" id="i2" />
    =
    <input type="text" id="i3" />

    <input type="button" id="btn1" value="jQuery Ajax" onclick="add1();" />
    <input type="button" id="btn2" value="原生Ajax" onclick="add2();" />

    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        function add1(){
            $.ajax({
                url: '/add1/',
                type: 'POST',
                data: {'i1': $('#i1').val(),'i2': $('#i2').val()},
                success:function(arg){
                    $('#i3').val(arg);
                }
            })
        }

        function add2(){
            /*
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    alert(xhr.responseText);
                }
            };
            xhr.open('GET','/add2/?i1=12&i2=19');
            xhr.send();
            */
            var xhr = new XMLHttpRequest();
            // 定義回調函數
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    alert(xhr.responseText);
                }
            };
            // 指定鏈接方式和地址----文件方式
            xhr.open('POST','/add2/');
            // 以post提交數據時，設置請求頭，後端纔會解析到request.POST
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            // 發送請求
            xhr.send("i1=12;i2=19");
        }
    </script>
</body>
</html>

僞ajax

因爲HTML標籤的iframe標籤具備局部加載內容的特性，因此可使用其來僞造Ajax請求。
後端web

def fake_ajax(request):
    if request.method == "GET":
        return render(request, "fakeajax.html")
    else:
        a1 = request.POST.get("user")
        print(request.POST)
        return HttpResponse("success")

前端ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="f1" method="POST" action="/fake_ajax/" target="ifr">
	<input type="text" name="user">
	<iframe id="ifr" name="ifr"></iframe>
	<input type="button" value="提交" onclick="btn();">

</form>

<script>
	function btn(){
		document.getElementById("ifr").onload = loadifram;
		document.getElementById("f1").submit();
	}
	function loadifram(){
		// 經過contentWindow獲取iframe下的文檔對象，拿到返回值
		var content = document.getElementById("ifr").contentWindow.document.body.innerText;
		alert(content); // 打印返回值
	}

</script>
</body>
</html>

ajax上傳文件json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<h1>ajax上傳文件（jquery）</h1>
		<input type="file" id="fafafa">
		<input type="button" value="上傳" onclick="upload()">
		<div id="env"></div>
</body>
<script src="/static/jquery-3.2.1.js"></script>
<script>
	function upload(){
		var formdata = new FormData(); //FormData表單對象，使用鍵值對模擬form表單提交
		formdata.append("表單的鍵啊","表單的值啊")
		var file_obj = $("#fafafa")[0].files[0] // jquery拿文件對象
		formdata.append('fafafa',file_obj);
		
		$.ajax({
			url: "/upload/",
			type: "POST",
			data: formdata,
			contentType: false,
            processData: false,
			success:function(data){
				// console.log(data);
				var ele = $("<img>");
				ele.prop("src","/"+data);
				$("#env").append(ele);
			}
		})
	}
</script>
</html>

後端後端

import os
def upload(request):
    if request.method =='GET':
        return render(request, "upload.html")
    else:
        # 拿到文件對象
        file_obj = request.FILES.get("fafafa")
        # static\filename
        file_path = os.path.join("static", file_obj.name)
        # 寫入文件
        with open(file_path, "wb") as f:
            for chunk in file_obj.chunks():
                f.write(chunk)
        return HttpResponse(file_path)

僞ajax上傳圖片
前端代碼以下，後端代碼見上面。跨域

<body>
	<h1>僞ajax上傳文件</h1>
	<form id="f1" method="POST" action="/upload/" target="ifr" enctype="multipart/form-data">
		<iframe id="ifr" name="ifr"></iframe>
		<input type="file" name=fafafa>
		<input type="button" value="上傳" onclick="upload3()">
	</form>
</body>
<script>  
	function upload3(){
		document.getElementById("ifr").onload=loadIframe;
		document.getElementById("f1").submit();
	}
	function loadIframe(){
		var content = document.getElementById("ifr").contentWindow.document.body.innerText;
		var ele = $("<img>");
		ele.prop("src", "/"+content);

		$("#env").append(ele);
	}
</script>

跨域

跨域參考博客
cors跨域流程圖瀏覽器

對於web開發來說，因爲瀏覽器的同源策略，咱們須要常常使用一些hack的方法去跨域獲取資源，可是hack的方法總歸是hack。
直到W3C出了一個標準－CORS－"跨域資源共享"（Cross-origin resource sharing）。
它容許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
首先來講 CORS 須要瀏覽器和服務端同時支持的，對於兼容性來講主要是ie10+，其它現代瀏覽器都是支持的。服務器

CORS跨域

def new_users(request):
    print(request.method)
    # 複雜請求的容許跨域設置方式
    if request.method == "OPTIONS":
        obj = HttpResponse()
        obj['Access-Control-Allow-Origin'] = "*"
        obj['Access-Control-Allow-Methods'] = "DELETE"
        return obj

    obj = HttpResponse('asdfasdf')
    # 對於簡單請求，在響應頭中設置便可
    obj['Access-Control-Allow-Origin'] = "*"
    return obj

JSONP跨域

def users(request):
    # 獲取回調函數名字 
    v = request.GET.get('funcname')
    print('請求來了...')
    user_list = [
        'alex','eric','egon'
    ]
    user_list_str = json.dumps(user_list)
    # 動態添加回調函數和返回數據
    temp = "%s(%s)" %(v,user_list_str,)
    print(temp)
    return HttpResponse(temp)
<script>
    // jsonp回調函數
    function bbb(result){
        console.log(result);
    }

    // 動態建立一個script標籤，經過標籤的src屬性發送請求，由於是src屬性，索引只能發送get請求。通常會註明回調函數的函數名，而後服務端返回相應的數據。並自動執行

    // 原生ajax跨域
    function sendMsg(){
        var tag = document.createElement('script');
        tag.src = "http://www.jxntv.cn/data/callbackName=bbb";
        document.head.appendChild(tag);
    }

    // jquery ajax jsonp 跨域
    function sendMsg1(){
        $.ajax({
                url: 'http://www.s4.com:8001/users/callbackName=bbb',
                type: 'GET',
                dataType: 'JSONP',
                jsonp: 'callbackName',
                jsonpCallback: 'bbb'
            })
    }
</script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程