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请求的更多相关文章

  1. Laravel中的ajax跨域请求

    最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...

  2. 浅谈linux 下，利用Nginx服务器代理实现ajax跨域请求。

    ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...

  3. 模拟ajax的 script请求

    /** * 模拟ajax的 script请求 * @param {[type]} options [description] * @return {[type]} [description] */ f ...

  4. 解决ajax跨域请求 （总结）

    ajax跨域请求,目前已用几种方法实现:   1)用原生js的xhr对象实现.                var url="http://freegeoip.net/json/" ...

  5. ASP.NET MVC 实现AJAX跨域请求方法《1》

    ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...

  6. $.ajax 跨域请求 Web Api

    WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...

  7. JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...

  8. Nginx 实现AJAX跨域请求

    在工作中遇到跨域请求的问题: AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Con ...

  9. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

  10. php中ajax跨域请求---小记

    php中ajax跨域请求---小记   前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({ type:'get', url:'http://wan.xxx.c ...

随机推荐

  1. Oracle常见操作汇总（转）

    前言:Oracle学习也有十几天了,但是呢,接下来还要学习许多其他的东西,并不能提步不前,所以在此总结了以下Oracle中常用的命令和语句,没有语法都是实例,以便以后工作的时候随时翻看,毕竟是自己的东 ...

  2. REST API出错响应的设计（转）

    REST API应用很多,一方面提供公共API的平台越来越多,比如微博.微信等:一方面移动应用盛行,为Web端.Android端.IOS端.PC端,搭建一个统一的后台,以REST API的形式提供服务 ...

  3. WordPress添加评论回复的电子邮件警报通知

    评论回复帖子,主动发送电子邮件通知评论员,这是提高的一大举措的用户体验.倡导孟一直在使用Willin Kan主评论回复电子邮件警报通知码,我相信很多人也使用,假设你没有使用.最好的尝试. 根据自己的需 ...

  4. Web版RSS阅读器（二）——使用dTree树形加载rss订阅分组列表

    在上一边博客<Web版RSS阅读器(一)——dom4j读取xml(opml)文件>中已经讲过如何读取rss订阅文件了.这次就把订阅的文件读取到页面上,使用树形结构进行加载显示. 不打算使用 ...

  5. Oracle 多表关联更新

    drop table course; create table course ( id integer, teacherNo integer, teacherDesc ), teacherName ) ...

  6. ORACLE 动态注册和静态注册的区别(转)

    1, oracle 10g 用netca方式建立的都默认为动态注册方式2,如果想改为静态注册的方式则在listener.ora 中加入如下内容即可 SID_LIST_LISTENER = (SID_L ...

  7. Effective C++：条款14：在中小企业资源管理copying表现

    (一) 在一项条款说法auto_ptr和tr1::share_ptr适合heap-based资源.然而,并非所有的资源都heap-based的.换句话说不tr1::shared_ptr 和 auto_ ...

  8. ASP.NET AJAX简明教程

     当我们谈论Ajax时,首先想到的就是JavaScript下的Ajax,用来完成网页的交互,局部刷新工作,Microsoft的ASP.NET AJAX框架在Web的开发中承担着类似的角色,并简化了Ja ...

  9. Android dumpsys命令的使用

    Android提供的dumpsys工具能够用于查看手机中的应用程序和系统服务信息与状态,手机连接电脑后能够直接命令行运行adb shell dumpsys 查看全部支持的Service可是这样输出的太 ...

  10. 理解JavaScript继承

    原文:理解JavaScript继承 对于JavaScript的继承和原型链,虽然之前自己看了书也听了session,但还是一直觉得云里雾里,不禁感叹JavaScript真是一门神奇的语言.这次经过Sp ...