web前端学习笔记29-Ajax的应用——兼容性及案例操作
一、Ajax兼容性问题
兼容版本信息：['Microsoft.XMLHTTP','MSXML.XMLHTTP','Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','']
<html>
<head>
<meta charset="utf-8">
<title>Ajax兼容性问题title>
head>
<body>
<button id="btn">ie低版本Ajaxbutton>
<script>
// xhr对象兼容性处理
// 1. 创建xhr对象
// var xhr=new XMLHttpRequest(); //高版本
// 低版本ie
var versions=['Microsoft.XMLHTTP','MSXML.XMLHTTP','Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP',''];
for(var i=0;i<versions.length;i++){
var xhr=new ActiveXObject(versions[i]);
console.log(xhr);
// 判定是否创建成功
if(xhr){
break;
}
}
btn.onclick=function(){
// 2. 建立连接
xhr.open('get','1.php?age=22');
// 3. 发送数据
xhr.send(null);
// 4.检测数据是否发送成功，检测服务器是否响应成功
xhr.onreadystatechange=function(){
// 是否发送成功
if(xhr.readyState==4){
// 是否响应成功
if(xhr.status==200){
// 使用服务器给我们的数据
console.log(xhr.responseText);
}
}
}
}
script>
body>
html>
【1.php】
echo $_GET['age'];
?>
二、Ajax工具对象：解决兼容问题与便捷问题
【 ajax.js 】
// ajax工具对象：1. 兼容问题 2. 便捷问题
function Ajax(){
// 一. xhr对象兼容问题
var xhr=null;
if(window.XMLHttpRequest){ // 检测是否有XMLHttpRequest构造方法
// 使用XMLHttpRequest构造方法创建xhr对象
xhr=new XMLHttpRequest();
}else if(window.ActiveXObject){ // 检测是否可以使用低版本ie的ActiveXObject
// 使用ActiveXObject来创建xhr对象
// ie可能使用的版本名称
var versions=['Microsoft.XMLHTTP','MSXML.XMLHTTP','Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP',''];
// 遍历数组，测试是否可以使用
for(var i=0;i<versions.length;i++){
// 尝试创建
xhr=new ActiveXObject(versions[i]);
// 判定是否创建成功
if(xhr){
break;
}
}
}else{ //以上构造方法都不能使用
return false;
}
// 第4步.检测数据是否发送成功，检测服务器是否响应成功
function check(func){
xhr.onreadystatechange=function(){
// 是否发送成功
if(xhr.readyState==4){
// 是否响应成功
if(xhr.status==200){
// 使用服务器给我们的数据
func(xhr.responseText);
}
}
}
}
// 定义一个get请求的内部函数
function ajaxGet(url,callback){
// ajax操作流程 4步
// 1.建立一个xhr对象（在兼容性位置已解决）
// 2.打开一个服务器链接 请求方式：get
xhr.open('get',url); //请求文件路径由用户定
// 3.发送请求
xhr.send(null);
// 4.检测数据是否发送成功，检测服务器是否响应成功
check(callback);
}
// 定义一个post请求的内部函数
function ajaxPost(url,data,callback){
// ajax操作流程 4步
// 1.建立一个xhr对象（在兼容性位置已解决）
// 2.打开一个服务器链接 请求方式：get
xhr.open('post',url); //请求文件路径由用户定
// 设置post专用的头信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 3.发送请求
xhr.send(data);
// 4.检测数据是否发送成功，检测服务器是否响应成功
check(callback);
}
// 二. 便捷问题（内部函数被返回到外部，函数没有被回收，即闭包）
// 返回值（返回一个对象）
return{
// ajax功能对象
get:ajaxGet, //实现ajax的get异步传输
post:ajaxPost //实现ajax的post异步传输
}
}
【 html文件 】
<html>
<head>
<meta charset="utf-8">
<script src="./ajax.js">script>
<title>Ajax工具对象title>
head>
<body>
<button id="AjaxBtn1">ajax工具-getbutton>
<button id="AjaxBtn2">ajax工具-postbutton>
<script>
// ajax工具对象
// 添加事件
AjaxBtn1.onclick=function(){
// 使用ajax请求服务器数据
Ajax().get('./1.php?age=33',alert);
}
AjaxBtn2.onclick=function(){
// 使用ajax请求服务器数据
Ajax().post('./2.php','age=444',console.log);
}
script>
body>
html>
【1.php】
echo $_GET['age'];
?>
【2.php】
echo $_POST['age'];
?>
三、Ajax获取数据转换为json对象
<html>
<head>
<meta charset="utf-8">
<script src="./ajax.js">script>
<title>获取数据转换为json对象title>
head>
<body>
<button id="btn">获取数据转换为json对象button>
<script>
function myobj(data){
console.log(data,typeof data);
// 方法1：数据转换为json对象
var info=eval("("+data+")");
console.log(info,typeof info);
console.log(info.name);
// 方法2：转换操作
var info2=JSON.parse(data);
console.log(info2,typeof info2);
}
// 添加事件
btn.onclick=function(){
// 使用ajax请求服务器数据
Ajax().get('3.php',myobj);
}
script>
body>
html>
【3.php】
echo '{"name":"张三","age":"28","sex":"女","id":"1702"}';
?>
四、Ajax实例：检测用户名是否存在
<html>
<head>
<meta charset="utf-8">
<script src="./ajax.js">script>
<title>实例-检测用户名是否存在title>
head>
<body>
<form action="register.php" method="post">
<table border="1" width="500">
<tr>
<td>用户名：td>
<td><input type="text" name="username" value="" /><span style="color: red;">* 必须填写span>td>
tr>
<tr>
<td>密 码：td>
<td><input type="text" name="password" value="" /><span>span>td>
tr>
table>
form>
<script>
// 在用户名表单失去焦点时进行检测
var username=document.getElementsByName('username')[0];
// 响应数据的处理函数
function warn(data){
// 根据响应数据的不同进行不同的操作
if(data=='1'){ //用户名存在
//进行信息提示：在span标签中插入内容
username.nextSibling.innerHTML=' 用户名已存在！';
}else{ //用户名不存在
//进行信息提示：在span标签中插入内容
username.nextSibling.style.color="green";
username.nextSibling.innerHTML=' 用户名可以使用！';
}
}
// 事件函数
function checkEsist(){
var name=username.value;
// ajax与服务器通讯 检测是否存在
Ajax().get('checkName.php?username='+name,warn);
}
// 添加事件
username.addEventListener('blur',checkEsist);
script>
body>
html>
【checkName.php】
//获取get发送来的用户名
$username=$_GET['username'];
//检测是否存在（连接数据库验证）
if($username=='张三'){
echo 1; //用户名存在返回1
}else{
echo 0; //用户名不存在返回0
}
?>