javascript --- Ajax基础
神马是Ajax?
Ajax即‘Asynchronous javascript and XML’(异步javascript和XML),也就是所谓的无刷新页面读取技术。
http请求
首先要了解http请求的方法(GET和POST)。
GET用于获取数据。GET是在URL中传递数据,她的安全系数低,容量相对来说也低了不少。
POST用于上传数据。POST安全性相对较高,容量几乎无限。
Ajax请求
Ajax请求分为四步:(与把大象装进冰箱类似):
1.创建Ajax对象:
在创建对象的时候有些兼容问题:
var oAjax = new XMLHttpRequest(); // 兼容ie6以上版本 var oAjax = ActiveXObject('Microsoft.XMLHTTP'); // 兼容ie6
合并以上代码:
var oAjax = null; if(window.XMLHttpRequest){ oAjax = new XMLHttpRequest(); }else{ oAjax = new ActiveXObject('Microsoft.XMLHTTP'); }
2.链接服务器:
这里会用到open()方法。open()方法有三个参数,第一个参数是连接方法即 GET 和 POST,第二个参数是 URL 即所要读取数据的地址,第三个参数是否异步,它是个布尔值,true 为异步,false 为同步。
oAjax.open('GET', url , true);
3.发送请求:
这里会用到send()方法。
oAjax.send();
4.接收返回值:
onreadystatechange事件。当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState:请求状态,返回的是整数(0-4)。
0(未初始化):还没有调用 open() 方法。
1(载入):已调用 send() 方法,正在发送请求。
(载入完成):send() 方法完成,已收到全部响应内容。
(解析):正在解析响应内容。
(完成):响应内容解析完成,可以在客户端调用。
status:请求结果,返回 200 或者 404。
responseText:返回内容,即我们所需要读取的数据。需要注意的是:responseText 返回的是字符串。
oAjax.onreadystatechange = function(){ if(oAjax.readyState == 4){ if(oAjax.status == 200){ fnSucc(oAjax.responseText); }else{ if(fnFaild){ fnFaild(); } } } };
我们将以上代码,进行封装:
function ajax(url, fnSucc, fnFaild){ //1.创建对象 var oAjax = null; if(window.XMLHttpRequest){ oAjax = new XMLHttpRequest(); }else{ oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } //2.连接服务器 oAjax.open('GET', url, true); //open(方法, url, 是否异步) //3.发送请求 oAjax.send(); //4.接收返回 oAjax.onreadystatechange = function(){ //OnReadyStateChange事件 if(oAjax.readyState == 4){ //4为完成 if(oAjax.status == 200){ //200为成功 fnSucc(oAjax.responseText) }else{ if(fnFaild){ fnFaild(); } } } }; }
下面再分享一个从网上看到的模拟jquery的$.ajax方法的封装:
var createAjax = function(){ var xhr=null; try { xhr=new ActiveXObject("microsoft.xmlhttp"); // IE系列浏览器 } catch(e1) { try{ xhr=new XMLHttpRequest(); // 非IE浏览器 } catch(e2) { window.alert("您的浏览器不支持ajax,请更换!"); } } return xhr; }; var ajax=function(conf){ var type=conf.type; // type参数,可选 var url=conf.url; // url参数,必填 var data=conf.data; // data参数可选,只有在post请求时需要 var dataType=conf.dataType; // datatype参数可选 var success=conf.success; // 回调函数可选 if (type == null) { type="get"; // type参数可选,默认为get } if (dataType == null){ dataType="text"; // dataType参数可选,默认为text } var xhr = createAjax(); xhr.open(type,url,true); if (type=="GET" || type=="get") { xhr.send(null); } else if (type=="POST" || type=="post") { xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); xhr.send(data); } xhr.onreadystatechange=function(){ if ((xhr.readyState == 4) && (xhr.status == 200)) { if (dataType=="text" || dataType=="TEXT"){ if (success != null){ success(xhr.responseText); // 普通文本 } } else if(dataType=="xml" || dataType=="XML"){ if (success != null){ success(xhr.responseXML); // 接收xml文档 } } else if (dataType=="json" || dataType=="JSON"){ if (success != null) { success(eval("("+xhr.responseText+")")); //将json字符串转换为js对象 } } } }; };
该方法使用也很简单,和jquery的$.ajax方法一样,不过没那么多的参数。仅仅是简单的实现了一些基本的ajax功能。使用方法如下:
ajax({ type:"post",//post或者get,非必须 url:"test.jsp",//必须的 data:"name=dipoo&info=good",//非必须 dataType:"json",//text/xml/json,非必须 success:function(data){//回调函数,非必须 alert(data.name); } });
javascript --- Ajax基础的更多相关文章
- 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】
一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...
- Ajax基础--JavaScript实现
ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...
- 【javascript】ajax 基础
什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...
- 史上最全的Ajax基础详解
同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...
- Ajax基础知识《一》
对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...
- Ajax基础2
什么是服务器 网页浏览过程的分析 如何配置自己的服务器程序(AMP) 什么是Ajax 无刷新数据读取 异步,同步 Ajax基础(2) 使用Ajax 基础请求显示txt的文件 字符集编码 缓存,阻止缓存 ...
- ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列
AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ...
- JavaScript入门基础
JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...
- jQuery基础---Ajax基础教程(二)
jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...
随机推荐
- PowerPoint 打开文档发现.pptx中胡内容有问题
一.问题的提出 有一个文件,在window 7操作系统中通过邮箱地址保存到本地,结果打开的时候出现[PowerPoint 打开文档发现 文件.pptx中胡内容有问题] 然后提示[如果您信任此演示文稿的 ...
- PL/SQL异常
CASE_NOT_FOUND CASE selector WHEN selector_value_1 THEN statements_1 WHEN selector_value_2 THEN stat ...
- Android不规则点击区域详解
Android不规则点击区域详解 摘要 今天要和大家分享的是Android不规则点击区域,准确说是在视觉上不规则的图像点击响应区域分发. 其实这个问题比较简单,对于很多人来说根本不值得做为一篇博文写出 ...
- c/c++:重载 覆盖 隐藏 overload override overwrite
http://www.cnblogs.com/qlee/archive/2011/07/04/2097055.html 成员函数的重载.覆盖与隐藏成员函数的重载.覆盖(override)与隐藏很容易混 ...
- [fun code - 模拟]孤独的“7”
今天看到朋友圈里有人发了一张孤独的7的题目,第一反应就是模拟后计算出结果,而女朋友则更爱推理,手算.
- 【Software Clone】2014-IEEE-Towards a Big Data Curated Benchmark of Inter-Project Code Clones
Abstract 大数据的克隆检测和搜索算法已经作为嵌入在应用中的一部分. 本文推出一个代码检测基准.包含一些已知的真假克隆代码.其中包括600万条真克隆(包含type-1,type-2,type-3 ...
- JavaScript备忘录(2)——闭包
语句 JavaScript是解释型语言,解释器是按照顺序逐句执行的(除了进行一些少量预处理,如将函数声明提前). 顺序是由流程控制语句来控制的,常用的流程控制语句包括: 条件控制语句:if...els ...
- position 属性和 z-index 属性对页面节点层级影响的例子
转:http://www.neoease.com/tutorials/z-index/ 不设 z-index 属性 单层节点 双层节点 多层节点
- STM32L051 PVD的调试
我的PVD的驱动以及例程位于STM32L0xx_Drivers这个库当中,在使用前最好先阅读readme.md文件 PVD 是一种检测MCU供电情况的技术.当供电电压高于或者低于一定阈值的时候,可以在 ...
- 想从事分布式系统,计算,hadoop等方面,需要哪些基础,推荐哪些书籍?--转自知乎
作者:廖君链接:https://www.zhihu.com/question/19868791/answer/88873783来源:知乎 分布式系统(Distributed System)资料 < ...