轻松理解JavaScript之AJAX


Posted in Javascript onMarch 15, 2017

摘要

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数据。

在回调函数中使用readyState==4和status==200判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面内容。

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 相关文章推荐
基于jquery的页面划词搜索JS
Sep 14 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
Jquery解析json数据详解
Dec 26 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
深入探寻javascript定时器
Jan 02 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
小程序自定义弹框效果
Nov 16 Javascript
Three.js实现雪糕地球的使用示例详解
Jul 07 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 #Javascript
JavaScript对象引用与赋值实例详解
Mar 15 #Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 #Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 #Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 #Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 #Javascript
jQuery动态产生select option下拉列表
Mar 15 #Javascript
You might like
一个php作的文本留言本的例子(六)
2006/10/09 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
PHP代码加密的方法总结
2020/03/13 PHP
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
python数据结构之链表详解
2017/09/12 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
python语言中with as的用法使用详解
2018/02/23 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
Python3常用内置方法代码实例
2019/11/18 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
ajax是什么及其工作原理
2012/02/08 面试题
会计电算化应届生自荐信
2014/02/25 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
教师考核表个人总结
2015/02/12 职场文书