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. 使用HttpURLConnection向服务器发送post和get请求(转)

    一.使用HttpURLConnection向服务器发送get请求 1.向服务器发送get请求 @Test publicvoid sendSms() throws Exception{ String m ...

  2. Android - 采用ApiDemos得知Android开展

    采用ApiDemos得知Android开展 本文地址: http://blog.csdn.net/caroline_wendy 位置: android-sdk/samples/android-20/l ...

  3. 解决Gradle minifyEnabled无法找到错误

    Android studio最新版0.9支持proguard minify,shrinkResources ,尝试了下,提示找不到minifyEnabled方法 Error:(29, 0) Gradl ...

  4. IOS遍历未知对象属性、函数

    #import <objc/runtime.h> @implementation NSObject (PropertyListing) /* 获取对象的全部属性 */ - (NSDicti ...

  5. Oracle中的delete和truncate的关系

    转自:http://chenxy.blog.51cto.com/729966/168459 1.相同点       a.都可以删除数据,其中truncate用于全表清空数据,而delete可以选择的删 ...

  6. Serverlet具体解释

    Serverlet简单介绍: Servlet(Server Applet),全称Java Servlet,未有中文译文.是用Java编写的server端程序.其主要功能在于交互式地浏览和改动数据,生成 ...

  7. C++调用一个成员函数的需求this指针的情况

    1.虚成员函数,因为需要this展望虚表指针的指针 2.在数据成员的操作部件的功能 #include "stdafx.h" #include <iostream> #i ...

  8. OWIN– 解耦,协作和开放

    OWIN的理解和实践(一) – 解耦,协作和开放 概述 OWIN的全称是Open Web Interface For .Net, 是MS在VS2013期间引入的全新的概念, 网上已经有不少的关于它的信 ...

  9. easyui dataBox 增加一天,减少一天

    <table> <tr> <td><a href="javascript:void(0)" class="easyui-link ...

  10. TCP连接状态

    TCP 连接状态按 TCP 协议的标准表示法, TCP 可具有如下几种状态,为讨论方便,如下讨论中区分服务端和客户端,实际软件处理上对二者一视同仁. CLOSED关闭状态.在两个通信端使用“三路握手” ...