1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

JavaScript之Ajax异步

作者:用户 来源:互联网 时间:2016-08-03 09:46:33

ajax的异步请求post服务器数据高响应比方法post传参post请求信息请求头参数url包含特殊字符 问题xhrajax传参问题ajax传参

JavaScript之Ajax异步 - 摘要: 本文讲的是JavaScript之Ajax异步, 同步调用固然简单,但使用异步调用才是我们真正常用的手段。使用异步调用的时候,需要触发readystatechange事件,然后检测readyState属


同步调用固然简单,但使用异步调用才是我们真正常用的手段。使用异步调用的时候,需要触发readystatechange事件,然后检测readyState属性即可。这个属性有五个值:
状态 说明
0 未初始化 尚未调用open()方法
1 启动 已经调用open()方法,但尚未调用send()方法
2 发送 已经调用send()方法,但尚未接受响应
3 接受 已经接受到部分响应数据
4 完成 已经接受到全部响应数据,而且可以使用
 
addEvent(document, 'click', function () {
var xhr = new createXHR();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
} else {
alert('数据返回失败!状态代码:' + xhr.status + '状态信息:' 
+ xhr.statusText);
}
}
};
xhr.open('get', 'demo.php?rand=' + Math.random(), true);
xhr.send(null);
});
 
PS:使用abort()方法可以取消异步请求,放在send()方法之前会报错。放在responseText之前会得到一个空值。
 
一.GET与POST
在提供服务器请求的过程中,有两种方式,分别是:GET和POST。在Ajax使用的过程中,GET的使用频率要比POST高。
在了解这两种请求方式前,我们先了解一下HTTP头部信息,包含服务器返回的响应头信息和客户端发送出去的请求头信息。我们可以获取响应头信息或者设置请求头信息。我们可以在Firefox浏览器的firebug查看这些信息。
//使用getResponseHeader()获取单个响应头信息
alert(xhr.getResponseHeader('Content-Type'));
 
//使用getAllResponseHeaders()获取整个响应头信息
alert(xhr.getAllResponseHeaders());
 
//使用setRequestHeader()设置单个请求头信息
xhr.setRequestHeader('MyHeader', 'Lee'); //放在open方法之后,send方法之前
 
PS:我们只可以获取服务器返回回来响应头信息,无法获取向服务器提交的请求头信息,自然自定义的请求头,在JavaScript端是无法获取到的。
 
GET请求
GET请求是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以将查询字符串参数追加到URL的末尾,以便提交给服务器。
xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);
 
通过URL后的问号给服务器传递键值对数据,服务器接收到返回响应数据。特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理,中文字符的返回及传参,可以讲页面保存和设置为utf-8格式即可。
//一个通用的URL提交函数
function addURLParam(url, name, value) {
url += (url.indexOf('?') == -1 ? '?' : '&'); //判断的url是否有已有参数
url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
alert(url);
return url;
}
 
PS:当没有encodeURIComponent()方法时,在一些特殊字符比如“&”,会出现错误导致无法获取。
 
POST请求
POST请求可以包含非常多的数据,我们在使用表单提交的时候,很多就是使用的POST传输方式。
xhr.open('post', 'demo.php', true);
 
而发送POST请求的数据,不会跟在URL的尾巴上,而是通过send()方法向服务器提交数据。
xhr.send('name=Lee&age=100');
 
一般来说,向服务器发送POST请求由于解析机制的原因,需要进行特别的处理。因为POST请求和Web表单提交是不同的,需要使用XHR来模仿表单提交。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 
PS:从性能上来讲POST请求比GET请求消耗更多一些,用相同数据比较,GET最多比POST快两倍。
 
 JSON也可以使用Ajax来回调访问。
var url = 'demo.json?rand=' + Math.random();
var box = JSON.parse(xhr.responseText);


以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索ajax的异步请求 , post , 服务器 , 数据 , 高响应比 , 方法 , post传参 , post请求 , 信息 , 请求头参数 , url包含特殊字符 问题 , xhr , ajax传参问题 ajax传参 javascript 异步编程、javascript 异步、javascript 异步调用、javascript 异步回调、javascript 异步加载,以便于您获取更多的相关知识。

javascript-$.ajax 没加 async :false 却执行同步

问题描述 $.ajax 没加 async :false 却执行同步 目前 php 项目中,在chrome插件中 $.ajax全是 没设置 同步,但是却执行同步动作。。 回到家 中笔记本上,没设置 async:false 执行的是异步请求。。...

ASP.NET Ajax编程技术之入门篇 (1/3)

1. 什么是AJAX (1) AJAX:”Asynchronous JavaScript and XML”中文的意思就是:异步JavaScript和XML,指一种创建交互式网页应用程序的网页开发技术。Ajax并非缩写词,而是由Jesse James Guiett创造的名词 (2) 不是指一种单一的技术,而是有...

通过PHP和Sajax使用Ajax之JavaScript

...x),这是一个用 PHP 编写的工具,可以把服务器端 PHP 与 JavaScript 集成。   开始之前  这份教程针对的是对于开发富 Web 应用程序感兴趣的人,富 Web 应用程序把异步 JavaScript 和 XML(Ajax)与 PHP 结合起来,用户每次点击时,...

ajax应用2

...ncode()/urldecode()对特殊符号进行编码、反编码处理 ②.在javascript里边可以通过encodeURIComponent ()对特殊符号等信息进行编码。 (以上红色函数可以把”特殊符号、中文”转变为浏览器可以识别不会混淆的信息。 编码后的信息为%...

javascript进阶(二)— — 异步编程

...3();}); 二、异步编程开源库  经常会遇到某些耗时很长的javascript操作,其中既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组)   一、jquery的Deferred对象     Deferred对象就是jQuery的回调函数...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备