轻松理解JavaScript之AJAX
摘要
AJAX技术是网页构建的必备技能之一,本文希望能帮助大家轻松的学习这项技术
一、什么是ajax?
ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。
二、如何使用ajax?
第一步:创建xmlhttprequest对象
创建xmlhttprequest对象,XMLHttpRequest对象用来和服务器交换数据。
var xmlhttp =new XMLHttpRequest();
第二步:注册回调函数
onreadystatechange函数,当服务器响应请求并返回数据后,我们想要客户端处理这些数据就需要使用onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。对于readyState会在下一章节详细介绍。
xmlHttp.onreadystatechange= callback;
function callback(){}
第三步:配置和发送请求
使用xmlhttprequest对象的open()和send()方法配置和发送资源请求给服务器。
xmlhttp.open(method,url,async) method包括get 和post,url主要是文件或资源的路径,async参数为true(代表异步)或者false(代表同步)
xmlhttp.send();使用get方法发送请求到服务器。
xmlhttp.send(string);使用post方法发送请求到服务器。
post表单数据需要使用xmlhttprequest对象的setRequestHeader方法增加一个HTTP头。
post 发送请求什么时候能够使用呢?
(1)更新一个文件或者数据库的时候。
(2)发送大量数据到服务器,因为post请求没有字符限制。
(3)发送用户输入的加密数据。
xhttp.open("POST", "ajax_test.aspx", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
第四步:处理响应数据
使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
使用responseText属性得到服务器响应的字符串数据,使用responseXML属性得到服务器响应的XML数据。
在回调函数中使用readyState4和status200判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面内容。
function callback(){
if(xmlHttp.readyState == 4){
//判断交互是否成功
if(xmlHttp.status == 200){
//获取服务器返回的数据
//获取纯文本数据
var responseText =xmlHttp.responseText;
document.getElementById("info").innerHTML = responseText;
}
}
}
三、AJAX运行过程中5种状态(readyState)
在AJAX实际运行当中,对于访问XMLHttpRequest(XHR)时并不是一次完成的,而是分别经历了多种状态后取得的结果,对于这种状态在AJAX中共有5种,这五种状态是由AJAX引擎切换设置的,分别是。
0 : 定义了XHR,但还未初始化
1 :调用send()方法,正在发送请求,请求发送完毕后,开始等待接收响应
2 :响应接收完成
3 :正在解析响应内容
4 :响应内容解析完成,返回给客户端调用
对于上面的状态,其中“0”状态是在定义后自动具有的状态值,而对于成功访问的状态(得到信息)我们大多数采用“4”进行判断。
值得注意的是,状态每切换一次,都会触发onreadystatechange 事件,所以整个过程onreadystatechange 事件被触发5次
四、AJAX的优缺点
优点
1、最大的一点是页面无刷新,在页面内与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力给用户的体验非常好。
2、减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
缺点
1、ajax干掉了back按钮,即对浏览器后退机制的破坏。
2、对搜索引擎的支持比较弱。
更多前端技术文章,欢迎前往我的个人博客:嵘么么的个人博客
轻松理解JavaScript之AJAX的更多相关文章
- 轻松理解JavaScript闭包
摘要 闭包机制是JavaScript的重点和难点,本文希望能帮助大家轻松的学习闭包 一.什么是闭包? 闭包就是可以访问另一个函数作用域中变量的函数. 下面列举出常见的闭包实现方式,以例子讲解闭包概念 ...
- 深入理解 JavaScript 异步——转载
本文章转载于深入理解 JavaScript 异步 前言 2014年秋季写完了<深入理解javascript原型和闭包系列>,已经帮助过很多人走出了 js 原型.作用域.闭包的困惑,至今仍能 ...
- 深入理解JavaScript运行机制
深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...
- 深入理解javascript原型和闭包(14)——从【自由变量】到【作用域链】
先解释一下什么是“自由变量”. 在A作用域中使用的变量x,却没有在A作用域中声明(即在其他作用域中声明的),对于A作用域来说,x就是一个自由变量.如下图 如上程序中,在调用fn()函数时,函数体中第6 ...
- JavaScript可否多线程? 深入理解JavaScript定时机制
JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...
- 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点
深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 2011-12-28 23:00 by 汤姆大叔, 139489 阅读, 119 评论, 收藏, 编辑 才华横溢的 ...
- 【干货理解】理解javascript中实现MVC的原理
理解javascript中的MVC MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller); 模型:模型用于封装与应用程 ...
- (转)深入理解JavaScript 模块模式
深入理解JavaScript 模块模式 (原文)http://www.cnblogs.com/starweb/archive/2013/02/17/2914023.html 英文:http://www ...
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
随机推荐
- JWPlayer使用指南
http://support.jwplayer.com/customer/portal/articles/1499103-quickstart-reference <div id="m ...
- SQLSERVER如何导入数据保持ID不变(ID为自增主键)
使用SQL SERVER最操蛋的就是导入数据,以前用企业管理器直接导数据,导一次骂N次娘,在骂了微软无数次娘之后总结了一个方法揍合着还算受用. 其核心要点就是要将数据结构导入到目标数据库服务器上,再来 ...
- java中函数是值传递还是引用传递?
相信有些同学跟我一样,曾经对这个问题很疑惑.在网上也看了一些别人说的观点,评论不一.有说有值传递和引用传递两种,也有说只有值传递的,这里只说下个人见解 先看一个例子 public class Test ...
- Express之托管静态文件
中间件express.static 我们使用express初始化一个目录的时候,会在app.js中看到一大推的app.use. 其中一个主要的中间件是express.static(4.0版本依旧保留的 ...
- css 样式重置
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ...
- 理解Node.js的事件轮询
前言 总括 : 原文地址:理解Node.js的事件轮询 Node小应用:Node-sample 智者阅读群书,亦阅历人生 正文 Node.js的两个基本概念 Node.js的第一个基本概念就是I/O操 ...
- 三层——c#版
首先,向大家通知一个好消息--我的三层终于实现了!!!这两天,一直在调一个bug一直链接不上数据库,弄得我死的心都有了.就在昨天,当我把一个","改成了":"后 ...
- 使用 position:sticky 实现粘性布局
如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: ab ...
- select中的文字垂直居中的问题
select文字在默认和边框高度增加时 是默认居中的.你要是不想居中的话可以用padding值调整.但是右侧的三角不会改变. select在高度减小时.字体是不会垂直居中的.无论你用什么他都不会垂直居 ...
- 在java中的Try Catch块-------------异常处理(2)
1. Try块是什么? Try块是一块可能产生异常的代码块,一个Try块可能跟着Catch块或者Finally块,或者两者. Try块的语义: try{ //statements that may c ...