【javascript】ajax基础
来源:互联网 发布:nz刷枪软件免费 编辑:程序博客网 时间:2024/05/29 03:57
什么是ajax
ajax 即“Asynchronous JavaScript and XML”(异步JavaScript和XML),也就是无刷新数据读取。
http请求
首先需要了解 http 请求的方法(GET 和 POST)。
GET 用于获取数据。GET 是在 URL 中传递数据,它的安全性低,容量低。
POST 用于上传数据。POST 安全性一般,容量几乎无限。
ajax请求
ajax 请求一般分成4个步骤。
1、创建ajax对象
在创建对象时,有兼容问题:
var oAjax = new XMLHttpRequest(); //for ie6以上var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); //for 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() 方法,正在发送请求。
2(载入完成):send() 方法完成,已收到全部响应内容。
3(解析):正在解析响应内容。
4(完成):响应内容解析完成,可以在客户端调用。
status:请求结果,返回 200 或者 404。
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(); } } } };}
最后附上实例:
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <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基础
- javascript、ajax基础
- JavaScript之AJAX基础
- 【javascript】ajax 基础
- javascript基础:Ajax
- 【Javascript基础】Ajax初识
- javascript基础--ajax
- JavaScript基础之AJAX
- 18、JavaScript增强AJAX基础
- JavaScript——AJAX基础
- 【Ajax-javaScript】1、javascript的基础学习
- Ajax基础 (十二)---开发跨浏览器JavaScript
- JavaScript基础——Ajax与Comet
- JavaScript——Ajax基础二
- JS基础 JavaScript下AJAX请求
- JavaScript基础之JQuery与AJAX
- Ajax基础之一:JavaScript中的用户自定义类
- 学习AJAX+JQUERY必看(JavaScript基础对象篇)
- @Resource注解
- linux系统中应用程序安装
- 文件上传 using org.apache.commons.fileupload
- mysql 自定义函数
- 老罗Android开发视频教程 (android常用UI编程) 25集集合
- 【javascript】ajax基础
- 怎样在windows中正确的使用PeekMessage
- Spring中JdbcTemplate类query的使用例子
- 让Hibernate支持Oracle中的函数
- 图像边缘检测方法综述
- Android xml编辑时eclipse不自动弹出提示
- 苹果http视频点播技术
- 我们在囧途之软件投标篇
- J2EE集群原理