轻松理解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 幻灯片插件(带缩略图功能)
Jan 24 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
javascript中Object使用详解
Jan 26 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
vue 中swiper的使用教程
May 22 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 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
正则表达式语法
2006/10/09 Javascript
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
PHP图片加水印实现方法
2016/05/06 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
Python中字典的基本知识初步介绍
2015/05/21 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
详解Python装饰器
2019/03/25 Python
python输入多行字符串的方法总结
2019/07/02 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
人力资源管理专业应届生求职信
2013/09/28 职场文书
认识深刻的检讨书
2014/02/16 职场文书
大学运动会入场词
2014/02/22 职场文书
个人贷款担保书
2014/04/01 职场文书
教师对学生的评语
2014/04/28 职场文书
书香校园建设方案
2014/05/02 职场文书
精神文明建设标语
2014/06/16 职场文书