轻松理解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异步调用页面后台方法‏(asp.net)
Mar 01 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
js实现有趣的倒计时效果
Jan 19 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
解决layer.open后laydate失效的问题
2019/09/06 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Python制作exe文件简单流程
2019/01/24 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
会计专业自我评价
2014/02/12 职场文书
学徒工职责
2014/03/06 职场文书
幼儿评语大全
2014/04/30 职场文书
毕业设计说明书
2014/05/07 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python