JS——AJAX
向服务器发送请求如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：Open方法了有两种请求方式——get和post
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
1、无法使用缓存文件（更新服务器上的文件或数据库）
2、向服务器发送大量数据（POST 没有数据量限制）
3、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
注释：send(string)方法只有当时post请求时才会传入参数
onreadystatechange 事件：当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| status |
200: "OK" 404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
GET请求：
<body>
<button onclick="loadXMLDoc()">点击发送异步请求</button>
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
xmlhttp.open("get", "person.ashx", true);
xmlhttp.send();
}
</script>
</body>
PSOT请求：
<body>
<button onclick="fs()">点击发送异步请求</button>
<script>
var xmlHttp;
function GetXmlHttpObject() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function getOkPost() {
if (xmlHttp.readyState == 1 || xmlHttp.readyState == 2 || xmlHttp.readyState == 3) {
// 本地提示：加载中/处理中
}
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var d = xmlHttp.responseText; // 返回值
// 处理返回值
alert(d);
}
}
function fs() {
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert('您的浏览器不支持AJAX！');
return;
}
var url = "info.ashx";
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "name=wqx&age=10"
xmlhttp.send(data);
xmlHttp.onreadystatechange = getOkPost;//发送事件后，收到信息了调用函数
}
</script>
</body>
参考：W3C
JS——AJAX的更多相关文章
- js ajax post提交 ie和火狐、谷歌提交的编码不一致，导致中文乱码
今天遇到一个问题找了很久发现: 使用js ajax post提交 ie和火狐.谷歌提交的编码不一致,导致中文乱码 //http://www.cnblogs.com/QGC88 $.ajax({ url ...
- JavaScript学习总结【12】、JS AJAX应用
1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技 ...
- 简单的前端js+ajax 购物车框架(入门篇)
其实,一直想把自己写的一些js给总结下,也许是能力有限不能把它完美结合起来.只能自己默默的看着哪些代码,无能为力. 今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的 ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- js+ajax编码三级联动
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...
- 注册页面手机验证码无跳转接收[html+js+ajax+php]
[学习笔记] 来源:注册时需要使用短信验证码,但是注册的时候,点击接收验证码时,会产生跳转(尼玛,这不是我想要的啊!o(╥﹏╥)o) 查询资料和看书之后,知道使用js+ajax可以实现,就从网上找了一 ...
- js ajax请求传token
js ajax请求传token 方法一: headers: { Authorization: "BasicAuth " + token } 方法二: beforeSend: fu ...
- js ajax设置和获取自定义header信息的方法总结
目录 1.js ajax 设置自定义header 1.1 方法一: 1.2 方法二: 2.js ajax 获取请求返回的response的header信息 3.js ajax 跨域请求的情况下获取自定 ...
- 原生js ajax与jquery ajax的区别
原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...
- JS Ajax跨域访问
js ajax跨域访问报"No 'Access-Control-Allow-Origin' header is present on the requested resource 如果请求的 ...
随机推荐
- hihoCoder #27
A QvQ B 题目:http://hihocoder.com/problemset/problem/1470 分析:dfs序+栈+数学 可以发现,对于每组询问,树上是有很多点都只能等于0的 对于每个 ...
- I/O虚拟化
note:这里主要记录我对IO虚拟化的理解,希望这篇文章对想了解虚拟化IO的同学有点帮助.这是我在看论文[vale,a switched ethernet for virtual machines]的 ...
- POJ--3164--Command Network【朱刘算法】最小树形图
链接:http://poj.org/problem?id=3164 题意:告诉n个点坐标,m条边表示两个点之间有路.从1点開始建立一个有向图最小生成树. 朱刘算法模板题 =============== ...
- String的'+'的性能及原理
逛了几个论坛. 不少人在讨论String的"+",StringBuilder与StringBuffer等一系列的问题.先不多说了了 现分类详述: 1.String的'+',底层运行 ...
- ubuntu下安装jre
jre下载地址:http://www.java.com/en/download/manual.jsp 1.将下载好的jre-7u55-linux-x64.tar.gz文件解压缩,得到jre1.7.0_ ...
- vmware里面的linux怎么和windows相互传文件
我们常常遇到这样的问题.高版本号的vmware遇到低版本号的linux.使用起来就比較抠脚,比方低版本号的linux安装在高版本号的vmware里. 1.不能全屏显示虚拟机 2.每次切换出来.总要按一 ...
- unity3D游戏开发实战原创视频讲座系列7之消消乐游戏开发
解说文件夹 第一讲 游戏介绍和资源简单介绍 第二讲 游戏场景背景的搭建 第三讲 游戏特效预制体的制作 第四讲 游戏场景前景的显示 第五讲 瓷砖背景块 第六讲 方块的消除 第七讲 方块的交 ...
- CAGradientLayer功能
一.CAGradientLayer介绍 .CAGradientLayer是用于处理渐变色的层结构 .CAGradientLayer的渐变色能够做隐式动画 .大部分情况下.CAGradientLayer ...
- Android 完全退出应用程序
随着业务逻辑越来越复杂,退出应用程序也不像之前那个直接将Activity finish()掉就可以了,在网上看到很多完全退出App的文章,但是实践之后发现,并不像文章中描述的那样,不是方法过时了,就是 ...
- 使用git命令 （git reset --hard HEAD） 回退版本信息
Git必须知道当前版本是哪个版本,在Git中,用HEAD表示当前版本,上一个版本就是HEAD^,上上一个版本就是HEAD^^,当然往上100个版本写100个^比较容易数不过来,所以写成HEAD~100 ...