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 基础一篇中, ...
随机推荐
- Part 2: Oracle E-Business Suite on Cloud FAQ
Running Oracle E-Business Suite on Oracle Cloud is simple, but it doesn't take too much effort to co ...
- Qt label加边框
myLabel->setStyleSheet("border:1px solid black"); 简要说明:border就是边缘.px是像素,1px就是边框的宽度.soli ...
- 使用hessian+protocol buffer+easyUI综合案例--登陆
首先先简单介绍下hessian ,protocol buffer, easyUI框架 hessian: Hessian是一个轻量级的remoting on http工具,采用的是Binary RPC协 ...
- 组合模式及C++实现
组合模式 组合模式,是为了解决整体和部分的一致对待的问题而产生的,要求这个整体与部分有一致的操作或行为.部分和整体都继承与一个公共的抽象类,这样,外部使用它们时是一致的,不用管是整体还是部分,使用一个 ...
- unity4.6 failed to update unity web player
unity4.6 failed to update unity web player 新升级的 4.6.2P2 版本修复了IOS很多的bug. 但突然发现导出的Web版本反而不能工作了. “faile ...
- Drupal 7.23版本升级笔记
转载请注明出处:http://blog.csdn.net/panjunbiao/article/details/9860849 今天将尝试将Drupal网站从7.22升级到7.23,下面是升级笔记. ...
- java中解决组件重叠的问题(例如鼠标移动组件时)
java中解决组件覆盖的问题! 有时候在移动组件的时候会出现两个组件覆盖的情况,但是你想让被覆盖的组件显示出来或者不被覆盖! 在设计GUI时已经可以定义组件的叠放次序了(按摆放组件的先后顺序) ...
- Web程序员开发App系列 - 开发我的第一个App,源码下载
Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...
- [OpenCV] Face Detection
即将进入涉及大量数学知识的阶段,先读下“别人家”的博文放松一下. 读罢该文,基本能了解面部识别领域的整体状况. 后生可畏. 结尾的Google Facenet中的2亿数据集,仿佛隐约听到:“你们都玩儿 ...
- 让服务器apache/iis/nginx支持.apk/ipa文件下载
服务器iis支持.apk文件下载的设置 IIS服务器不能下载.apk文件的原因:iis的默认MIME类型中没有.apk文件,所以无法下载. IIS服务器不能下载.apk文件的解决办法:既然.apk无法 ...