Ajax简介
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
实现步骤
1.创建ajax对象
xhr = new XMLHttpRequest();//标准
2.准备发送
//open()的三个参数,(1)请求方式(get或post),(2)请求地址,(3)同步或者异步标志位,默认是true表示异步,false表示同步
xhr.open('get','url',true);
3.执行发送动作
xhr.send(null);//get请求这里需要添加null参数,post请求为所传参数
4.指定回调函数:就是接收服务器响应的数据函数
xhr.onreadystatechange = function(){
//onreadystatechange:为状态改变的事件触发器,每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数
if(xhr.readyState == 4){
//readyState:为请求的状态。有5个可取值:0 = 未初始化,1 = 正在加载,2 = 已加载,3 = 交互中,4 = 完成
if(xhr.status == 200){
//服务器的HTTP状态码,如:404 = "文件末找到" 、200 ="成功" ,等等
alert(xhr.responseText);
}
}
}
Ajax之get和post两种请求方式的实现
因为html页面要向后端请求数据,所以需要在后端搭建环境,来响应前端的请求,我在后端使用的编程语言是php,代码如下所示。
后端服务器01ajax.php文件代码为
<?php
//判断请求方式
if(!empty($_POST)){
$uname=$_POST[username];//获取页面传过来的值
}
else{
$uname=$_GET[username];
}
//打印输出
echo $uname."你好!";
?>
注意:php返回给前端网页数据只能用echo打印的方式,前端html页面才能获取,用return返回前端接收不到数据。
get请求方式的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax的get请求方式的实现</title>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(){
//获取用户名
var username = document.getElementById('username').value;
// 1、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 2、准备发送
//如果是get请求那么请求参数必须在url中传递,encodeURI()用来对中文参数进行编码,防止乱码。
var param = 'username='+username+"&type=get";
xhr.open('get','01ajax.php?'+encodeURI(param),true);
// 3、执行发送动作
xhr.send(null);//get请求这里需要添加null参数
// 4、指定回调函数
xhr.onreadystatechange = function(){
//xhr.readyState == 4为请求完成
if(xhr.readyState == 4){
//xhr.status == 200服务器响应成功
if(xhr.status == 200){
//接收服务器响应信息
var data=xhr.responseText;
//弹出打印信息
alert(data);
}
}
}
}
}
</script>
</head>
<body>
<form>
用户名:
<input type="text" name="username" id="username">
<input type="button" value="提交" id="btn">
</form>
</body>
</html>
实现效果为:
post请求方式的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax的post请求方式的实现</title>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(){
var uname = document.getElementById('username').value;
// 1、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();//标准
// 2、准备发送
//post请求参数通过send传递,不需要通过encodeURI()转码,必须设置请求头信息。
var param = 'username='+uname+"&type=post";
xhr.open('post','01ajax.php',true);
//设置头信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 3、执行发送动作
xhr.send(param);//post请求参数在这里传递,并且不需要转码
// 4、指定回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText);
}
}
}
}
}
</script>
</head>
<body>
<form>
用户名:
<input type="text" name="username" id="username">
<input type="button" value="提交" id="btn">
</form>
</body>
</html>
实现效果
Ajax使用json(数据交换格式)实现多数据的获取
JSON是什么
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。
任何支持的类型都可以通过 JSON 来表示,例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型。
JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。它的格式为:
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串
JSON 和 JS 对象互转
要实现从JSON字符串转换为JS对象,使用 JSON.parse() 方法:
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
要实现从JS对象转换为JSON字符串,使用 JSON.stringify() 方法:
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'
JSON运用实例:查询学生信息
PHP代码
<?php
if(!empty($_POST)){
$ID=$_POST[ID];
}
else{
$ID=$_GET[ID];
}
$stu = array();
$stu['001'] = array('ID'=>'001','name'=>'吴天','class'=>'1班','score'=>'90');
$stu['002'] = array('ID'=>'002','name'=>'响妮','class'=>'3班','score'=>'60');
$stu['003'] = array('ID'=>'003','name'=>'艾霓','class'=>'2班','score'=>'70');
$stu['004'] = array('ID'=>'004','name'=>'李勇','class'=>'4班','score'=>'50');
// 这里的array_key_exists用来判断数组中没有对应键
if(array_key_exists($ID,$stu) == 1){
$flag= $stu[$ID];//这里根据参数获取传过来对应ID的信息
echo json_encode($flag);//将数组转成JSON格式,并输出
}else{
echo '{"flag":0}';
}
?>
JavaScript交互数据显示到页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AjaxJSON数据应用</title>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(){
var ID = document.getElementById('ID').value;
// 1、创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();//标准
// 2、准备发送
//如果是get请求那么请求参数必须在url中传递
//encodeURI()用来对中文参数进行编码,防止乱码
var param = 'ID='+ID;
xhr.open('get','student.php?'+encodeURI(param),true);
// 3、执行发送动作
xhr.send(null);//get请求这里需要添加null参数
// 4、指定回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//通过JSON.parse()方法,将传过来的json格式数据转化为JS对象,
var data=JSON.parse(xhr.responseText);
var info=document.getElementById("info");
var tag='';
if(data.flag==0){
tag="<li>抱歉,未查到学号为:"+ID+"相关信息"+"</li>"
}
else{
tag="<li>"+data.ID+":学号的信息如下:"
+"</li><li>姓名:"+data.name+
"</li><li>班级:"+data.class+
"</li><li>平均成绩:"+data.score+
"</li>";
}
info.innerHTML=tag;
}
}
}
}
}
</script>
</head>
<body>
<form>
请输入查询学生的ID:
<input type="text" name="ID" id="ID">
<input type="button" value="提交" id="btn">
<ul id="info">
</ul>
</form>
</body>
</html>
实现效果
输入正确的学号
输入不存在的学号: