带你走进ajax
ajax是什么
介绍
(1)ajax (asynchronouse javascript and xml) 异步的javascript 和xml
(2)ajax是一个粘合剂，将javascript、xml、xstl、xhtml、dom、xmlhttprequest和css融合在一起。
(3)与服务器端语言无关
传统的BS模式缺点
(1)数据是整体提交的
(2)整个页面刷新，不能进行局部刷新
(3)用户体验不好
(4)占用带宽
ajax的特点
页面无整体刷新的动态数据交换
页面更加美观
对数据库操作
ajax返回数据类型
文本文件、xml、json
ajax原理介绍
传统的web应用
- 传统的web应用是客户端向服务器发送一个http请求后，客户端要一直等待服务器的响应，这时用户什么事也干不成。
- 最麻烦的是对于表单的提交。比如用户要填写用户信息，等将所有的信息填写完成后提交给服务器，服务器响应是用户名已被使用，然后用户不得不重新填写所有的信息。
-
我们期望在填写用户名时就检测用户名是否可用，这时浏览器可以在静默方式下将填写的用户名内容发送给服务器进行核对，并将结果在页面上显示出来。在这个数据传送过程中，用户可以进行别的操作，而不用等待。
ajax 参与过程
- 首先创建ajax引擎
- Client将数据发送ajax引擎，ajax引擎走正常的http请求通道
- ajax引擎拿到server的响应后发送给Client，Client对数据进行处理，将结果显示给用户上
总结
传统的请求---应答方式会将用户阻塞，使用户体验不佳ajax参与进来后可以实现异步操作。简单的说就是将阻塞等级提高，使应答过程阻塞在ajax引擎上，从而使用户有更大自由度。
ajax实践
使用ajax实现用户名有效性验证
需求：当用户输入完用户名时，用户可以通过页面上的按键来确认当前的用户名是否有效。如下图所示
思路：用户触发按键后可以向服务器发起http请求，将用户名提交给服务器来进行用户名确认，服务器返回检查结果。
很多浏览器中都支持XMLHttpRequest对象的创建，我们可以通过创建该对象，并进行一些设置来向服务器发起HTTP请求。
代码：
<html>
<head>
<title>用户注册</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
function getXmlHttpObject(){
var xmlHttp = null;
if (window.XMLHttpRequest)
// code for IE7+, Firefox, Chrome, Opera, Safari
//获取一个XMLHttpRequestd对象
xmlHttp=new XMLHttpRequest();
else// code for IE6, IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
function checkUser(){
var myXmlHttpRequest = getXmlHttpObject();
//采用GET方式请求的URL，将数据提交给registerPorcess.php
//var urlGet="http://localhost/registerPorcess.php?username="+$("username").value;
//采用POST方式请求的URL
var urlPost="http://localhost/registerPorcess.php";
var data = "username=" + $("username").value;
if(myXmlHttpRequest){
//发起一个建立socket链接，发起http请求，true说明采用异步方式
//myXmlHttpRequest.open("GET", urlGet, true);
myXmlHttpRequest.open("POST", urlPost, true);
<head>
<title>用户注册</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
function getXmlHttpObject(){
var xmlHttp = null;
if (window.XMLHttpRequest)
// code for IE7+, Firefox, Chrome, Opera, Safari
//获取一个XMLHttpRequestd对象
xmlHttp=new XMLHttpRequest();
else// code for IE6, IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
function checkUser(){
var myXmlHttpRequest = getXmlHttpObject();
//采用GET方式请求的URL，将数据提交给registerPorcess.php
//var urlGet="http://localhost/registerPorcess.php?username="+$("username").value;
//采用POST方式请求的URL
var urlPost="http://localhost/registerPorcess.php";
var data = "username=" + $("username").value;
if(myXmlHttpRequest){
//发起一个建立socket链接，发起http请求，true说明采用异步方式
//myXmlHttpRequest.open("GET", urlGet, true);
myXmlHttpRequest.open("POST", urlPost, true);
//采用POST方式需要设置请求头,GET方式则不需要
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//注册回调函数
myXmlHttpRequest.onreadystatechange = function(){callBack(myXmlHttpRequest)};
//如果是GET请求则填入NULL,否则，填入相应的数据
myXmlHttpRequest.send(data);
}
else {
window.alert("创建失败");
}
}
function callBack(xmlHttp){
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//注册回调函数
myXmlHttpRequest.onreadystatechange = function(){callBack(myXmlHttpRequest)};
//如果是GET请求则填入NULL,否则，填入相应的数据
myXmlHttpRequest.send(data);
}
else {
window.alert("创建失败");
}
}
function callBack(xmlHttp){
//状态4表示浏览器已经拿到服务器返回的数据
if (xmlHttp.readyState==4 && xmlHttp.status == 200)
if (xmlHttp.readyState==4 && xmlHttp.status == 200)
//获取服务器的返回值
$('myres').value = xmlHttp.responseText;
}
$('myres').value = xmlHttp.responseText;
}
//该函必须使用$不好，不然会出现问题
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="???" method="post">
用户名字:<input type="text" name="username1" onkeyup="checkUser();" id="username" /><input type="button" onclick="checkUser();" value="验证用户名" />
<input style="border-width: 0;color: red" type="text" id="myres">
<br/>
用户密码:<input type="password" name="password"><br>
电子邮件:<input type="text" name="email"><br/>
<input type="submit" value="用户注册">
</form>
</body>
</html>
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="???" method="post">
用户名字:<input type="text" name="username1" onkeyup="checkUser();" id="username" /><input type="button" onclick="checkUser();" value="验证用户名" />
<input style="border-width: 0;color: red" type="text" id="myres">
<br/>
用户密码:<input type="password" name="password"><br>
电子邮件:<input type="text" name="email"><br/>
<input type="submit" value="用户注册">
</form>
</body>
</html>
处理页面registerPorcess.php
<?php
header("Content-Type: text/html;charset=utf-8");
header("Cache-Control: no-cache");
$username = $_POST['username'];
if($username == 'abcd'){
echo '用户名不可用';
}
else {
echo '用户名有效';
}
?>
header("Content-Type: text/html;charset=utf-8");
header("Cache-Control: no-cache");
$username = $_POST['username'];
if($username == 'abcd'){
echo '用户名不可用';
}
else {
echo '用户名有效';
}
?>
处理ajax返回数据类型
ajax返回数据类型：纯文本格式、xml、json
如果只获取简单的字符串可以采用纯文本格式。
如果返回的数据类型比较复杂，则采用xml或者json。
采用XML来处理数据
服务器返回代码如下：
<?php
header("Content-Type:text/xml;charset=utf-8");
header("Cache-Control: no-cache");
$username = $_POST['username'];
if($username == 'chuizhi'){
$info= "<res><mes>用户名不可用</mes></res>";
}
else {
$info="<res><mes>用户名可以用</mes></res>";
}
echo $info;
?>
header("Content-Type:text/xml;charset=utf-8");
header("Cache-Control: no-cache");
$username = $_POST['username'];
if($username == 'chuizhi'){
$info= "<res><mes>用户名不可用</mes></res>";
}
else {
$info="<res><mes>用户名可以用</mes></res>";
}
echo $info;
?>
注意红色部分是text/xml格式，这样浏览器才会建立DOM对象(渲染DOM树)，若为text/html格式，则浏览器只会以文本方式来存储数据
前端只需要修改回调函数即可
function callBack(xmlHttp){
if (xmlHttp.readyState==4 && xmlHttp.status == 200){
//获取DOM对象
var xmlDoc = xmlHttp.responseXML;
//获取mes节点,可能存在多个mes节点
var mes = xmlDoc.getElementsByTagName("mes");
if (xmlHttp.readyState==4 && xmlHttp.status == 200){
//获取DOM对象
var xmlDoc = xmlHttp.responseXML;
//获取mes节点,可能存在多个mes节点
var mes = xmlDoc.getElementsByTagName("mes");
//<mes>content</mes>
//这里将标签包含的内容看成一个对象，获取文本对象的值
$('myres').value = mes[0].childNodes[0].nodeValue;
}
}
}
}
json数据格式
xml以树形格式存储，json数据以键值对的形式存储
基本格式：
var people ={"Name": "Bob", "Tel":"123456789", "email": "Bob@163.com" };
数组形式：
var people =[{"Name": "Bob",,"Tel":"123456798","email": "Bob@163.com" },
{"Name": "Rose","Tel":"123854697","email": "Rose@126.com" }
];
混合形式1：
{"Name": "Rose","Tel":"123854697","email": "Rose@126.com" }
];
混合形式1：
var people ={ "programmers": [
{"Name": "Bob", "Tel":"1668975656","email": "brett@newInstance.com" },
{"Name": "Jason", " Tel":"13851685142","email": "jason@servlets.com" }
]
};
访问方式:people.programmers[0].Name
{"Name": "Bob", "Tel":"1668975656","email": "brett@newInstance.com" },
{"Name": "Jason", " Tel":"13851685142","email": "jason@servlets.com" }
]
};
访问方式:people.programmers[0].Name
混合方式2：
var people ={ "username":"mary", "age":"20", "info":{"tel":"1234566","celltelphone":788666},
"address":[
{"city":"beijing","code":"1000022"},
{"city":"shanghai","code":"2210444"}
]
};
"address":[
{"city":"beijing","code":"1000022"},
{"city":"shanghai","code":"2210444"}
]
};
访问方式：
people.username
people.info.tel
people.address[0].city
people.username
people.info.tel
people.address[0].city
用JSON获取数据
只需修改javascript 部分的回调函数
function callBack(xmlHttp){
if (xmlHttp.readyState==4 && xmlHttp.status == 200){
//获取字符串
var resText = xmlHttp.responseText;
//将其转换为JSON数据格式
var resObj = eval("(" + resText +")");
//通过键值对的方式来访问
alert(resObj.mes);
alert(resObj.id);
alert(resObj.date);
$('myres').value = resObj.mes;
}
}
if (xmlHttp.readyState==4 && xmlHttp.status == 200){
//获取字符串
var resText = xmlHttp.responseText;
//将其转换为JSON数据格式
var resObj = eval("(" + resText +")");
//通过键值对的方式来访问
alert(resObj.mes);
alert(resObj.id);
alert(resObj.date);
$('myres').value = resObj.mes;
}
}
后端要说明以text/html方式来发送数据
发送的数据虽然是字符串，但需采用JSON数据格式
<?php
header("Content-Type: text/html;charset=utf-8");
header("Cache-Control: no-cache");
$username = $_POST['username'];
if($username == 'chuizhi'){
$info= '{"mes":"该用户不可用", "id":"001", "date":"2000-10-10"}';
}
else {
$info='{"mes":"该用户可用","id":"001", "date":"2000-10-10"}';
}
echo $info;
?>
header("Content-Type: text/html;charset=utf-8");
header("Cache-Control: no-cache");
$username = $_POST['username'];
if($username == 'chuizhi'){
$info= '{"mes":"该用户不可用", "id":"001", "date":"2000-10-10"}';
}
else {
$info='{"mes":"该用户可用","id":"001", "date":"2000-10-10"}';
}
echo $info;
?>
