初窥ajax(一) ——封装ajax
来源:互联网 发布:淘宝想开情趣用品店 编辑:程序博客网 时间:2024/06/16 01:43
写在前面
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 在这篇文章,我会带你去揭开他神秘的面纱,深入的去了解他。
创建ajax
第一步:创建xhr对象
var xhr = null;//兼容处理if(window.XMLHttpRequest)//ie7+及主流浏览器 xhr = new XMLHttpRequest();else//ie7- xhr = new ActiveXObject("Microsoft.XMLHTTP");
第二步:准备发送前的一些配置参数
xhr.open(data.type,data.url,true);//data.type指发送的类型,主要是post和get//data.url指发送的url信息
第三步:执行发送的动作
if(data.type == 'get'){ xhr.send(null);}else if(data.type == 'post'){ xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send(data.data);}
第四步:指定回调函数
xhr.onreadystatechange = function(){ if(xhr.readyState == 4 ){ if(xhr.status == 200)//执行成功 data.success(xhr.responseText); else data.failure(); }}
怎么样,自己封装一个ajax函数是不是很简单。这里有一点需要注意。
xhr.readyState状态码
0: XMLHttpRequest对象创建完成 ===== 下达订单1:表示发送请求的动作准备好了,但是还没有开始发送 === 包裹整装待发2:表示已经发送完成 === 包裹已经出库3: 服务器已经返回了数据 === 包裹已经签收4:服务器返回的数据已经可以使用 === 使用 在程序运行过程中,其实xhr.onreadystatechange被执行了4次,但是只有在xhr.readyState == 4时,才指定了回调函数。 什么是回调函数? 简单来说就是我指定了函数名并且往里面传了参数,但是函数内部没有写任何代码。 然后你使用我传的参数实现你想要的功能。
调用ajax(get请求)
login.addEventListener('click',function(){ var param = { url:'check.php?username='+username.value+"&password="+password.value, type:'get', dataType:'json', success:function(data){ info.innerHTML = data; }, failure:function(){ console.log("error!"); } }; ajax(param);});
调用ajax(post请求)
login.addEventListener('click',function(){ var param = { url:'check.php', data:"username="+username.value+"&password="+password.value, type:'post', dataType:'json', success:function(data){ info.innerHTML = data; }, failure:function(){ console.log("error!"); } }; ajax(param);});
这里的后台逻辑我简单用了下php处理
后台php
<?php //get请求 $username = $_GET['username']; $password = $_GET['password']; //post请求 $username = $_POST['username']; $password = $_POST['password']; // echo $username; if($username == 'admin' && $password == '123'){ echo 'success!'; }else echo 'error!'; //目的是动态获取数据 //例子:提交数据时进行验证 登录 ?>
阅读全文
0 0
- 初窥ajax(一) ——封装ajax
- 初窥ajax(二) ——封装jsonp
- php与Ajax(一)———Ajax简介
- AJAX——ASP.NET AJAX框架(一)ScriptManager
- AJAX学习笔记(一)——初识AJAX
- Ajax学习笔记(一)—什么是Ajax?(初学者)
- jQuery对AJAX的封装——$.ajax
- jQuery对AJAX的封装——$.ajax
- AJAX在ASP.NET中的应用(二)——Jquery封装的AJAX
- jQuery封装的ajax——参数
- 封装Ajax
- Ajax封装
- ajax封装
- ajax封装
- ajax封装
- 封装ajax
- Ajax封装
- ajax封装
- 字符串输入的一些陷阱
- 账户结构,推广计划,推广单元
- okhttp框架学习
- maven依赖json-lib的jar包导入失败
- [unity3d] 模型XRay效果实现
- 初窥ajax(一) ——封装ajax
- Class文件结构
- Android自定义view双缓存技术
- HTML/CSS导航菜单-水平菜单的制作
- 设计模式应用 生成器模式
- ZigBee_CC2530中断的使用
- 用最大似然估计求逻辑回归参数
- 查询相关
- 机房收费系统 之 建筑地基