Ajax 的 GET 和 POST 模式
Ajax 异步请求数据的方式有两种:GET 和 POST。
如果是 GET 模式,则直接将数据放置到异步请求的 URL 地址中,而 send() 方法不发送任何数据;
var queryString = "name=Liruxing&sex=man";
var url = "index.php" + queryString + "time=" + new Date().getTime();
xmlHttp.open('GET',url);
xmlHttp.send(null);
如果是 POST 模式,则将数据放置在 send() 方法中发送。
var queryString = "name=Liruxing&sex=man";
var url = "index.php" + new Date().getTime();
xmlHttp.open('POST',url);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlHttp.send(queryString);
下面的示例能够更清楚的演示 GET 模式和 POST 模式的区别(Ajax 结合 PHP)
index.html
<html>
<head>
<title>Ajax</title>
<script language="javascript">
var xmlHttp;
// 创建 XMLHttpRequest
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
} function createQueryString() {
var name = document.getElementById('name').value;
var sex = document.getElementById('sex').value;
var queryString = "name="+ name +"&sex=" + sex;
return encodeURI(encodeURI(queryString)); // 两次编码解决中文乱码问题
} function handleStateChange() {
if (xmlHttp.readyState==4 && xmlHttp.status==200) {
var content = document.getElementById("content");
content.innerHTML = '';
content.innerHTML = decodeURI(xmlHttp.responseText); // 解码
}
} // GET 方法
function doRequestUsingGet() {
createXMLHttpRequest();
var url = "index.php?" + createQueryString() + "&time=" + new Date().getTime();
xmlHttp.open('GET', url);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);
} // POST 方法
function doRequestUsingPost() {
createXMLHttpRequest();
var url = "index.php?time=" + new Date().getTime();
var queryString = createQueryString();
xmlHttp.open('POST', url);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlHttp.send(queryString);
}
</script>
</head>
<body>
<p>Name:<input type="text" id="name" /></p>
<p>Sex :<input type="text" id="sex" /></p>
<p><input type="button" value="GET" onClick="doRequestUsingGet()"> <input type="button" value="POST" onClick="doRequestUsingPost()"></p>
<div id="content"></div>
</body>
</html>
index.php:
<?php
header('Content-Type:text/html;Charset=GB2312');
$method = $_SERVER['REQUEST_METHOD'];
if ($method == 'GET') {
echo "GET:".$_GET['name'].",".$_GET['sex'];
} else if ($method == 'POST') {
echo "POST:".$_POST['name'].",".$_POST['sex'];
}
?>
Ajax 的 GET 和 POST 模式的更多相关文章
- Ajax轮询以及Comet模式—写在Servlet 3.0发布之前(转)
2008 年的夏天,偶然在网上闲逛的时候发现了 Comet 技术,人云亦云间,姑且认为它是由 Dojo 的 Alex Russell 在 2006 年提出.在阅读了大量的资料后,萌发出写篇 blog ...
- form表单提交和ajax表单提交,关于移动端如何通过软键盘上的【搜索】和【前进】进行提交操作
[文章来源]由于自己对于form研究甚少,所以一直用的都是AJAX进行提交,这次后台提出要用form提交,顺便深入研究一下:之前在做表单的时候,发现input可以通过设置不同的type属性,调用不同的 ...
- Ajax提交与传统表单提交的区别说明
Ajax提交是通过js来提交请求,请求与响应均由js引擎来处理,页面不会刷新,用户感觉不到实际上浏览器发出了请求.比如说我们希望网页总是显示最新的新闻,而又不想老是去点刷新按钮,我们就可以用Ajax机 ...
- 用JQuery的Ajax对表进行处理的一些小笔记
--示例INSERT INTO 表名 ( 参数 )VALUES(@+参数),new SqlParameter("@参数", 值);注:配合SqlHelper使用. 一.Load() ...
- DWR的Reverse Ajax技术实现
DWR的逆向ajax其实主要包括两种模式:主动模式和被动模式.其中主动模式包括Polling和Comet两种,被动模式只有Piggyback这一种. 所谓的Piggyback指的是如果后台有什么内容需 ...
- 20151205 jquery 学习笔记--Ajax
Ajax全称为:“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML), 它并不是 JavaScript 的一种单一技术,而是利用了一系列交互式网 ...
- Ajax学习之小结
ajax: * 同步交互和异步交互: * 同步交互:客户端发送请求——>等待服务器端处理——>接收响应,这个过程客户端不能做任何其他事情,这种模式叫做同步交互 * 异步交互:客户端发送 ...
- Java多线程Future模式
Java多线程Future模式有些类似于Ajax的异步请求Future模式的核心在于:去除了主函数的等待时间,并使得原本需要等待的时间段可以用于处理其他业务逻辑 假设服务器的处理某个业务,该业务可以分 ...
- ajax与文件上传
一.ajax ajax(Asynchronous JavaScript And XML):异步JavaScript和XML,即使用JavaScript语句与服务器进行异步交互,传输的数据为XML(也可 ...
随机推荐
- 31 GroupSock(AddressString)——live555源码阅读(四)网络
31 GroupSock(AddressString)——live555源码阅读(四)网络 31 GroupSock(AddressString)——live555源码阅读(四)网络 简介 Addre ...
- python——tuple元组
>>> dir(tuple) ['__add__', '__class__', '__contains__', '__delattr__', '__doc__', '__eq__', ...
- [CQOI2011]动态逆序对
(又是一道树套树……自己真是玩疯了……) (题意略) 从网上也看过题解,好像解法很多……比如CDQ+树状数组,树状数组套主席树,树状数组套平衡树……我用的是树状数组套splay. (我会说是因为我不会 ...
- Java abstract
abstract修饰符可以修饰类和方法. (1)abstract修饰类,会使这个类成为一个抽象类,这个类将不能生成对象实例,但可以做为对象变量声明的类型,也就是编译时类型.抽象类就相当于一类的半成品, ...
- iOS coredata 级联删除
应用场景如下,每个用户可以设定多个提醒,当删除一个用户时,应当把相关的提醒都删除,而删除一个提醒时,应当把提醒从用户信息中删除. 那么 Profile 应该建立一个如下图的relationship 而 ...
- 初识 MySQL 5.6 新功能、参数
摘要: 继上一篇的文章 初识 MySQL 5.5 新功能.参数 之后,现在MySQL5.6 针对 MySQL5.5 各个方面又提升了很多,特别在性能和一些新参数上面,现在看看大致提升了哪些方面(后续不 ...
- WdatePicker组件不显示
突然发现时间组件不显示了,以为是浏览器的问题.在本地服务器测试了一下发现一切正常. 怀疑是前段时间中毒引起的,用工具比对了一下WdatePicker的文件包,发现My97DatePicker.htm这 ...
- Solr安装过程
Solr安装过程 下载相关资料 solr 4.2.0 http://lucene.apache.org/solr/ 期间安装过 solr 4.3.0 很可惜没有配置成功 apache-tomcat-7 ...
- filter 简介
概述 filter() 方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组. 语法 var new_arrary = arr.filter(callback[, thisArg] ...
- Android Volley入门到精通:定制自己的Request
经过前面两篇文章的学习,我们已经掌握了Volley各种Request的使用方法,包括StringRequest.JsonRequest.ImageRequest等.其中StringRequest用于请 ...