ajax的概念
什么是ajax
1、Ajax: asynchronous javascript and xml (异步js和xml)
2、是可以与服务器进行(异步/同步)交互的技术之一
ajax的语言载体是javascript。 最大特点:页面不刷新
ajax的一些常见应用,使网页无刷新向web服务器发送请求数据.
ajax出现的历史
1999年,微软公司发布IE5浏览器的时候嵌入的一种技术。起初名字是XMLHttp
直到2005年,google公司发布了一个邮箱产品gmail,内部有使用ajax技术,该事情引起人们对ajax的注意,也使得一蹶不振的javascript语言从此被人们重视起来
let btn = document.querySelector('.btn')
btn.onclick = ()=>{
// 创建ajax实例化对象
let xhr = new XMLHttpRequest()
// console.log(xhr.readyState)
// 配置请求信息
// 参数1表示请求方式 get || post
// 参数2表示请求地址
// 参数3表示同步或者异步,默认就是异步,可以省略
// http://localhost:8888/test/first 接口(api)
// xhr.open('get', 'http://localhost:8888/test/first?data'+Date.now())
xhr.open('get', 'http://localhost:8888/test/third?name=zhangsan&age=18')
// console.log(xhr.readyState)
// 监听请求的状态,咱们的请求进行到哪一步了,结果回来没有,在这个事件里面可以监听到
xhr.onreadystatechange = ()=>{
/*
注意点1:
+ 在事件里面打印出来的状态是2 、3、 4,2的时候表示链接刚好建立是没有结果返回的是,因此xhr.responseText输出的是空字符串
+ 状态是3的时候,表示数据在处理,有可能处理完成了有可能没有完成,如果需要返回的数据量比较大的情况下,在3的时候返回的数据有课程是不完整的,
如果是简单的数据会直接返回,因此输出了一次结果
+ 状态是4的时候,表示所有的工作都处理完了,直接返回一个完整的结果,因此输出一个结果
注意点2:
+ 咱们在发送请求的时候一定要保证结果的完整性,因此需要判断状态是4的时候才去接收返回的结果
*/
// console.log(xhr.readyState)
// console.log(xhr.responseText)
if(xhr.readyState == 4){
if(xhr.status == 200){
console.log(JSON.parse(xhr.responseText))
}
}
}
// onload表示当所有的状态都是完成时返回接收数据
// xhr.onload = ()=>{
// console.log(xhr.responseText)
// }
// 请求发送出去
xhr.send()
}
ajax的使用
XMLHttpRequest对象
浏览器内置对象,用于与服务器通信(交换数据) , 由此我们便可实现对网页的部分更新,而不是刷新整个页面。这个请求是异步的,即在往服务器发送请求时,并不会阻碍程序的运行,浏览器会继续渲染后续的结构。
ajax的运行
一定要在服务器环境下打开,才能请求成功.
GET请求的创建
请求的创建与发送
主流浏览器(火狐、google、苹果safari、opera,包括IE8以上的版本)的创建方式,也是现在主要使用的.
//1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2. 设置请求的类型,以及地址
// 第一个参数:请求方式 get/post
// 第二个参数:请求的地址 需要在url后面拼上参数列表
// 第三个参数:默认是异步
xhr.open("get", "01.php?name=Jepson",异步/同步);
//3.发送请求到服务器
xhr.send(null);
手册位置
http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp
GET的使用
例1:在页面中添加一个按钮,点击一次向后台发送一个请求, 后端将一段文字写入a.txt
<input type="button" onclick="fn()" value="点击发送ajax" />
<script>
function fn(){
// 1 实例化对象
let xhr = new XMLHttpRequest();
// 2 设置请求的类型以及地址
xhr.open('get','请求地址');
// 3 发送请求,get请求则设置为空,post请求则设置参数
xhr.send();
}
</script>
ajax状态
通过监控请求状态,当状态等于4的时候才能接受数据
xhrObj.onreadystatechange - 监听readyState状态,当状态发生改变可调用对应函数处理
ajax五种状态的作用
/* xhrObj.readyState - 返回当前请求的状态
xhr.readyState = 0时-未初始化,对象已建立,尚未调用open()
xhr.readyState = 1时-初始化,对象建立未调用send()
xhr.readyState = 2时-发送数据,send()方法调用,但是当前的状态及http头未知,请求未完成
xhr.readyState = 3时-数据传输中,接受部分数据
xhr.readyState = 4时-响应内容解析完成
*/
例:获取ajax请求过程的四种状态
// 1 实例化对象
let xhr = new XMLHttpRequest();
// 2 创建请求
xhr.open('get','http://localhost/web/index.php');
// 3 发送请求
xhr.send();
xhr.onreadystatechange = function(){
// 4 使用回调函数检测当前的状态
console.log(xhr.readyState);
// 获取服务器状态码
console.log(xhr.status)
// 接受服务器返回数据
console.log(xhr.responseText);
}
返回服务器状态码 xhr.status
1**:请求收到,继续处理
2**:操作成功收到,分析、接受
3**:完成此请求必须进一步处理
4**:请求包含一个错误语法或不能完成
5**:服务器执行一个完全有效请求失败
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——客户端请求成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到,但返回信息为空
205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET,但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码,现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求,如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖,请求资源不可访问
407——类似401,用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态,请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用,有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本
服务器响应值接收
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 | 描述 |
---|---|
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据(知道)。 |
接受服务器返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<script type="text/javascript">
function f1(){
//创建ajax对象
var xhr = new XMLHttpRequest();
//设置请求的地址
xhr.open('get','./reponse.php');
//显示ajax的状态
/*
ajax的四中状态
0 对象已创建,请求连接未初始化(尚未调用open方法)
1 请求连接已经已经建立没有调用send方法
2 请求连接已建立,调用send方法
3 数据已经开始传输但尚未完成
4 数据传输已经完成,请求已经完成
*/
// onreadystatechange 当请求的状态发生改变时,就会触发
xhr.onreadystatechange=function(){
//显示五种状态
//console.log(xhr.readyState);
//判断当的请求状态等于4时,代表数据传输完成
if(xhr.readyState==4){
if(xhr.status==200){
//使用responseText接受服务器端传递的数据
//alert(xhr.responseText);
//追加显示到页面中
document.body.innerHTML+=xhr.responseText;
}
}
//alert(xhr.responseText);
//发送请求,如果是get请求则参数设置为null
xhr.send();
}
</script>
<body>
<input type="button" name="" value="点我发送请求" onclick="f1();">
</body>
</html>
总结:
1 创建对象
let xhr = new XMLHttpRequest();
2 设置请求
xhr.open(get,请求地址)
3 发送请求
xhr.send()
4 判断状态接收返回值
xhr.onreadystatechange = funtion(){
if(xhr.readyState==4 && xhr.status==200){
// 接受返回值
let str = xhr.response
}
}