ajax的get请求

get和post是http请求方法最主要的两种方式。

get:

先实现一个简单的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.php

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

说明一下：get参数中，url是必须进行正确编码(encodeURIComponent)，get请求经常出错就在这个地方，还有一个问题是缓存问题，如果请求页面被设置缓存，而你不想要缓存，可以在urlParam返回值中加上Math.random()用来告诉服务器，这是不同的请求；另外一个参数是设置是否异步，一般而言是必须设置为异步的，同步会阻塞js执行或者页面渲染，在本示例中可能无法看出来。

 

posted on 2015-05-17 18:14  复读机  阅读(2034)  评论(0)  编辑  收藏  举报

导航