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执行或者页面渲染，在本示例中可能无法看出来。
ajax的get请求的更多相关文章
- Laravel中的ajax跨域请求
最近接触Laravel框架ajax跨域请求的过程中遇到一些问题,在这里做下总结. 一开始发起ajax请求一直报500错误,搜索相关资料后发现Laravel要允许跨域请求可以加入Cors中间件,代码如下 ...
- 浅谈linux 下，利用Nginx服务器代理实现ajax跨域请求。
ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...
- 模拟ajax的 script请求
/** * 模拟ajax的 script请求 * @param {[type]} options [description] * @return {[type]} [description] */ f ...
- 解决ajax跨域请求 （总结）
ajax跨域请求,目前已用几种方法实现: 1)用原生js的xhr对象实现. var url="http://freegeoip.net/json/" ...
- ASP.NET MVC 实现AJAX跨域请求方法《1》
ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...
- $.ajax 跨域请求 Web Api
WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...
- JQuery的Ajax跨域请求原理概述及实例
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...
- Nginx 实现AJAX跨域请求
在工作中遇到跨域请求的问题: AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Con ...
- jQuery ajax跨域请求的解决方法
在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...
- php中ajax跨域请求---小记
php中ajax跨域请求---小记 前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({ type:'get', url:'http://wan.xxx.c ...
随机推荐
- hive建表没使用LZO存储格式，可是数据是LZO格式时遇到的问题
今天微博大数据平台发邮件来说.他们有一个hql执行失败.可是从gateway上面的日志看不出来是什么原因导致的,我帮忙看了一下.最后找到了问题的解决办法,下面是分析过程: 1.执行失败的hql: IN ...
- SyntaxHighlighter代码高亮插件
SyntaxHighlighter它是Google Code在一个开源项目,主要用于对代码着色页, 使用十分方便,效果也不错,并且差点儿支持常见的全部语言. 使用步骤: 一.下载并解压缩SyntaxH ...
- ElasticSearch实战
ElasticSearch实战-入门 1.概述 今天接着<ElasticSearch实战-日志监控平台>一文来给大家分享后续的学习,在<ElasticSearch实战-日志监控平台& ...
- Oracle + EF5 疑难杂症
原文:Oracle + EF5 疑难杂症 PDF 版 http://files.cnblogs.com/xling/Oracle.pdf Oracle 环境准备 ODAC ODAC 全称 Oracle ...
- c#中 ==与equals有什么区别
对于值类型.引用类型来说比较过程怎样的? using System;using System.Collections.Generic;using System.Text; namespace Cons ...
- 经典算法题每日演练——第六题 协同推荐SlopeOne 算法
原文:经典算法题每日演练--第六题 协同推荐SlopeOne 算法 相信大家对如下的Category都很熟悉,很多网站都有类似如下的功能,“商品推荐”,"猜你喜欢“,在实体店中我们有导购来为 ...
- 怎样用LINQ或EF生成NOT IN和IN语句
例如:有一个问卷表Questionnaire和一个活动与问卷的关系表ActivityOption_Questionnaire,现在我们要找出不在活动中的问卷. 用lambda实现方法如下: var n ...
- PHP和MySQL Web开发 原书第4版 高清文字版，有目录，附带源码
PHP和MySQL Web开发 原书第4版:http://yunpan.cn/QCWIS25zmYTAn 提取码 fd9b PHP和MySQL Web开发 原书第4版源码:http://yunp ...
- DRP学习进化模型
曾经做的就是按照思维做的三级制,这是U .B ,D .坐在坐,开始增加设计模式,增加sqlhelper ,逐渐了解系统可分为只三层,层的,随着学习的不断深入明确了"为什么会出现分层" ...
- 怎样才能充分利用SQL索引
原文:怎样才能充分利用SQL索引 背景:目前WEB的普及太快,很多网站都会因为大流量的数据而发生服务器习惯性死机,一个查询语句只能适用于一定的网络环境.没有优化的查询当遇上大数据量时就不适用了. 本文 ...