AJAX教程系列二:open方法与数据获取与处理
2016-07-08 16:22
417 查看
一:open方法与服务器状态
二:数据获取
1.php如下代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { var xhr = null; // 打开浏览器 try { xhr = new XMLHttpRequest(); } catch (e) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } // 在地址栏输入地址 /* open方法 是否异步 异步:非阻塞 前面的代码不会影响后面代码的执行 同步:阻塞 前面的代码会影响后面代码的执行 */ xhr.open('get','1.txt',true); // 发送请求 xhr.send(); // 等待服务器返回内容 xhr.onreadystatechange = function() { if(xhr.readyState == 4){ if(xhr.status == 200){ alert(xhr.responseText); }else { alert("错误"+xhr.status); } } } } } </script> </head> <body> <input type="button" value="按钮" id="btn" /> </body> </html>
二:数据获取
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { var xhr = null; // 打开浏览器 try { xhr = new XMLHttpRequest(); } catch (e) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } // 在地址栏输入地址 /* 缓存时在url?后加随机数,乱码encodeURI */ xhr.open('get','1.php?username='+encodeURI('小胖子')+'&pwd=1111&' + new Date().getTime(),true); // 发送请求 xhr.send(); // 等待服务器返回内容 xhr.onreadystatechange = function() { if(xhr.readyState == 4){ if(xhr.status == 200){ alert(xhr.responseText); }else { alert("错误"+xhr.status); } } } } } </script> </head> <body> <input type="button" value="按钮" id="btn" /> </body> </html>
1.php如下代码
<?php header('content-type:text/html;charset="utf-8"'); error_reporting(0); $username = $_GET['username']; $pwd = $_GET['pwd']; echo "账号:{$username},密码:{$pwd}";
相关文章推荐
- 小心服务器内存居高不下的元凶--WebAPI服务
- 运维入门
- Ajax
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- 使用Ajax实现异步用户名验证
- 使用ajax实现用户登录验证(升级版)
- 利用开源软件打造自己的全功能远程工具
- Linux5.9无人值守安装
- 数据中心和云未来的十二大趋势
- 虚拟化基础架构Windows 2008篇之11-WSUS服务器的安装与配置
- 用vsftp快速搭建ftp服务器
- Linux快速构建apache web服务器
- 服务器监控策略浅谈
- 解决Ajax悬停效果,无法遮蔽FLASH的问题
- 如何降低服务器采购成本 原理分析
- 建议的服务器分区办法
- 服务器托管六大优势分析
- 再谈Jquery Ajax方法传递到action(补充)