Ajax简介
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
实现步骤
1.创建ajax对象
javascript">xhr = new XMLHttpRequest();//标准
2.准备发送
javascript">//open()的三个参数,（1）请求方式（get或post），（2）请求地址，（3）同步或者异步标志位，默认是true表示异步，false表示同步
xhr.open('get','url',true);
3.执行发送动作
javascript"> xhr.send(null);//get请求这里需要添加null参数，post请求为所传参数
4.指定回调函数：就是接收服务器响应的数据函数
javascript"> 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"><?php
//判断请求方式
if(!empty($_POST)){
$uname=$_POST[username];//获取页面传过来的值
}
else{
$uname=$_GET[username];
}
//打印输出
echo $uname."你好！";
?>
注意：php返回给前端网页数据只能用echo打印的方式，前端html页面才能获取，用return返回前端接收不到数据。
get请求方式的实现
javascript"><!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请求方式的实现
javascript"><!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>
实现效果
json_156">Ajax使用json（数据交换格式）实现多数据的获取
JSON是什么
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。
任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型。
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。它的格式为：
javascript">var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串
JSON 和 JS 对象互转
要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：
javascript">var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：
javascript">var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'
JSON运用实例：查询学生信息
PHP代码
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交互数据显示到页面代码
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>
实现效果
输入正确的学号
输入不存在的学号：
