当前位置:首页 > 开发 > Web前端 > Ajax > 正文

ajax的get请求

发表于: 2015-11-13   作者:互联网   来源:转载   浏览:
摘要: get和post是http请求方法最主要的两种方式。 get: 先实现一个简单的get请求 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Docume

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执行或者页面渲染,在本示例中可能无法看出来。

 

ajax的get请求

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号