轻松理解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 相关文章推荐
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
js表头排序实现方法
Jan 16 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 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
DISCUZ 分页代码
2007/01/02 PHP
php快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
小谈php正则提取图片地址
2014/03/27 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
jQuery版仿Path菜单效果
2011/12/15 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
JavaScript 异步调用
2017/10/25 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
python分析nignx访问日志脚本分享
2015/02/26 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python中有趣在__call__函数
2015/06/21 Python
深入学习python的yield和generator
2016/03/10 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
Python如何在DataFrame增加数值
2020/02/14 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
python实现批量转换图片为黑白
2020/06/16 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
离婚协议书格式
2014/11/21 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle