Ajax基础--JavaScript实现
ajax原理
1、ajax
即“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），也就是无刷新数据读取。
通俗地讲就是：AJAX 通过在后台与服务器交换少量数据的方式，允许在不重新加载整个页面的情况下，对网页的一部分内容进行数据更新。
2、http 请求
http（超文本传输协议）是一个基于请求与响应模式的、无状态的、应用层的协议。
这里需要了解 http 请求的两个方法：GET方法 和 POST方法。
①、GET 用于获取数据。GET 是在 URL 中传递数据，它的安全性低，容量低。
②、POST 用于上传数据。POST 安全性一般，容量几乎无限。
PS：有兴趣的同学可以参考Http协议详解
3、XMLHttpRequest
XMLHttpRequest 是一个用于在后台与服务器交换数据的对象。目前几乎所有浏览器支持该对象。
XMLHttpRequest是ajax技术的核心部分，在javascript中就是利用XMLHttpRequest对象来实现ajax功能，以便给用户带来好的体验，其他的方法实现ajax功能也都是实现此功能。
XMLHttpRequest常用的方法、属性：
①、open()方法：用于向服务器发送一个请求；该方法有3个参数，第一个参数表示发送请求的方式（即连接服务器的方式）即“GET”或“POST”，第二个参数表示要请求的URL地址，第三个参数表示是否以异步方式发出请求，若为true则表示是异步，否则为同步。
②、send()方法：发送请求。
③、onreadystatechange 事件：紧跟其后是一个函数名或是一个匿名函数，发送请求以后XMLHttpRequest对象一直处于等待状态，直到服务器响应后激发 onreadystatechange事件，紧跟其后的方法就是当XMLHttpRequest对象的onreadystatechange事件激发之后 的客户端方法。
④、readyState属性：XMLHttpRequest对象的请求状态，返回的是整数（0-4），具体意思如下：
0（未初始化）：还没有调用 open() 方法。
1（载入）：已调用 send() 方法，正在发送请求。
2（载入完成）：send() 方法完成，已收到全部响应内容。
3（解析）：正在解析响应内容。
4（完成）：响应内容解析完成，可以在客户端调用。
⑤、status：请求结果，返回 200 或者 404。
200 => 成功。
404 => 失败。
⑥、responseText：返回内容，即我们所需要读取的数据。注意：responseText 返回的是字符串。
实现例子
1、创建 ajax 对象
在创建对象时，要考虑浏览器兼容性问题，即IE浏览器和非IE浏览器（如firefox、chrome等）：
var ajaxObj=null;
if(window.XMLHttpRequest){
ajaxObj = new XMLHttpRequest();//IE6以上及非IE浏览器
}else if(window.ActiveXObject){
ajaxObj = new ActiveXObject('Microsoft.XMLHTTP');//IE6以下的IE浏览器
}else{
throw new Error('no ajax object available.');
}
2、连接服务器
这里就用上面讲到的open方法。
ajaxObj.open('GET',URL,true);
3、发送请求
ajaxObj.send();
4、接受数据
ajaxObj.onreadystatechange=function(){
if(ajaxObj.readyState==4){
if(ajaxObj.status==200){
funSucc(ajaxObj.responseText);//funSucc是获取成功时处理的函数
}else{
if(funFaild){
funFaild();//funFaild是获取失败时处理的函数
}
}
}
};
将以上代码连起来：
function ajax(url, funSucc, funFaild){
//1.创建ajax对象
var ajaxObj = null;
if(window.XMLHttpRequest){
ajaxObj = new XMLHttpRequest();
}else if(window.ActiveObject){
ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");
}else{
throw new Error('no ajax object available.')
}
//2.连接服务器
ajaxObj.open('GET', URL, true);//open(方法, url, 是否异步)
//3.发送请求
ajaxObj.send();
//4.接收返回
ajaxObj.onreadystatechange = function(){ //OnReadyStateChange事件
if(ajaxObj.readyState == 4){ //4为完成
if(ajaxObj.status == 200){ //200为成功
funSucc(ajaxObj.responseText)
}else{
if(funFaild){
funFaild();
}
}
}
};
}
最后是一个简单实例：
<!DOCTYPE HTML>
<html>
<head>
<title>ajax基础</title>
</head>
<body>
点击按钮的时候，读取abc.txt<input id="btn" type="button" value="读取"/><br/>
<div id="con"></div>
</body>
</html>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn');
var oCon = document.getElementById('con');
oBtn.onclick = function(){
ajax('abc.txt',function(str){
oCon.innerHTML = str;
});
}
}
</script>
abc.txt 内容：
这是ajax调用的内容1。
这是ajax调用的内容2。
这是ajax调用的内容3。
总结：
利用纯javascript实现ajax效果的主要步骤如下：
1、根据浏览器类型实例化XMLHttpRequest对象
2、利用XMLHttpRequest对象向服务器发出一个动态请求
3、编写XMLHttpRequest对象接收服务器的响应时要执行客户端代码，在客户端做一些设置来响应客户端操作
4、编写服务器方法，用于处理客户端请求并作出响应。
Ajax基础--JavaScript实现的更多相关文章
- 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...
- 【javascript】ajax 基础
什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...
- 史上最全的Ajax基础详解
同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...
- 【Ajax 基础学习】
http://www.cnblogs.com/guduoduo/p/3681296.html 今天简单的学习了 Ajax 的基础知识,总结在这里.部分代码不是原创,特此说明. [Ajax 简介] AJ ...
- Ajax基础知识《一》
对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...
- Ajax基础2
什么是服务器 网页浏览过程的分析 如何配置自己的服务器程序(AMP) 什么是Ajax 无刷新数据读取 异步,同步 Ajax基础(2) 使用Ajax 基础请求显示txt的文件 字符集编码 缓存,阻止缓存 ...
- ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列
AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ...
- 【转】Ajax 基础学习
今天简单的学习了 Ajax 的基础知识,总结在这里.部分代码不是原创,特此说明. [Ajax 简介] AJAX = Asynchronous JavaScript and XML(异步的 JavaSc ...
- jQuery基础---Ajax基础教程（二）
jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...
随机推荐
- [git] git 的基本认知
版本管理 ( Version Control ) 版本管理系统是一个记录文件变更的系统,让你在一段时间后可以恢复指定版本的文件.版本管理系统大致可分为三类:独立的本地版本管理系统.中心化版本管理系统. ...
- 《A First Course in Probability》-chape1-组合分析-二项式定理
二项式系数的概念给人最直观的概念就是,这里有n个物品,分成两组,其中一组的数量是i的所有组合情况. 它的证明过程既可以从组合分析的角度,也可以从数学归纳的角度,由于数学归纳涉及到计算比较困难,我们这里 ...
- SQL 查询条件放在LEFT OUTER JOIN 的ON语句后与放在WHERE中的区别
这两种条件放置的位置不同很容易让人造成混淆,以致经常查询出莫名其妙的结果出来,特别是副本的条件与主表不匹配时,下面以A,B表为例简单说下我的理解. 首先要明白的是: 跟在ON 后面的条件是对参与左联接 ...
- java 实现 DES加密 解密算法
DES算法的入口参数有三个:Key.Data.Mode.其中Key为8个字节共64位,是DES算法的工作密钥:Data也为8个字节64位,是要被加密或被解密的数据:Mode为DES的工作方式,有两种: ...
- Docker的基本操作
容器基本操作 1.启动容器 $docker run image [COMMAND] [ARG…] run在新容器中执行命令 2.启动交互式容器 $docker run -i -t IMAGE /bin ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（39）-在线人数统计探讨
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(39)-在线人数统计探讨 系列目录 基于web的网站在线统计一直处于不是很精准的状态!基本上没有一种方法可 ...
- Linux内核中SPI/I2c子系统剖析
Linux内核中,SPI和I2C两个子系统的软件架构是一致的,且Linux内核的驱动模型都以bus,driver,device三种抽象对象为基本元素构建起来.下文的分析将主要用这三种抽象对象的创建过程 ...
- 淘宝分布式数据层：TDDL[转]
淘宝根据自己的业务特点开发了TDDL(Taobao Distributed Data Layer 外号:头都大了 ©_Ob)框架,主要解决了分库分表对应用的透明化以及异构数据库之间的数据复制,它是一个 ...
- android 43 SQLite数据库
SQLite数据库很小,占用内存只有几百K,安卓和IOS都是用的SQLite数据库. 页面: <LinearLayout xmlns:android="http://schemas.a ...
- Log4J2基本配置
[1]. Log4J2入门: <1>. 导入Jar包: log4j-api-2.0-beta9.jar log4j-core-2.0-beta9.jar <2>. 编写代码: ...