ajax的get請求

時間 2019-11-10

標籤 ajax 請求欄目 Ajax 简体版

原文原文鏈接

get和post是http請求方法最主要的兩種方式。php

get:html

先實現一個簡單的get請求緩存

index.html服務器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>
<body>
    <input type="button" id="submit" value="submit">
    <div id="txt"></div>
<script>
/*對象監聽*/
document.getElementById("submit").onclick = function(){
    get("example.php?name=fuduji&age=23",function(data){
        document.getElementById("txt").innerHTML = data;//請求成功則執行此操做
    },true)
}
/*簡單的一個get函數封裝*/
function get(url,callback,async){//3個參數，url表示請求地址，async表示是否異步，callback表示一個回調函數
    var xhr = new XMLHttpRequest();
    var url = urlParam(url); //編碼
    async = async ? async : true;//是否異步
    xhr.onreadystatechange = function(){
        if(xhr.readyState ==4){
            callback(xhr.responseText); //回調
        }
    }
    xhr.open("get",url,async);
    xhr.send(null);
}
/*對請求的url進行uri組件編碼*/
function urlParam(url){
    var arr = url.split("?");
    var location = arr[0];
    var uri = arr[1];
    var arr1 = uri.split("&");
    for(var i =0; i<arr1.length; i++){
        var arr2 = arr1[i].split("=");
        var name = encodeURIComponent(arr2[0]);
        var value = encodeURIComponent(arr2[1]);
        arr1[i] = name + "=" + value;
    }
    uri = arr1.join("&");
    arr = location + "?" + uri;
    return arr;
}
</script>
</body>
</html>

example.phpdom

<?php
echo 'hello '.$_GET['name'].',your age is '.$_GET['age'];
?>

說明一下：get參數中，url是必須進行正確編碼(encodeURIComponent)，get請求常常出錯就在這個地方，還有一個問題是緩存問題，若是請求頁面被設置緩存，而你不想要緩存，能夠在urlParam返回值中加上Math.random()用來告訴服務器，這是不一樣的請求；另一個參數是設置是否異步，通常而言是必須設置爲異步的，同步會阻塞js執行或者頁面渲染，在本示例中可能沒法看出來。異步

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。