Ajax = Asynchronous JavaScript and XML (异步的JavaScript和XML),Ajax是一种用于创建快速动态网页的技术。Ajax最大的优点就是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
传统的网页(不使用Ajax)如果需要更新内容,必须重新加载整个网页。
现在大部分网页都是使用ajax ,比如,我在百度输入Ajax的时候,下面会出现很多有关ajax的内容,这其中用到的就是ajax知识。还有新浪微博(在访问新浪微博时,当你看到一大半了,会自动帮我们加载更多的微博,同时页面并没有刷新)、Google地图等等。
百度中的ajax运用示例
ajax是与服务器进行交互的,这里我们使用后台语言php进行演示,再演示之前需要配置php的环境,这里选用wamp 作为学习环境,wamp的安装包:
这个安装方法,可以上网百度,这里暂不做介绍,但是需要注意的是:
1.当你运行网页的时候,一定要保证服务器是开启的,即启动完成能够在任务栏的右下角看到这个图标即表示成功。
2.php文件一定要放在配置的网站目录下,即www文件下(具体视你安装的情况而定)。
打开浏览器输入127.0.0.1查看显示的内容,如果是第一次安装,默认显示的应该是如下图片:
127.0.0.1含义: 127.0.0.1是回送地址,指本地机,一般用来测试使用。
在进入正题之前,我们还需要了解浏览器是如何与服务器进行通信的。
浏览器与服务器通信遵循HTTP协议
浏览器向服务器提交数据的两种方式是post 和get方式。
在这里我们用form表单元素演示get 与post方式。
Get方式,get.html页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>get方式向服务器提交数据</title>
</head>
<body>
<h1>get请求</h1>
<form action="get.php" method="get">
<input type="text" name="userName" placeholder="请输入姓名...">
<br>
<input type="password" name="pass" placeholder="请输入密码">
<br>
<input type="submit" value="提交">
</form>
</body>
</html>
get.php
<?php
// 规范编码格式 utf-8
header('content-type:text/html;charset=utf-8');
//echo '';输出语句
//$_GET 是php中定义的全局变量,userName是input中的name属性值 name="userName"
//.是php中的拼接符合 相当于js中的+
echo $_GET['userName'].'欢迎你!';
?>
界面展示:
需要注意:url地址栏:
当我提交数据之后:
url地址栏:
会发现在请求的页面后面多了我提交的内容即userName=Sugar以及pass=123 (多么隐私的信息都暴漏了)
利用调试工具,找到Netwrok ,会发现,其代表的含义:
我们再来看post方法:
post.html (只是把请求的页面action改为post.php 请求方法method改为post)
<form action="post.php" method="post">
<input type="text" name="userName" placeholder="请输入姓名...">
<br>
<input type="password" name="pass" placeholder="请输入密码">
<br>
<input type="submit" value="提交">
</form>
post.php页面
<?php
header('content-type:text/html;charset=utf-8');
echo $_POST['userName'].'你好!你的密码是'.$_POST['pass'];
?>
注意:请求方法是post 方法,所以php页面的全局变量用的是$_POST
页面展示:
url地址栏:
提交数据之后,返回的页面是:
url地址栏:
会发现:用post提交数据,地址栏url中不会拼接提交的数据
通过对比:了解到get与post提交数据的方式:
get提交数据,会把提交的数据拼接在url之后,其他人可以看到
post提交数据,在url中看不到,但仅仅也比get提交安全一点点,因为利用抓包工具还是可以查看提交的数据的(这个自行百度了解)
在每次提交数据的时候,用调试工具查看时,会发现,不管是get还是post方式,在NETWORK ->Header中都会有请求头、响应头、提交的数据与请求的地址url 、请求方法、以及状态码。
这是因为浏览器向服务器请求数据,服务器给浏览器返回数据,这之间是遵循HTTP协议的。一个完整的HTTP请求有两部分组成:请求报文(浏览器发出) 响应报文(服务器接收到请求以后,返回给浏览器的)
前面铺垫了辣么多,正式进入正题:
Ajax通过与后台服务器通信,实现异步刷新,遵循的也是HTTP协议。回想一下一个完整的http请求包括:
(1) 请求的网址url,方法:get/post
(2) 提交请求内容 数据,请求主体等
(3) 接收响应的内容
那么Ajax实现异步更新数据的方式也应该是首先发出http请求(请求报文),这包括
请求的url,请求的方法,把请求发出去
接收http请求(响应报文):通过注册事件的方式接收返回的值
完整的描述一下,ajax的工作过程
1. 创建XMLHTTPRequest对象
2. 设置请求的url等参数
3. 发送请求
4. 注册事件
5. 在注册事件中获取返回的内容,并修改页面显示,实现局部刷新
原理知道了,实践一下吧:(还是通过get和post方式)
get_ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>get方式</title>
</head>
<body>
<h1>使用get方式发送数据</h1>
<input type="text" name="content" class="con"></input>
<input type="button" value="提交" id="btn"></input>
</body>
</html>
<script type="text/javascript">
// 绑定点击事件
document.querySelector('#btn').onclick= function(){
// 发送ajax请求的5个步骤
//1.创建异步对象
var ajax = new XMLHttpRequest();
//2.设置请求的url等参数
/*参数1:请求的方法
参数2:请求的url ,get提交的数据是直接追加在url后面的
格式为xxx.php?xxx=xxx
这里动态传递参数
getAjax.php?content='+document.querySelector('.con').value
*/
ajax.open('get','getAjax.php?content='+document.querySelector('.con').value);
//3.发送请求
ajax.send();
//4.注册事件
ajax.onreadystatechange = function(){
// 为了保证数据完整的回来,我们一般会判断两个值
if (ajax.readyState ==4 && ajax.status==200) {
// 如果能够进入这个判断,说明请求的页面存在,且返回数据
//5.在注册事件中 获取返回的内容,并修改页面的显示
// 数据是保存在异步对象的属性中
console.log(ajax.responseText);
document.querySelector('h1').innerHTML = ajax.responseText;
};
}
}
</script>
get_ajax.php
<?php
header('content-type:text/html;charset=utf-8');
echo $_GET['content'].'我是通过ajax请求回来的数据';
?>
提交数据之前
获取数据之后,实验过程观察页面并未刷新
post_ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>post方式发送数据</title>
</head>
<body>
<h1>注册名字</h1>
<input type="text" name="userName" id="btnName"><label id="tishi" style="display:none"></label>
</body>
</html>
<script>
//绑定失去焦点事件
document.querySelector('#btnName').onblur=function(){
// 发送ajax请求到服务器
//1.创建异步对象
var ajax = new XMLHttpRequest();
//2.设置请求的url等参数
ajax.open('post','post_ajax.php');
/*如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:*/
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 3.发送请求
ajax.send('Name='+document.querySelector('#btnName').value);
// 4.注册事件
ajax.onreadystatechange = function(){
if (ajax.readyState ==4&&ajax.status==200) {
// 5.在注册事件中接收返回的内容并修改数据
console.log(ajax.responseText);
var show = document.querySelector('#tishi');
show.style.display='block';
if (ajax.responseText =="exist") {
show.innerHTML='该用户已经注册了!'
} else{
show.innerHTML='你可以使用该名字!'
}
}
};
}
</script>
post_ajax.php
<?php
header('content-type:text/html;charset=utf-8');
$name=$_POST['Name'];
// 准备一个数据 模拟已经存在的用户
$nameArray = array('jack','kong','rose','ice');
// 检验是否存在,并且接受返回值
$result=in_array($name, $nameArray);
// 通过if else返回不同的值给浏览器
if($result){
echo "exist";
} else{
echo "not exist";
}
?>
提交数据之前:
提交数据之后:
简单的介绍了一下ajax实现的原理,有不对的地方望大家指出,共同学习!
进一步理解XMLHttpRequest对象,可看这里