一、Ajax简介
1.1 什么是Ajax
A javaScript a XML，是指一种创建交互式网页应用的网页开发技术，不需要刷新或者跳转页面就可以实现数据通讯。Ajax有同步和异步两种请求方式（不推荐使用同步操作）。
【同步与异步】
【同步与异步】
1.2 早期Ajax的应用
google地图最先将Ajax应用到极致
1.3 Ajax的应用场景
百度地图类、百度图片类、瀑布流、数据验证、实时数据请求…
1.4 Ajax的工作原理
Ajax是一种能够实现异步请求的机制，也正是这种机制的存在才能够使得页面在不刷新的基础上能够访问服务器或者刷新页面等操作
二、XHR对象
Ajax的技术实现借助浏览器提供的XHR对象，该对象是由XMLHttpRequest原型实例化而来，系统提供的是XMLHttpRequest对象原型，需实例化后使用。
<script>
// XHR对象 XMLHttpRequest
// 在浏览器中有构造方法和对象原型
console.log(XMLHttpRequest); //结果为构造方法
console.log(XMLHttpRequest.prototype); //对象原型
// 实例化一个XHR对象
var xhr=new XMLHttpRequest();
console.log(xhr); //对象实例
</script>
2.1 XHR对象成员属性
| 关键字 | 释义 |
|---|---|
| readState | XHR对象请求的状态信息码（客户端的信息代码）★ |
| response | ajax请求的响应信息对象 |
| responseText | ajax请求的响应信息字符串格式 ★ |
| responseType | ajax请求的响应信息的格式 |
| responseURL | ajax请求的响应信息地址 |
| responseXML | ajax请求的响应信息XML格式 |
| status | ajax请求的响应信息（服务器端的相应信息代码）★ |
| statusText | ajax请求的响应信息字符串 |
2.2 Ajax请求过程中的相关事件
| 关键字 | 释义 |
|---|---|
| onabort | 在Ajax请求中止的时候 |
| onerror | 在Ajax请求出错的时候 |
| onload | 在Ajax加载请求的时候 |
| onloadend | 在Ajax加载请求结束的时候 |
| onloadstart | 在Ajax加载请求开始的时候 |
| onprogress | 在Ajax加载请求过程中的时候 |
| onreadystatechange | 在请求状态改变的时候 ★ |
2.3 XHR对象成员方法
| 关键字 | 释义 |
|---|---|
| open() | 建立一个ajax连接 ★open(方法字符串，请求的URL，使用异步还是同步); |
| send() | 发送一个ajax连接 ★ |
| abort() | 终止一个ajax请求 |
| setRequestHeader() | 设置请求的头信息 |
| getResponseHeader() | 获取头信息设置 |
| getAllResponseHeaders() | 获取所有头信息组成的数组 |
【post头信息设定】"Content-Type","application/x-www-form-urlencoded"
【get请求与post请求】
get请求： 好比发送明信片，数据会在地址栏中显示，发送数据有长度限制
post请求： 好比发送信封，数据不会在地址栏中显示，发送数据长度取决于服务器
2.4 http响应状态信息码
【100系列】
表示服务器理解了请求但是没有完成需要继续操作
【200系列】
表示服务器成功响应了请求
200表示请求响应成功OK ★
【300系列】
表示服务器进行了重定向操作
【400系列】
表示客户端请求错误
403 表示没有权限进行访问 ★
404 表示找不到指定的文件 ★
【500系列】
表示服务器端有错误
简单ajax流程示例代码
<body>
<textarea>春眠不觉晓</textarea>
<hr />
<button id="getAjax">点击使用ajax</button>
<script>
// 简单ajax流程_get请求————————————————————————————
// 文件放在D:\phpStudy\PHPTutorial\WWW目录中使用localhost/c31_Ajax.html打开
// 获取按钮
var ajaxBtn=document.getElementById('getAjax');
// 事件函数
function doAjaxGet(){
// ajax操作流程 4步
// 1.建立一个xhr对象
var xhr1=new XMLHttpRequest();
// 2.打开一个服务器链接
// 请求方式：get post
xhr1.open('get','a.php?age=18');
// 3.发送请求（get不需要发送数据，post需要）
xhr1.send(null);
// 4.检测数据是否发送成功，检测服务器是否响应成功
xhr1.onreadystatechange=function(){
// 是否发送成功
if(xhr1.readyState==4){
// 4表示正常的请求过程成功
// 是否响应成功
// alert(xhr1.status);
if(xhr1.status==200){
// 使用服务器给我们的数据
console.log(xhr1.responseText);
}
}
}
}
// 添加事件
ajaxBtn.addEventListener('click',doAjaxGet,false);
// 简单ajax流程_post请求————————————————————————————————
// 获取按钮
var ajaxBtn=document.getElementById('getAjax');
// 事件函数
function doAjaxPost(){
// ajax操作流程 4步
// 1.建立一个xhr对象
var xhr2=new XMLHttpRequest();
// 2.打开一个服务器链接
// 请求方式：get post
xhr2.open('post','b.php');
// 设置post专用的头信息
xhr2.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 3.发送请求（get不需要发送数据，post需要）
xhr2.send('age=99&sex=man&hobby=sing');
// 4.检测数据是否发送成功，检测服务器是否响应成功
xhr2.onreadystatechange=function(){
// 是否发送成功
if(xhr2.readyState==4){ // 4表示正常的请求过程成功
// 是否响应成功
// alert(xhr2.status);
if(xhr2.status==200){
// 使用服务器给我们的数据
console.log(xhr2.responseText);
}
}
}
}
// 添加事件
ajaxBtn.addEventListener('click',doAjaxPost,false);
</script>
</body>
【a.php】
<?php
echo $_GET['age'];
echo '啦啦啦';
?>
【b.php】
<?php
echo '年龄：'.$_POST['age'];
echo '性别：'.$_POST['sex'];
echo '爱好：'.$_POST['hobby'];
echo '嘿嘿嘿';
?>
扫一扫
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
